We Keep Coding

Working JQuery Script not working after ajax post response

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>
Find Out More
</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>
Find Out More
</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!

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

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

Trying to open Div after passing selected value to url. (closing after reload)

Hi I am trying to open a div within my Jsp page, so what i am doing is passing an Id to the url, the url does some background work in my controller and retrieves the data as expected, this is all working fine. What I want to do is only show the div once the data is loaded. When I load the page no option is selected so no data is retrieved, when the user picks a option I want to load the url and open the div and keep open, I have tried loads and noting seems to be working as i like. here is where I am at know.
$("#vehicleSelected").on('change',function() {
var x = document.getElementById("vehicleInfo");
if (x.style.display === 'none'){
x.style.display ='block';
console.log("made it" + x);
}else{
x.style.display='none';
console.log("made it not" + x);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
Welcome: <strong><c:out value="${username}"></c:out></strong> <select
data-toggle="dropdown" id="vehicleSelected"
onchange=" window.location.href='${pageContext.request.contextPath }/driver/'+this.value ">
<option>Select Vehicle</option>
<c:forEach var="vehicles" items="${vehicles }">
<option value="${vehicles.id }">
<c:out value="${vehicles.vehicle_name }"></c:out></option>
</c:forEach>
</select>
<div class="panel panel-info ">
<div class="panel-heading text-center">
<h4>Driver Vehicle Inspection Form</h4>
<div id="vehicleInfo" style="display:none;">
<span>Vehicle:<strong><c:out
value="${vehicleById.make }"></c:out>, <c:out
value="${vehicleById.model }"></c:out></strong>
</span><br> <span>VIN:<strong><c:out
value="${vehicleById.chassis_number }"></c:out></strong></span><br> <span>
Registration:<strong><c:out value="${vehicleById.plate }"></c:out></strong>
</span>
</div>
</div>
</div>
</div>
I have also tried putting this all into a method and using return false; still did not work, any ideas what i could do next

So after searching high and low for a solution, I had to take a slightly different route and check the URL for the id and if present show the div, this is not what I wanted but works, and I am posting this for anyone that might stumble on the question and find this method helpful. below is the solution that works for know.
$(document).ready(function() {
var url = window.location.href;
var urlEnd = url.substr(url.lastIndexOf('/') + 1);
if (urlEnd !== "") {
$("#vehicleInfo").show();
}
});

Laravel ajax model to show posts

I have a foreach() from database table, I want to show a popup/model to show its extra information.
I am showing just title and description and on click i want to open up a popup and show its extra information.
#foreach($myProjects as $project)
<div class="col-sm-4 col-md-4 notes notes--blue">
<a href="#edit-note" data-toggle="modal" style="background-color: #f9f9f9;border-bottom: 5px solid #42A5F5">
<div class="notes__title">{{$project->title}}</div>
<div class="notes__body">{{$project->description}}</div>
</a>
<div class="notes__actions" data-demo-action="delete-listing">
<i class="zmdi zmdi-delete"></i>
</div>
<div class="notes__actions1" data-demo-action="delete-listing">
<i class="zmdi zmdi-edit"></i>
</div>
<div class="notes__actions2" data-demo-action="delete-listing">
<i class="zmdi zmdi-eye"></i>
</div>
</div>
#endforeach
I am completely blank, Should i fetch post id to a hidden html tag and on model button click an ajax call will fetch the record info based on the id ?

I would add a data-id attribute to one of the elements, possibly the wrapper, then add something like
$(document.body).on('click', '.clickable_element', function(e){
if ($(this).data('id')) {
$.ajax({
url : 'your detail url',
data: { id: parseInt( $(this).data('id'), 10 ),
success : function(response){
// open popup and add response into it.
}
})
}
});
Update
I just noticed you already have bootstrap modal there.
you can add your data-id to data-toggle element then in javascript
$('[data-toggle=modal]').on('shown.bs.modal' , function(){
// do your ajax stuff
// add response in `.modal-body`
})

dynamically changing href address based on the response from the server

i am currently trying to create pagination feature. I am using bootstrap for css and jQuery.
There are total of 8 divs that contains a tags.
in my html file, i wrote
<div id="articleArea" class="row">
<div class="col-md-4 postTitle">
post title
</div>
<div class="col-md-4 postTitle">
post title
</div>
<div class="col-md-4 postTitle">
post title
</div>
<div class="col-md-4 postTitle">
post title
</div>
<div class="col-md-4 postTitle">
post title
</div>
<div class="col-md-4 postTitle">
post title
</div>
<div class="col-md-4 postTitle">
post title
</div>
<div class="col-md-4 postTitle">
post title
</div>
</div>
what I want to do is replacing each href in a tags, based on the response from my ajax call. I will just post success part of .ajax since other parts are completely functional and irrelevant to my question. my ajax call is returned in json format and var result is an array that contains 8 different hrefs that need to be assigned to each a tags in postTitle divs.
success: function(data){
var result = data["result"];
for(i=0; i < result.length; i++{
postTitle = result[i];
$(".postTitle.a").html(postTitle);
}
},
If i execute this code, a href are shown briefly but it disappears within a second. How can I fix this? and if there is better way to implement this feature, please do comment! Would love to be hear any feedbacks.

You need to run iteration over a tags instead of running iteration over results
$(".postTitle a").each(function(i) {
postTitle = result[i];
$(this).attr("href",postTitle);
});
This would run over each href tag and replace the values accordingly
EDIT: it should be .postTitle a

Your selector would select all of the elements
$(".postTitle.a")
You should select each tag and set its href, in addition it is missing a space:
$(".postTitle a").each(function(index, value){
$(value).attr('href', result[index]);
});

$(document).ready(function() {
$('#pdf').change(function() {
var newurl = $('#pdf').val();
$('a.target').attr('href', newurl);
});
});

Unable to trigger popup box on click event

I'm wrapping up results of ajax request on div and appending to main div in a page. SO if the array of results returned empty, I would like to alert user, saying that no result found and also provide a link for them to click on. When they click a pop up box carrying products by category would popup. Important thing to notice here is,the products are derived via php and ajax scripts.
So When I use onclick event or directly, nothing happens!!!. But if I call empty or HTML pop up it would work. Also the same php scripts contained pop up would work if I trigger it on page load or in the ajax success function. SO I dont understand why only with on click it doesn't work?
This is the pop up I want to trigger on 'click' event
<section id="browse-search-popup" class="mfp-hide white-popup">
<h1>Browse Courses</h1>
Can't find what you're looking for? Tell us here!
<h2>First, pick a learning Zone:</h2>
<div class="row">
<div class="small-12 medium-8 large-8 medium-centered large-centered columns">
<ul class="small-block-grid-2 medium-block-grid-2 large-block-grid-2">
<?php
$tutor = new register();
$data = $tutor->get_maincat();
$i=0;
foreach($data as $k=>$v)
{
$i++;
?>
<li><div class="mainCat_<?php echo $i;?>" id="<?php echo $v['main_cat_id'];?>"><?php echo $v['main_cat_name'];?></div></li>
<?php
}
?>
</ul>
</div>
</div>
<h2>Then, pick a field:</h2>
<div class="row">
<div class="small-12 medium-12 large-12 columns" id="cat">
</div>
</div>
<h2>Finally, choose your Course:</h2>
<div class="row">
<div class="small-12 medium-12 large-12 columns" class="choosen_subjects">
</div>
</div>
<div class="row">
<div class="small-12 medium-12 large-12 columns" id="sub">
</div>
</div>
<input type="submit" id="done" value="Done">
</section>
Ajax request
$("#search_tutor").submit(function() {
var data = {
"action": "test"
};
var subject = $("#subject").val();
data = $(this).serialize() + "&" + $.param(data);
$.ajax({
type: "POST",
dataType: "json",
url: "/fetch_tutor.php", //Relative or absolute path to response.php file
data: data,
success: function(data) {
$("#contents img.loading").remove();
var sizy = data.length;
if(sizy ==0) {
console.log("sorry, cannot locate");
$(".simply-popup-link").trigger("click");
$("#simply-popup").empty();
//This is where I want to trigger the on click
$("#simply-popup").append("Unable to locate the subject you entered, please <a href='#' onclick='browse("+sizy+")' class='yellow'>Browse</a>");
}
console.log("size= "+data.length);
var j=0;
for (i = 0; i < data.length; i++) {
........................
......................
The browse function:
function browse(param) {
//this would work
/* $(".simply-popup-link").trigger("click");
$("#simply-popup").empty();
$("#simply-popup").append("test only"); */
// but not this
$(".browse-search-popup-link").trigger("click");
}
I tried loading the page into the an empty popup box ($("#simply-popup")) like this but doesn't work either:
$("#simply-popup").load('search/browse.php');

Change
$("#simply-popup").append("Unable to locate the subject you entered, please <a href='#' onclick='browse("+sizy+")' class='yellow'>Browse</a>");
to
$("#simply-popup").append("Unable to locate the subject you entered, please <a href='#' class='yellow browse'>Browse</a>");
write a separate code for this
$('body').on('click', '.browse', function() {
$('.browse-search-popup-link').click();
});

Can't you just call that function after append:
$("#simply-popup").append("Unable to locate the subject.....");
browse(sizy);// call it here.
or when you append it in the element then you can call the click:
$("#simply-popup").append("Unable to locate the subject.....");
$("#simply-popup a").click();
$(document.body).append('browse value is 1');
$(document.body).find('a').click();
function browse(num){ $(document.body).find('p').html("<pre>"+num+"</pre>");}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
log out here:
<p></p>