Categories: javascript, php, jquery, html, ajax

Working JQuery Script not working after ajax post response

2 answers

I'd really appreciate any help!

I have a working jquery script. When a div is clicked, it updates the css class to active and executes a working ajax response.

I also have a filter functionality that works too. When a checkbox is ticked it calls a new list of div's from mysql with all the same class properties. However, when any of these new div's are clicked the ajax response doesn't work. If anyone could help I would be incredibly grateful!

HTML:

        <div id="result" class="results">         <div class="w-embed"><img src="images/loader.gif" id="loader" width="" "200px"="" style="display:none;">           <?php     $sql="SELECT * FROM `posts`";     $result=$con->query($sql);     while($row=$result->fetch_assoc()){       ?>             <div class="c-card" data-id="<?=$row['id'];?>">               <h1 class="s-h2">                 <?=$row['title'];?>               </h1>               <!-- <div class="s-para m-light m-small"><?=$row['description'];?></div> -->               <div class="c-stats">                 <div class="s-stat">Pay:                   <?=$row['pay'];?>                 </div>                 <div class="s-stat">Deadline:                   <?=$row['deadline'];?>                 </div>                 <div class="s-stat">Location:                   <?=$row['location'];?>                 </div>                 <div class="s-stat">Cat:                   <?=$row['category'];?>                 </div>               </div>               <p class="s-para">                 <?=$row['description'];?>               </p>               <a href="<?=$row['lnk'];?>" class="l-para">Find Out More</a>             </div>             <?php }?>         </div>       </div> 

Javascript:

 <script> $('.c-card').on('click', function(event){  event.preventDefault();     $('.c-card').removeClass('active'); //Removes class to all    $(this).toggleClass('active'); //Applies class      var action = 'data';     var dataId = $(this).data("id");      $.ajax({         type:"POST",         url:"ajax/selected.php",         data:{action:action,id:dataId},         success: function(response){           $("#jobber").html(response);           $("#changeme").text("altered");           }         });       }); </script> 

This is the outputted response from the filters:

'<div class="c-card" data-id="'.$row['id'].'">                   <h1 class="s-h2">'.$row['title'].'</h1>                   <div class="c-stats">                   <div class="s-stat">Pay:'.$row['pay'].'</div>                     <div class="s-stat">Deadline:'.$row['deadline'].'</div>                     <div class="s-stat">Location: '.$row['location'].';</div>                     <div class="s-stat">Cat: '.$row['category'].'</div>                   </div>                   <p class="s-para">'.$row['description'].'</p>                   <a href="'.$row['lnk'].'" class="l-para">Find Out More</a>                 </div>'; 

So my question is how do i make the new divs (called from the filter) to continue to be triggered and change class + execute the ajax query.

Thanks so much in advance!

All answers to this question, which has the identifier 61171116

The best answer:

maybe because there is no html(div|| p || span ||...) element that have id of id="jobber"

I have been thought your actual problem was the ajax response is getting null.

 <div class="c-card" data-id="<?=$row['id'];?>"> 

You are using the data-id attribute in the HTML section. But the script handles the id attribute using for getting the id. So the id is getting null for ajax call, Please use the below code or change the data-id attribute to id in the HTML section as you like.

var action = 'data'; var dataId = $(this).data("data-id"); 

"id" and "data-id" are different attributes for HTML. Please use same attributes in HTML and script

Last questions

how do i remove the switch on my home screen?
how to edit the JS date and time to update atuomatically?
How to utilize data stored in a multidimensional array
Powermockito not mocking URL constructor in URI.toURL() method
Android Bluetooth LE Scanner only scans when phone's Location is turned on in some devices
docker wordpress container can't connect to mysql container
How can I declare a number in java that is more than 64-bits? [duplicate]
Optaplanner solutionClass entityCollectionProperty should never return null error when simple JSON object passed to controller
Anylogic, get the time a pedestrain is in a queue
How do I fix this syntax issue with my .flex file?
Optimizing query in PHP
How to find the highest number of a column and print two columns of that row in R?
Ideas on “Error: Type com.google.firebase.iid.zzav is referenced as an interface from com.google.firebase.messaging.zzd”?
JCIFS SmbFile.exists() and SmbFile.isDirectory() return false when it exists and I can listFiles()
PHP total order
Laravel booking system design
neural net - undefined column selected
How to indicate y axis does not start from 0 in ggplot?
Fragments in backStack
Spinner how to change the data