Elements created via ajax. [Solved]
Posted: Wed Oct 17, 2012 2:45 am
I create a select element using ajax - this second element is based on the results from the first select element. The new element i create however doesn't trigger a second ajax request. Below an example:
Select element 1 -> select option - generated using php. click on option and element 2 is generated.
Select element 2 -> generated using ajax. click on option and element 3 should be generated but isn't.
Select element 3 -> Not generated.
My question - An element created via ajax, can it be used to generate another element via ajax? I've checked the console, firebug and the error console but there is no reported problems with the javascript i use.
Below is the jQuery i use
The commented section is the script to generate the dropdown menu (via production_ajax1.php) but even the alert() doesn't happen when i select an option from select element number 2.
Any advice will be appreciated
Edit
Found a solution; apparently because the elements are not created when the ajax is called the element is not bound (or something to that effect). Here is a better explanation http://docs.jquery.com/Frequently_Asked ... do_..._.3F
The solution code is rather simple, unbind the click and add the code into the innitial ajax code.
Select element 1 -> select option - generated using php. click on option and element 2 is generated.
Select element 2 -> generated using ajax. click on option and element 3 should be generated but isn't.
Select element 3 -> Not generated.
My question - An element created via ajax, can it be used to generate another element via ajax? I've checked the console, firebug and the error console but there is no reported problems with the javascript i use.
Below is the jQuery i use
Code: Select all
jQuery(document).ready(function(){
jQuery('select#producerGroups option').click(function(){
alert('ha');
/*
jQuery('div#innerBox').fadeOut();
var pgTerm = jQuery('select#producerGroups option:selected').val();
jQuery.post('production_ajax1.php', {'pgTerm': jQuery('select#producerGroups option:selected').val()},
function(data) {
if (pgTerm != '') {
jQuery('div#innerBox').html(data).fadeIn('slow');
}
});
*/
});
});
Any advice will be appreciated
Edit
Found a solution; apparently because the elements are not created when the ajax is called the element is not bound (or something to that effect). Here is a better explanation http://docs.jquery.com/Frequently_Asked ... do_..._.3F
The solution code is rather simple, unbind the click and add the code into the innitial ajax code.
Code: Select all
jQuery(document).ready(function(){
jQuery('select#projects option').click(function(){
jQuery('div#box').fadeOut();
var term = jQuery('select#projects option:selected').val();
jQuery.post('production_ajax.php', {'term': jQuery('select#projects option:selected').val()},
function(data) {
if (term != '') {
jQuery('div#box').html(data).fadeIn('slow');
jQuery('select#projects option').unbind('click'); // <-- important.
//
jQuery('select#producerGroups option').click(function(){
//
jQuery('div#innerBox').fadeOut();
var pgTerm = jQuery('select#producerGroups option:selected').val();
jQuery.post('production_ajax1.php', {'pgTerm': jQuery('select#producerGroups option:selected').val()},
function(data) {
if (pgTerm != '') {
jQuery('div#innerBox').html(data).fadeIn('slow');
}
});
});
}
});
});
});