1

I have some checkboxes in my web page ,on which i m implementing ajax call,with which i m updating the content in a div and i m refreshing the count of listed items in checkboxes like an ecommerce site filters on sides.But after first checking checkbox first time.ajax call works.But when i check my checkbox again for next time.ajax request is not performed.

Please check the following code

<input type="checkbox" name="item1" id="item1" value="item1">item1[5]<br /> <input type="checkbox" name="item1" id="item2" value="item2">item1[3]<br /> <input type="checkbox" name="item1" id="item3" value="item3">item1[6]<br /> <input type="checkbox" name="item1" id="item4" value="item4">item1[3]<br />

ajax call

$(document).ready(function(){ checkboxValidate = function (e) { if(e)e.preventDefault(); $.ajax({ type: 'get', async:false, cache:false, url: 'getmoredata.php', data: {data1:data1}, success: function(data){ $(data).appendTo('.container'); console.log(data); }, error: function(data){ alert("ajax error occured…"+data); }, timeout:5000 }).done(function(){ //alert(timeout); $("#loading").fadeOut("slow"); $(window).bind("scroll",function(){ scrollMore(); }); }); } } <div id="container"> <div id="div1"> </div> </div> $( "[type=checkbox]" ).change(checkboxValidate);

After ajax call the content which i m refreshing

i m executing sql query in getmoredata.php,with which i m getting refreshed checkbox values and their count.

$sql=select DISTINCT colname from tablename where colname='value coming from ajax call' group by colname $sql=select count(colname) from tablename where colname='value from ajax call' group by colname.

Then i put the values from first query in an array.second query giving us count so that count i m displaying with each checkbox which is dynamic

then with foreach loop i m refreshing the checkbox contents listed aboved

<?php foreach($arrayquery as $array) { ?> <input type="checkbox" value="<?php echo $array['colname'] ?>"><?php echo $array['colname'] } ?>

I m afraid i m not adding the checked in above checkbox line,is it becuase of that my checkbox are not remaining checked... Please have a look once... So after ajax call,whatever data i m getting i m appending in container div,and my checkbox contents are also getting refreshed after ajax call.for example,Initial count of 5 and 3 in first two checkbox items can change to something like 10 or 12 or something else,depending on the data what we got after ajax call.

Now the problem is when i made my first ajax call,and refreshed the divs,after that when i check any checkbox,ajax call is not made,infact nothing happens on page.it remains static as it is. Please check the point and help me on this.clarify if any doubt Thanks in advance

Improve this question
9
  • I think you need to use Event Delegation Commented Jul 28, 2014 at 12:17
  • $('#yourdiv').live - api.jquery.com/live Commented Jul 28, 2014 at 12:19
  • 1
    ^ but not that, as it's deprecated and removed ? Commented Jul 28, 2014 at 12:19
  • @alexeypalamar that has been deprecated as of 1.7 and removed as of 1.9 Commented Jul 28, 2014 at 12:19
  • Please show how you are calling this ajax function. Probably you need to use jquerys .on() function to bind to dynamic dom elements. EDIT .on() has superseded .live() as suggested by @alexeypalamar Commented Jul 28, 2014 at 12:20

2 Answers 2

Reset to default
3

Apply your change listener to the document using the .on() Method

$(document).on('change', 'input[type="checkbox"]', checkboxValidate);

http://api.jquery.com/on/

Hope this helps!

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Hi bro.I used the code given by you sir.it worked fine.But what happened is when i check one checkbox,it calls ajax function.after that refreshes and again checkbox count is getting refreshed.if i check any other checkbox from newly checked checkbox it refreshes,what i want thats correct.but the first checkbox which i checked that is remaining unchecked.like firstly i checked first check box.ajax call refreshes the page properly,but the checkbox is not shown as checked.its shown as unchecked but functionality is completed.what to do for that sir
Can we see the contents of the php file?
ya sure sir. i will post a specimen of that in some time.
hi sir.i met with an accident,so could not post the script.i m posting now,please check sir.once
2

Your current event listener $( "[type=checkbox]" ).change is only bound to the checkboxes present in the dom on pageload. Instead use .on() function to bind to dynamic dom elements

$(document).on("change", ":checkbox", function(){ //your ajax }
Improve this answer

1 Comment

I tried the snippet told by you sir.it worked fine.But what happened is when i check one checkbox,it calls ajax function.after that refreshes and again checkbox count is getting refreshed.if i check any other checkbox from newly checked checkbox it refreshes,what i want thats correct.but the first checkbox which i checked that is remaining unchecked.like firstly i checked first check box.ajax call refreshes the page properly,but the checkbox is not shown as checked.its shown as unchecked but functionality is completed.what to do for that sir

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.