Need insight on UpdatePanel / _DoPostBack with JavaScipt

Question

I've spent the better part of three days trying to wrap my head around UpdatePanel and _DoPostBack to find a solution to my problem with my infopath browser enabled form.

I have a simple script that displays a popup on a button click which works until a postback occurs (that's what I'm assuming anyway). I have a choice control (combobox) that when populated performs a postback. After the postback occurs I lose the button functionality described above until I refresh (F5). I'm looking for a solution client side that I can implement in a js file as I use CEWP's to implement my code. I'm not against making changes to the page itself using SPDesigner and advanced editing, however, I would like to keep it in the js file as much as possible.

If I can get past this problem it will open up way more options for me as I'm currently only running scripts on pages with no postbacks until the form is saved and exited.

I've tried dissecting this tutorial, however, I'm unsure how to implement:
http://encosia.com/easily-refresh-an-updatepanel-using-javascript/

I've tried numerous solutions to no avail such as:
jQuery autocomplete dissapears on postback and the JQuery .Live() / .On() solution.

See my simple script below:

 <script language="javascript" type="text/javascript">
 ExecuteOrDelayUntilScriptLoaded(pageLoad, "sp.js");
   function pageLoad(sender, args)   
    {       
    // Button click - Set Due Date  
 $("#ctl00_m_g_a8d36925_babc_41fa_86da_95fa02c75109_FormControl0_V1_I1_B2").click(function() 
        {
           alert("It worked...");
        }); // End Due Date
    } // End pageLoad  
</script>

Answer 1

Selecting a value in your dropdown is probably causing a postback, which can mess up your JavaScript and may mess with control IDs etc. Monitoring closely in your browser's developer tools should give a better idea of what's going on.

Unless you're doing something more complicated than your example above, I would suggest that it would be far easier to achieve what you want with InfoPath's built in functionality.

For example, rather than using JS to set the title for a control, you can add a textfield to your form, set it to be read-only and format it to have no shading and no borders. That will effectively give you a label you can place beside your control, and you can set it's text value using a rule on the drop down.

Instead of a popup alert, you can repeat the same trick as above to create an "alert label", but add an extra field to your form's datasource to say if it should be displayed or not. Then add a conditional formatting rule to your "alert" label, to hide depending on the value of that field. Or to get a bit fancier, you could add a section to your form, put the "alert label" in the section and set the conditional formatting rule on that. Then in the rules for your dropdown, set the text for the alert and set the field to say if it should be displayed or not.

It's not the prettiest solution from a programmer's perspective, but it should work very reliably in InfoPath.