We Keep Coding

Content loaded via Ajax breaks buttons [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
I have an html page which gets loaded via ajax, the newly loaded html content has the following html. It typically works great when I load the html first and then initialize the javascript.
Change password
My js:
$('.ajax-button').on('click', OnLoadContent);
function OnLoadContent(e) {
e.preventDefault();
var pageurl = $(this).data('url');
$.ajax({
type: "GET",
url: pageurl,
success: function(data) {
alert(data);
$("#content-container").html(data);
window.history.pushState({path:pageurl}, '', pageurl);
},
error: function(response) {
alert("ERROR:" + response.responseText);
}
});
}
However since it's new html content that's being loaded I think the problem is the javascript already exists when the html content is loaded via ajax, so the click functionality doesn't work unless I click again. I'm wondering how I can fix this?

Delegate the click higher up the dom...
$('body').on('click', '.ajax-button', OnLoadContent);

Add class to dynamically added element [duplicate]

This question already has answers here:
jquery .load( ) and trigger function AFTER new content loads? just like JavaScript onload event
(3 answers)
Closed 8 years ago.
I have a shared left menu in a separate file from my pages so that I can update it in one place.
I am loading it onto the page in a .js file like so:
$(function () {
$("#left-nav").load("templates/left-nav.html", function() {
...
});
...
}
I would like to be able to set the nav-list item for the page to be selected. Something like this:
$("#calendar").addClass("selected");
...where #calendar is the ID of a list item in my left-nav.html template file.
Everything I've read says that I have to call addClass as a callback after I load in the file, but the following doesn't seem to work:
$(function () {
$("#left-nav").load("templates/left-nav.html", function() {
$("#calendar").addClass("selected");
});
...
}
Question: Is it possible to add classes to dynamically added content on a page, and if so, how should I do it? Thanks!

The code is correct as written, adduming that left-nav.html does contain an element with the ID of calendar.
The completed event is fired after the HTML is added to the DOM according to the jQuery documentation.

Jquery can't see anchor tags [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 9 years ago.
My JQUERY can't see echo PHP.
Here is the php statement that I echo in an external PHP file -
`echo ("<a href='#' id='bb'>hello</a>");
Here is the JQUERY also in an external js file -
$('a').click(function() {
var linkId;
linkId = $(this).attr('id');
alert(linkId);`
And finally I have an HTML file with a <div> that my php is being sent to via ajax.
Now my php echo statement above shows in the HTML file, but when I click it the JQUERY doesn't see it. I tested it by adding an anchor tag in the html file and it works fine. Any help would be appreciated. Thanksenter code here

Try
$('#parentID').on('click','a' , function(){
var linkId;
linkId = $(this).attr('id');
alert(linkId);`
});

Your javascript is not complete. You are not closing the function call. A jQuery click function call needs to be like `$('#element').click(function() { ... });
Also, you are not preventing the default link behavior from happening, so your page will refresh. I don't think you want the page to refresh, right? You need to capture the click event and stop it using preventDefault();
So the script should be:
$('a').click(function(e) {
var linkId;
linkId = $(this).attr('id');
alert(linkId);
e.preventDefault();
});

how to make jquery work with ajax? [duplicate]

This question already has answers here:
jQuery ajax load() java script not executing?
(8 answers)
Closed 8 years ago.
Have the below code which loads a php page into a div, once this content is added the jquery on that php page doesnt seem to work. It only works if you open it directly (without ajax)
any ideas?
AJAX CODE
<script>
$(document).ready (function() {
$('#NavButton1').click(function(event) {
$('#content').empty();
$('#content').load('placeholder.php');
})
})
</script>
Jquery code on PHP page
<script>
$(document).ready(function() {
// call the tablesorter plugin
$('#myTable').tablesorter({
// sort on the first column and third column, order asc
sortList: [[0,0],[2,0]]
});
});
</script>

document.ready is not triggered when you load your PHP.
But the right way to have a script run after you load external content would be to use a callback function:
$('#content').load('placeholder.php', function() {
// call the tablesorter plugin
$('#myTable').tablesorter({
// sort on the first column and third column, order asc
sortList: [[0,0],[2,0]]
});
});

Importing mulitple HTML content into a page using a single function

I am trying to import HTML content, not the entire page to a new page.
The problem is I have to create document load function for each item I need to load. Is there a way to do this in a single function? Meaning different content gets imported every time I click a link? So if I want to import another DIV content, I have to create an entire duplicate.
Code:
$(document).ready(function() {
$('.using-this-button').click(function() {
$('.importHere').load('from-here.php #just-this-part');
return false;
});
});

You could try setting it up dynamically. I assume you will be using different links to setup differnet pieces of content.
JS
$(document).ready(function() {
$('a.dynamic_load').click(function() {
var $el = $(this);
$($el.data('dest')).load($el.data('src'), $el.data('target'));
});
});
HTML
click here