javascript - Jquery fire 2 trigger events asynchronously -
i have 2 events need fire asynchronously because 2nd event relies on first event.
currently have:
$(document).ready(function() { $("#courseid").trigger('change'); $("#clearall").trigger('click'); }); here 2 events:
$('#courseid').change(function() { alert('inside courseid change event'); required(document.getelementbyid('courseid').value, 'courseid', 'err_courseid'); // hole information & display in holes var courseid = document.getelementbyid('courseid').value; document.getelementbyid('db_courseid').value = courseid; if(courseid.length<1) { var holes = document.getelementbyid('num_holes').value; for(i=1; i<=holes; i++) { id = "holes_"+i; $('#'+id).prop('checked', false); } document.getelementbyid('num_holes').value = 0; document.getelementbyid('hole_error').style.display = "inline"; document.getelementbyid('holes').style.display = "none"; document.getelementbyid('front9').style.display = "none"; document.getelementbyid('mid9').style.display = "none"; document.getelementbyid('back9').style.display = "none"; document.getelementbyid('clearall').style.display = "none"; document.getelementbyid('selectall').style.display = "none"; chkcheckboxes(); return; } else { document.getelementbyid('hole_error').style.display = "none"; document.getelementbyid('holes').style.display = "inline"; // select holes var holes = document.getelementbyid('num_holes').value; for(i=1; i<=holes; i++) { id = "holes_"+i; $('#'+id).prop('checked', true); } } $.ajax({ url: "/p3live/_includes/php/get_playable_holes.php", type: "post", datatype: 'json', data: {courseid: courseid}, success: function(response) { if (response.status == "success") { // need clear existing div when append doing empty field $('#holes').empty(); var str = response.message + ''; /* add blank space assure recognized string */ var holes = str.split(","); var sections = holes.length/9; alert('setting num_holes'); document.getelementbyid('num_holes').value = holes.length; for(i=0; i<sections; i++) { for(j=0; j<9; j++) { holenum = (i*9)+j; if(holes.length<holenum) { continue; } addcheckbox(holes[holenum]); id='holes_'+holes[holenum]; } var html = $("#holes").html(); html = html + "<br />"; // creates new line after each section of 9 holes $("#holes").html(html); } // need have entire holes div populated before can check boxes for(i=0; i<holes.length; i++) { id='holes_'+holes[i]; $("#"+id).prop("checked", true); } chkcheckboxes(); // let's setup buttons should visible switch (sections) { case 0: document.getelementbyid('front9').style.display = "none"; document.getelementbyid('mid9').style.display = "none"; document.getelementbyid('back9').style.display = "none"; document.getelementbyid('clearall').style.display = "none"; document.getelementbyid('selectall').style.display = "none"; break; case 1: document.getelementbyid('front9').style.display = "inline"; document.getelementbyid('mid9').style.display = "none"; document.getelementbyid('back9').style.display = "none"; document.getelementbyid('clearall').style.display = "inline"; document.getelementbyid('selectall').style.display = "inline"; break; case 2: document.getelementbyid('front9').style.display = "inline"; document.getelementbyid('mid9').style.display = "none"; document.getelementbyid('back9').style.display = "inline"; document.getelementbyid('clearall').style.display = "inline"; document.getelementbyid('selectall').style.display = "inline"; break; case 3: document.getelementbyid('front9').style.display = "inline"; document.getelementbyid('mid9').style.display = "inline"; document.getelementbyid('back9').style.display = "inline"; document.getelementbyid('clearall').style.display = "inline"; document.getelementbyid('selectall').style.display = "inline"; break; } } else { alert(response.message); } }, error: function(response) { (var k in response){ if (typeof response[k] !== 'function') { console.log("key " + k + ", value " + response[k]); } } } }); }) this event takes courseid field , retrieves information database regarding number of holes. creates checkboxes each hole , checks them default. sets display state buttons. 1 of which, secondary event want trigger.
$("#clearall").click(function() { var holes = document.getelementbyid('num_holes').value; alert('inside clearall event. holes:'+holes); for(i=1; i<=holes; i++) { id = "holes_"+i; $('#'+id).prop('checked', false); } chkcheckboxes(); }) as can see, inserted alerts see order firing. problem clearall event firing before hole checkboxes displayed ('setting num_holes' alert shows after 'inside clearall event...').
any on getting fire asynchronously appreciated. don't want use settimeout() time vary based on user's computer.
you can put change event function named function , add callback fire after ajax:
function onchangeevent(callback) { required(document.getelementbyid('courseid').value, 'courseid', 'err_courseid'); ... $.ajax({ url: "/p3live/_includes/php/get_playable_holes.php", type: "post", datatype: 'json', data: {courseid: courseid}, success: function(response) { ... if (typeof callback == 'function') { callback(); } }, error: function(response) { (var k in response){ if (typeof response[k] !== 'function') { console.log("key " + k + ", value " + response[k]); } } if (typeof callback == 'function') { callback(); } } }); } and call use function as:
$('#courseid').change(onchangeevent); and
$(document).ready(function() { onchangeevent(function() { $("#clearall").trigger('click'); }); });
Comments
Post a Comment