bind('load change', function()

cannondale

Guys,

I have a search box in a form that includes a search text field, a category dropdown, a sub-category dropdown and a submit button.
The sub-category dropdown is populated with the JQuery code below. Initially, I only had a change function for the 'dd_category_search' element, which works great. However, the when the form is submitted (with the search button) the sub-category dropdown is NOT populated as the category dropdown does not change and does not fire the change function. I thought the solution would be to bind both change and load to the 'dd_category_search' element. However, the function only fires on change.

What am I missing? Is there a better way to repopulate the sub-category dropdown after the form is submitted?

$(document).ready(function(){
	$('#dd_category_search').bind('load change', function(){
		var category_code = $(this).val();
		var request = $.ajax({
			type:'get', 
			url:'pop_dd.php', 
			data:'category_code='+category_code
		});
		request.done(function(data) {
			$('#dd_sub_category_search').html(data);
		});
		request.fail(function() { 
			alert('ERROR: Unable to populate sub-cat'); 
		});
		request.always(function() { 
			alert('Successfully populated search sub-cat'); //for testing only
		});				
	}); //end load/change
}); //end ready

johanafm

cannondale;11037383 wrote:
What am I missing?

.bind() assigns the event handler to the element. Bind cannot do that before the element exists. Without knowing exactly in what order things happen and what is considered what, I'm betting the the load event has fired for the element with id "dd_category_search" before you have any way of attaching an event handler to it. Well, unless you do it in your html code instead Which I believe you are discouraged from doing these days.

cannondale;11037383 wrote:
Is there a better way to repopulate the sub-category dropdown after the form is submitted?

Very weird way to phrase the question and my initial reaction is that "no, there is no way to do anything after the form is submitted because the document will then be replaced by a new document. I'm guessing that you are redisplaying the same form using this data. Or you have some other form using the data after its been stored in the database.

Either way you should actually be asking "how to populate the sub-category based on the data in the super-category". Sure, there is nothing selected the first time around, unless you have a pre-selected value other than "Please choose…". Later on there may be some pre-selected value for the super select. But do note that you have actually already answered this question yourself. The change event handler. The answer on how to do it when there is no change happens to be as simple as triggering the change event. See http://api.jquery.com/trigger/

In case you have an option with value="0" and text of "please select…" you may want to handle that case in the javascript event handler so as to avoid an unnecessary round trip to the server. While the server obviously also has to be able to deal with it without errors or notices.

$(document).ready(function(){
	$('#dd_category_search').bind('load change', function(){
		var category_code = $(this).val();
		var request = $.ajax({
			type:'get', 
			url:'pop_dd.php', 
			data:'category_code='+category_code
		});
		request.done(function(data) {
			$('#dd_sub_category_search').html(data);
		});
		request.fail(function() { 
			alert('ERROR: Unable to populate sub-cat'); 
		});
		request.always(function() { 
			alert('Successfully populated search sub-cat'); //for testing only
		});				
	}); //end load/change
}); //end ready

[/QUOTE]

cannondale

johanafm,

Thanks for your detailed reply.

Bind cannot do that before the element exists. Without knowing exactly in what order things happen and what is considered what, I'm betting the the load event has fired for the element with id "dd_category_search" before you have any way of attaching an event handler to it.

I suspect this is not the issue for the following reasons:

1) If the element id "dd_category_search" did not exist, I believe I would see a console error when the load tried to fire.

2) My understanding of

$( document ).ready()

is that code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.

3) The code

        request.always(function() { 
            alert('Successfully populated search sub-cat'); //for testing only
        });

does not execute.

After some additional research, I came across another thread indicating that the <select> tag could not receive a .load event request. However, I have not been able to confirm this information in the JQuery documentation. With some additional testing I added the following separate code block,

$(document).ready(function(){";
	$(window).load(function(){";
		var category_code = $('#dd_category_search').val(); //dropdown selected item
		var request = $.ajax({";
			type:'get', ";
			url:'pop_dd.php', ";
			data:'category_code='+category_code";
		});";
		request.done(function(data) {";
			$('#dd_sub_category_search').html(data);";
		});";
		request.fail(function() { ";
			alert('ERROR: Unable to populate search sub-cat load'); ";
		});";
		request.always(function() { ";
			alert('Successfully populated search sub-cat load'); //for testing only
		});";				
	}); //end load
}); //end ready

which seems to correct the issue and populate the dropdown '#dd_sub_category_search' with the proper data when the form is submitted and a full page reload is done. I am no expert in JQuery or AJAX but can only conclude that there may bee some truth to the claim that <select> tag can not receive a .load event request.

Any feedback welcome.

johanafm

cannondale;11037459 wrote:
AJAX but can only conclude that there may bee some truth to the claim that <select> tag can not receive a .load event request.

I missed this in my initial reply, but as you point out, there can be no load event for the select element. However the reason for that is html, not jquery. Apart from the body element, only elements that actually load their content in separate requests can have load event handlers, such as images, script elements etc. This renders my initial argument about in which order things happen irrelevant

cannondale;11037459 wrote:
1) If the element id "dd_category_search" did not exist, I believe I would see a console error when the load tried to fire.

I'd expect nothing to happen rather than getting an error. But try it out to be certain.

My reasoning is that if you use jQuery('#id') before the DOM is ready, or if you have no such id in the document, the jQuery constructor would return an object which contains a list of nodes of length 0 - because no nodes where found. Then you would attach event handlers to all those (zero) objects. This is perfectly legal, albeit pointless.

cannondale;11037459 wrote:
2) My understanding of
$( document ).ready()
is that code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute

Sort of. Javascript code can execute as soon as it is parsed. But it cannot find DOM nodes that do not exist and it cannot manipulate the DOM tree until the DOM tree has been constructed. Document ready fires when the DOM tree has been constructed.

cannondale;11037459 wrote:

3) The code

        request.always(function() { 
            alert('Successfully populated search sub-cat'); //for testing only
        });

does not execute.

Yes it does - or yes it would. But only when it should, and this "always" is in relation to when the ajax requests are made. And only if you do not have syntax errors (such as superfluous quotes somewhere). It will execute on every ajax request. In case we are talking about the ajax request for the load event handler which never gets executed, always will still fire every time that gets executed. It just happens to be 0 times.

With some additional testing I added the following separate code block,

$(document).ready(function(){;
	$(window).load(function(){;

The double use of these is pointless. The first line attaches an event handler for when the document DOM is ready. When it is and the code is executed, it will attach an event handler for when the entire document has finished loading.

If you want your code to execute when the document has finished loading, attach no ready handler, only the load handler. But in this case, I'd say remove the load handler instead.

The rest of the code does the exact same thing you want to do when the element changes value. That is, when the change event fires. And that is why I suggested that you trigger the change event. Never write the same code in multiple places. Thus

$(document).ready(function(){
    // attach change event handler to element
    $('#id').on('change', function() { alert('stuff'); });
    // trigger the change event for this element
    $('#id').trigger('change');

// but since it's bad form (inefficient) to repeatedly call the jquery constructor for the same element, either
$('#id').on('change', function() { alert('stuff'); }).trigger('change');

// Or the possibly more readable
$el = $('#id');
$el.on('change', function() { alert('stuff'); });
$el.trigger('change');

Bonesnap

If you want to bind events to elements that do not exist yet use .on() since .bind() (and others) is deprecated.

cannondale

johanafm,

Thanks again for your detailed reply and your willingness to share your knowledge. As you suggested, I implemented both .on and .trigger events, which worked well and additionally avoided duplicate code. Thanks for your help.