JQuery code after each ajax call -

JQuery code after each ajax call -

i have customized long sharepoint library editform dividing 5 sections. code used given marc anderson @ http://sympmarc.com/2011/08/18/taming-long-sharepoint-list-forms-using-jquery-to-break-them-into-sections/, though customized little suit needs.

the problem facing have 3 fields on page cascading lookups [implemented 3rd party server solution]. whenever alter value of 1 of these lookup fields, alter options available in other list boxes break section construction created above jquery code. standard rows , columns appear in sequence should header rows created jquery appear @ bottom of page.

i tried using window.load instead of document.ready , made few other modifications. success got first lookup field works fine now, sec , 3rd still break section structure. there improve way create sure jquery code runs after each ajax phone call , after ajax response handlrers have completed execution? if there improve way accomplish same thing, appreciate suggestions well.

my final code looks this:

<script type="text/javascript" language="javascript"> var opensection = 1; $(window).load(function() { createsections(); }); function createsections() { setupsection("formdetails", "form details", "name", "available languages"); setupsection("developmentandapprovalprocess", "development , approval process", "12-003 submitted date", "development flags"); setupsection("privacy", "privacy", "pia approved date", "sorn citation"); setupsection("paperworkreductionact", "paperwork reduction act", "collection title", "pra pocs"); setupsection("notes", "notes", "notes", "notes"); addclickhandlers(); if(opensection == 2) { $("tr[section-name='developmentandapprovalprocess']").css("display", "block"); $("tr#developmentandapprovalprocess").addclass("collapsible-collapse"); } else if(opensection == 1) { $("tr[section-name='formdetails']").css("display", "block"); $("tr#formdetails").addclass("collapsible-collapse"); } } function setupsection(sectionshortname, sectionlongname, startcolumn, endcolumn) { var sectionstartrow = findformfield(startcolumn).closest("tr"); var sectionendrow = findformfield(endcolumn).closest("tr"); $(sectionstartrow).before("<tr class='collapsible-section-header' id='" + sectionshortname + "'>" + "<td class='collapsible-section-header-cell' colspan=2>" + sectionlongname + "</td>" + "</tr>"); $("tr#" + sectionshortname).attr("header-row", "yes"); $(sectionstartrow).attr("section-name", sectionshortname); $(sectionstartrow).nextuntil(sectionendrow).attr("section-name", sectionshortname); $(sectionendrow).attr("section-name", sectionshortname); $(sectionendrow).children(1).addclass("collapsible-section-last-row-cell"); $(sectionendrow).children(2).addclass("collapsible-section-last-row-cell"); $("tr[section-name='" + sectionshortname + "']").css("display", "none"); } function addclickhandlers() { $("tr[header-row='yes']").click(function() { var activesection = $(this).attr("id"); $("tr[header-row='yes']").each(function() { var sectionname = $(this).attr("id"); var othersectionrows = $("tr[section-name='" + sectionname + "']"); if(($(this).next("tr[section-name='" + sectionname + "']").css("display") == "block") && (sectionname != activesection)) { $(othersectionrows).css("display", "none"); $(this).removeclass("collapsible-collapse"); } }); var thissectionrows = $("tr[section-name='" + activesection + "']"); if($(this).next("tr[section-name='" + activesection + "']").css("display") == "block") { $(thissectionrows).css("display", "none"); $(this).removeclass("collapsible-collapse"); } else { $(thissectionrows).css("display", "block"); $(this).addclass("collapsible-collapse"); } }); findformfield("process status").find("input[id*=main_input]").unbind('propertychange', createsectionshandler); findformfield("process status").find("input[id*=main_input]").bind('propertychange', createsectionshandler); } function createsectionshandler(e) { e.preventdefault(); $("tr[header-row='yes']").remove(); settimeout(createsections, 2500); settimeout(changeopensection, 3500); } function changeopensection() { opensection = 2; } function findformfield(columnname) { var thisformbody; var searchtext; searchtext = regexp("fieldname=\"" + columnname.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&") + "\"", "gi"); $("td.ms-formbody").each(function() { if(searchtext.test($(this).html())) { thisformbody = $(this); homecoming false; } }); homecoming thisformbody; } </script> <style>.collapsible-hidden { display:none; }</style> <style>.collapsible-main { height:250px; overflow:scroll; }</style> <style>.collapsible-no-item-selected { font-size:12px; }</style> <style>.collapsible-section-link { padding-left:15px; font-size:10px; }</style> <style>.collapsible-section-header { background-image:url('/_layouts/images/plus.gif'); background-repeat:no-repeat; background-position:5px center; padding:3px 3px 3px 22px; background-color:#6699cc; font-weight:bold; color:#ffffff; }</style> <style>.collapsible-section-header-cell { border-top:1px #c2c2c2 solid; font-face:arial; font-size:1.5em; padding-left:20px;}</style> <style>.collapsible-section-last-row-cell { border-bottom:2px black solid; }</style> <style>.collapsible-collapse { background-image:url('/_layouts/images/minus.gif'); }</style>

i apologize, didnt create clear earlier. ajax calls made [supposedly] 3rd party server solution implements cascading lookup fields filter values of list boxes depending on options selected in other fields, , have no control/access on these calls/code.

i tried upload images create more clear, says need @ to the lowest degree 10 reputation able upload images. m trying simulate images text below:

when page loads, divides columns sections this:

--------------form details------------ [header row inserted jquery] column 1 text input column 2 text input column 3 text input --------------development details----- [header row inserted jquery] column 4 dropdown column 5 dropdown column 6 dropdown --------------notes------------------- [header row inserted jquery] column 7 text input column 8 text input

when alter selection of dropdown 4, changes values in dropdown 5 , dropdown 6 layout of page becomes - columns displayed first , header rows like:

column 1 text input column 2 text input column 3 text input column 4 dropdown column 5 dropdown column 6 dropdown column 7 text input column 8 text input --------------form details------------ [header row inserted jquery] --------------development details----- [header row inserted jquery] --------------notes------------------- [header row inserted jquery]

jquery ajax