So I have a page that loads the data into the page through the following ajax function.
$(document).ready(function(){
function loadData(page){
$.ajax
({
type: "POST",
url: "inc/load_data.php",
data: "p="+page+"XXXXXXXXXXX",
success: function(msg)
{
//alert(msg);
$("#container").ajaxComplete(function(event, request, settings)
{
$("#container").html(msg);
//**MODIFIED CODE
$(document).delegate('a.vote_up','click', f_vote_up);
});
}
});
}
});
//Loaded Message
$msg.='<span class="vote_buttons" id="vote_buttons'.$row['id'].'">
</span>';
The message that is loaded has some links that need to work with a another Ajax function(given below), which is apparently not working. The second function(below) is loaded before the data is loaded into the page. I suspect, may be since this function is loaded way before the data is loaded, the second function is not recognizing the click on vote_up. Is there any way to fix it??? I'm not too familiar with AJAX, I would really appreciate some help.. Thank you
$(function(){
$("a.vote_up").click(function(){
//get the id
alert("Hi");
//REST OF THE CODE
}
//***NEW FUNCTION
function f_vote_up(){
//get the id
the_id = $(this).attr('id');
//REST OF THE CODE
$("span#vote_buttons"+the_id).html("Hello, Testing Response!");
alert("End of Func!"); // <
}
When you call that second function, it's only grabbing all the a.vote_up elements that currently exist on the page. When you add more links to the page later on, they don't know to listen for the click.
You can do one of two things to fix this:
Add the click listener to each new link when you add it to the DOM. But this is a bit of work, because you'd have to change how your AJAX function builds the links, and you'd have to turn that click-listener-assigning function into something standalone that you could use at any time.
Instead of doing using the click method, use the delegate method instead:
$(document).delegate('a.vote_up', 'click', function () { ... });
More info on event delegation with jQuery.
you should bind your click event after you load the html
$.ajax
({
type: "POST",
url: "inc/load_data.php",
data: "p="+page+"XXXXXXXXXXX",
success: function(msg)
{
//alert(msg);
$("#container").ajaxComplete(function(event, request, settings)
{
$("#container").html(msg);
$("a.vote_up").click(function(){
//get the id
alert("Hi");
//REST OF THE CODE
});
});
}
});
You can use the live function to bind an event to dynamically created elements, i.e.:
$("a.vote_up").live('click', function(){
//get the id
alert("Hi");
});
http://api.jquery.com/live/
This will effectively bind this click event to all elements which match the a.vote_up selector, now and in the future.
Related
I have a page where I return users posts, these posts can be commented on the fly using some jquery code, after a new comment is posted I insert the new comment under the post along with a Delete button. The problem is the Delete button doesn't work on the newly inserted element unless I reload the page. I read that the solution is using the .on() method however I am a little confused re how to implement this.
I have one function that updates the post part with the newly inserted comment and this is the function that deletes the comment:
$(document).ready(function () {
$("button[id*='deletecmnt_']").click(function () {
var id = this.id.replace('deletecmnt_', '');
var comment_card_id = ('#comment_' + id);
var token = $(this).data('token');
$.ajax({
url: '../comment/' + id,
type: 'post',
data: {_method: 'delete', _token: token},
success: function () {
// Checks for display of comment card and removes it
if ($(comment_card_id).is(":visible")) {
$(comment_card_id).fadeOut("fast");
}
}
})
})
});
I don't understand what needs to be changed here and how.
You need to use event delegation for elements added dynamically. In your .on() method, you need to add the selector that you want the handler attached to after it's created.
$(document).ready(function(){
$("body").on("click", "button[id*='deletecmnt_']", function () {
// codes
}
});
This will listen for clicks on elements not yet created that match your selector. Here's the JQuery API doc page for more info: http://api.jquery.com/on/
I am wondering if there is a way to get element id without clicking. I have data inside the divs that needs updating and printing. I can do exactly what I want by clicking the div. The data gets updated, printed, and disappears until the next div shows up. This is jQuery I am using.
$(document).ready(function(){
$('.store').click(function(){
the_id =$(this).attr('id');
$(this).fadeOut('slow');
$.ajax({
type: 'POST',
url: "update.php",
data:{id:the_id},
success:function(){
print_div();
}
});
});
});
So is there a way to tweak that .click function so that the data automatically gets updated, printed, and disappear without the actual clicking?
You can loop through the divs on document ready. I don't know if this is exactly what you are asking, but this way, you will know the ID of the elements without user interaction.
$(document).ready(function() {
$('.store').each(function() {
var the_id = $(this).attr('id');
$(this).fadeOut('slow');
$.ajax({
type: 'POST',
url: "update.php",
data: {
id: the_id
},
success: function() {
print_div();
}
});
});
});
In short, no.
JavaScript relies on events - whether timed or created by an interaction (forced or organic) to add methods to the call stack. If you'd like, you can trigger an event (a forced event) using jQuery's trigger method on an event. On the other hand, you can set up a timer using setInterval (a regular action) or setTimeout (a delayed action) to trigger the event. Other than that, you have to rely on the user interaction to trigger events.
You could get clever on what triggers the callback function to the click method - you can look at the user's mouse or scrolling behavior and reload the element or even on some sort of keyboard event. It's really a matter of what will provide the best user experience in your context.
Here is some boilerplate to help:
$(document).ready(function(){
$('.store').click(storeHandler);
$('#someOtherElement').on('event', storeHandler);
setTimeout(storeHandler, 1000);
});
function storeHandler(event) {
var theElement = $(event.target); // the event object is very useful
var theId = theElement.attr('id');
theElement.fadeOut('slow');
$.ajax({
type: 'POST',
url: "update.php",
data:{id:the_id},
success:function(){
print_div();
}
});
}
The goal is to let you replicate the behavior given some event.
In my page, I want people add follow or unfollow the author, so I add two kinds class addgz and removegz to the button for ajax different action.
here is the code
<li><span>unfollow</span></li>
and this is for follow
<li><span><i class="icon_add "></i>follow</span></li>
here is the jquery code
$(".addgz").on("click",function(){
var elm=$(this);
$.ajax({
url:"/addgz/{{post.author.id}}/",
type:"post",
dataType:"json",
success:function(msg){
elm.parent().html('<span>unfollow</span>');
}
})
} );
$(".removegz").on("click",function(){
var elm=$(this);
$.ajax({
url:"/removegz/{{post.author.id}}/",
type:"post",
dataType:"json",
success:function(msg){
elm.parent().html('<span><i class="icon_add "></i>follow</span>');
}
})
});
now the problem is ,it only work one time ,it means, I click the button, it change the class,change follow to unfollow. but then I click the button again ,it not change back, and the ajax back data show, it do the same action as the previous class,
for example, if the button is follow, people click it, then button change to unfollow, and yes this people follow the author now, however, if he click the button again, nothing changes, the button do not change back to follow, and he is still following this author.
looks like the button click only work one time ,can you tell me why?
Since your second element is created dynamically,you should use event delegation for binding the event
$(document).on("click", ".removegz", function () {
var elm = $(this);
$.ajax({
url: "/removegz/{{post.author.id}}/",
type: "post",
dataType: "json",
success: function (msg) {
elm.parent().html('<span><i class="icon_add "></i>follow</span>');
}
})
});
$(document).on("click", ".addgz", function () {
var elm = $(this);
$.ajax({
url: "/addgz/{{post.author.id}}/",
type: "post",
dataType: "json",
success: function (msg) {
elm.parent().html('<span>unfollow</span>');
}
})
});
Event delegation allows you to attach a single event listener, to a parent element, that will fire for all children matching a selector, whether those children exist now or are added in the future.
It is better to delegate to document when you create new element after DOM has been loaded, especially in a ajax situation
$(document).on("click",".addgz", function(){
//your code goes here
});
$(document).on("click",".removegz", function(){
//your code goes here
});
I've been having some trouble with this block of code, and I think I've finally narrowed the problem down. Here's the jQuery function...
$(document).ready(function(e) {
$('#formattingSection').load ('formattingdoc.html #formatting');
$('#loadFormatting').click(function() {
$('#formattingSection').load ('formattingdoc.html #formatting');
});
$('#loadSmileys').click(function() {
$('#formattingSection').load ('formattingdoc.html #smileys');
});
$('#formattingSection div img').click(function() {
var code = $(this).attr("title");
alert (code);
$('wallpost').val($('wallpost').val() + code);
});
});
Basically, it works like this. The page loads, we load part of a doc via AJAX. There are four buttons on the page, each one loads a new section via AJAX. When you click #loadSmileys, it will load via AJAX several images and display them in the DIV.
I'm binding a click() event to those images... but what I've found is that since the images aren't on the page at load time, the click event never gets bound. When I strip all the code away and load the images without AJAX, the click binds okay.
So... my question here... is there a way to bind the click event to the images AFTER they are loaded via AJAX?
For reference... I did make a jsBin HERE, but it's basically just hard coding the images to that I can see it works without the AJAX stuff going on.
Try:
$("#formattingSection").on("click","div img",function() {
var code = $(this).attr("title");
alert (code);
$('wallpost').val($('wallpost').val() + code);
});
As $.on attaches event handler to the parent and all events from children are delegated to the parent
Documentation
Yes, you totally can attach event handles to DOM nodes loaded on-the-fly. The trick is to use jQuery.get instead of .load. .get allows you to add an additional callback function that gets executed upon AJAX completion - the perfect place for you to add your $("#formattingSection div img") code. Here's what it would look like:
$('#loadSmileys').click(function() {
$('#formattingSection').get ({
url: "formattingdoc.html",
success: success
});
});
function success() {
$('#formattingSection div img').click(function() {
var code = $(this).attr("title");
alert (code);
$('wallpost').val($('wallpost').val() + code);
});
}
$('#formattingSection').load ('formattingdoc.html #formatting', function( response, status, xhr ) {
loading_completed();
});
function loading_completed()
{
$('#formattingSection div img').click(function() {
var code = $(this).attr("title");
alert (code);
$('wallpost').val($('wallpost').val() + code);
});
}
Try this
$('#loadSmileys').click(function() {
$('#formattingSection').load ('formattingdoc.html #smileys', function() {
$('#formattingSection div img').click(function() {
var code = $(this).attr("title");
alert (code);
$('wallpost').val($('wallpost').val() + code);
});
});
});
You should use the 'on' method. This can apply click handlers to elements created after the on method is called.
e.g.
$("#formattingSection").on("click","div img",function() {
...
}
As imges are added, they will automatically get the click handler functionality.
This question I asked helps explain the difference: jquery use of bind vs on click
I am quite new to Jquery and need help trying to get a few events to run on the same page. I have two sections of events, one is a .get which passes data to a file and then displays retrieved data, this happens on page load. The second section is on click events which send and receive data when a button is clicked.
These events all work as needed, but if I have both sections on one page the on click events do not work. Below is the code I have and I hope someone knows how to get them all to work? Thanks
<script type="text/javascript">
$.get("/layout/standard/check.php", { url: "domain"}, function(data){
$("#content-area").html(data)
});
$(".discuss").click( function() {
$.post('/layout/standard/report-action.php', {form: "discuss"},function(data){
$(".message").html(data);
$(".message").show("slow");
});
});
$(".request").click( function() {
$.post('/layout/standard/report-action.php', {form: "request"},function(data){
$(".message").html(data);
$(".message").show("slow");
});
});
$(".report").click( function() {
$.post('/layout/standard/report-action.php', {form: "report"},function(data){
$(".message").html(data);
$(".message").show("slow");
});
});
</script>
I believe that I have found why it's not working, the onclick links are put on the page by the get event. It would appear that the buttons work if they're already on the page but not if they are inserted this way.
This doesn't make sense to me as the buttons are still acting as links with no problem...
Try delegation.. and putting your code inside a document.ready function
$(function() {
$.get("/layout/standard/check.php", {
url: "domain"
}, function(data) {
$("#content-area").html(data)
});
$("body").on('click','.discuss,.request,.report',function() {
$.post('/layout/standard/report-action.php', {
form: $(this).attr('class') //this is assuming you only have 1 class per element
}, function(data) {
$(".message").html(data);
$(".message").show("slow");
});
});
});
You might need to delegate the events if they are attached to content created dynamically. Try replacing:
$(".discuss").click( function() {
With:
$('body').on('click', '.discuss', function() {
And continue for all your events. You can replace the 'body' selector with another selector as long as it is always present in your document.