Can anyone point out what I'm doing wrong here? I'm trying to interact with data (appended using ajax)
The alerts fire if the element is already in DOM, but not when It's appended.
Am I using the ".on" wrong?
$(function() {
$('.card').on('click','.add-exercise', function() {
alert('clicked');
});
// Detect 'enter' key up
$('#search').on('keyup', function(e){
if(e.keyCode == 13)
{
console.log('hit enter key');
$(this).trigger("enterKey");
}
});
$('#search').on("enterKey",function(e){
$.ajax({
url: '{{ url("exercises/load") }}',
method: "POST",
data: {
_token: "{{csrf_token()}}",
search: $('#search').val(),
},
dataType: "text",
success: function(data) {
console.log(data);
$('.exercise-result').remove();
$('.card-deck').append(data);
}
});
});
});
I guess you have other .card elements in data.
You have to assign the event click again for them. The event is currently only assigned to your first .card elements. This is why it doesn't fire on your new .card elements.
I believe you need to add the event again each time the append is done. Try this and let me know if it works:
function addEvent() {
$('.card').on('click','.add-exercise', function() {
alert('clicked');
});
}
$(function() {
addEvent();
// Detect 'enter' key up
$('#search').on('keyup', function(e){
if(e.keyCode == 13)
{
console.log('hit enter key');
$(this).trigger("enterKey");
}
});
$('#search').on("enterKey",function(e){
$.ajax({
url: '{{ url("exercises/load") }}',
method: "POST",
data: {
_token: "{{csrf_token()}}",
search: $('#search').val(),
},
dataType: "text",
success: function(data) {
console.log(data);
$('.exercise-result').remove();
$('.card-deck').append(data);
addEvent();
}
});
});
});
I think the .card element is also loading dynamically, in order to make event delegation works properly you need to bind it to an element which is present at the time of page load.
So either you can attach it to the document object.
$(document).on('click','.card .add-exercise', function(){
// rest of your code
});
or better approach would be, attach to an element which is present at the time of page load(I guess .card-deck is present at the time of page load since you are appending data to that or attach to body tag).
$('.card-deck').on('click','.card .add-exercise', function(){
// rest of your code
});
Related
I have a chat application that works similar to hangouts. When you click on a user the chat div is generated. A simple feature I have is to allow them to press enter in a textarea to send the text, which works fine but if I have multiple dynamically generated jQuery functions only the LAST function will still work. I assume its stopping the previous instances from running. How do I fix this?
Again when the user starts a chat it loads the scripts for that chat session because I assume I need a unique ID rather than a class name so I could pass the ID to the database - probably not the most efficient way to do things I know:
echo "$('#im-textbox".$receiver_id."').on('keyup', function(event){
if (event.keyCode == 13) {
//$(this.form).submit()
var dataset = $('#im-form".$receiver_id."').serialize();
$.ajax({
url: 'data/add-chat.php',
data: dataset,
method: 'post',
success: function(data) {
console.log(data);
}
});
$('#im-textbox".$receiver_id."').val('')
return false;
}
});
";
Thank you for your help!
I fixed it with this...
$(document).on('keyup', '#im-textbox".$receiver_id."', function(event){
if (event.keyCode == 13) {
//$(this.form).submit()
var dataset = $('#im-form".$receiver_id."').serialize();
$.ajax({
url: 'https://easyrepair.us/manage/data/add-chat.php',
data: dataset,
method: 'post',
success: function(data) {
console.log(data);
}
});
$('#im-textbox".$receiver_id."').val('')
return false;
}
});
I did a script and he are submitting forms twice. Someone can help?
PS: I need that any element can send forms
$('*').bind('click', function(event) {
if ($(this).attr('href') && $(this).attr('href') != '#') {
.....
} else if ($(this).attr('form-name')) {
$(this).attr('disabled', true);
var FormId = '#' + $(this).attr('form-name');
var Target = $(this).attr('action-url');
$.ajax({
type: 'POST',
dataType: 'html',
url: Target,
data: $(FormId).serialize(),
success: function(response) {
eval(response);
}
}).always(function() {
$(this).attr('disabled', false);
});
}
}
You are submitting your form once via the $.ajax call, and once via the <button>'s default behaviour. Add:
event.preventDefault();
to the end of your click handler.
Also, if you want a click handler on every element on your page, I'd highly recommend looking into event delegation.
Simple ajax query, but being triggered for every item of a class using the .click() event. When it gets to the .done() I cannot figure out how to look up the element which was clicked so I can properly remove the m_action class.
Below is the code. I'm sure I'm missing something simple, but I've been searching with Chrome and Firefox web tools without luck, and can't find a duplicate question here on Stack.
In short: using the code below, how do I properly remove the m_action class of the clicked element on a successful jQuery ajax return?
<script type="text/javascript">
jQuery("div#normal .m_action").click(function() {
jQuery.ajax({
url: "./action.php",
type: "POST",
data: { action: this.id }
}).done(function(result) {
jQuery(this).removeClass("m_action");
jQuery(this).html(result);
}).fail(function(result) {
alert("There was an error.")
});
})
</script>
You can just store a reference to it so that it is available anywhere in that scope:
jQuery("div#normal .m_action").click(function() {
var elem = this; // <-- right here
jQuery.ajax({
url: "./action.php",
type: "POST",
data: { action: this.id }
}).done(function(result) {
jQuery(elem).removeClass("m_action"); // <-- elem is still available
jQuery(elem).html(result); // <--
}).fail(function(result) {
alert("There was an error.")
});
});
Just a note for the future, your problem doesn't have to do with jQuery. This is just a simple use of variables within a scope. The this pointer changes within the done function, so you just needed to cache the reference.
This code should work:
$(document).ready(function()
{
jQuery(".m_action").click(function() {
var self = $(this);
jQuery.ajax({
url: "./action.php",
type: "POST",
data: { action: this.id }
}).done(function(result) {
self.removeClass("m_action");
self.html(result);
}).fail(function(result) {
alert("There was an error.")
});
})
});
</script>
I am learning jquery and i am stuck with a problem. Here is the code
$(function(){
var gotProducts=new Array();
var productsWithDelete=new Array();
$('.addProducts').on('keyup',function(event) {
var searchVal=$(this).val().trim();
if(searchVal.length > 0) {
$.ajax({
url: 'http://localhost/url',
data: { products: $(this).val(), },
type: 'POST',
dataType: 'html',
success: function(msg) {
$('#printTheProducts').html(msg);
}
});
}
});
$('.productsButton').click(function() {
alert('yes');
});
});
The response I am getting from the ajax call is a button having class productsButton.
Now when i try to click that button I got through ajax then it does not alert yes. I mean it does nothing.
Question:-
What might be the problem?
Try event delegation using .on() for generated button, As they are generated dynamically
$('#printTheProducts').on('click','.productsButton',function(){
alert('yes');
});
Where #printTheProducts is the closest parent element, you can use document or document.body also as a selector!
Syntax:
$(closestparentelement).on('event','targetselector',function(){
});
This code works fine for first click as it changes class along with image which is referenced from CSS. But when I click second time it acts like clicked in previous class which I assume removed already.
if(Model.SeenItWantToSeeIt.Status==1)
{
<div class="movie_data">
<div class="usermovie_option"> </div>
</div>
<div class="clear"></div>
}
else{
<div class="movie_data">
<div class="usermovie_option"> </div>
</div>
<div class="clear"></div>
}
And Javascript for toggling class is
$(".want_to_see_it").click(function () {
var wantToSeeIt = $(this);
alert('clicked on want to see it.');
$.ajax({
url: '#Url.Action("SeenIt", "MovieProfile")',
data: { Status: 1, MovieID: movieID },
dataType: 'json',
type: "POST",
success: function (data) {
wantToSeeIt.removeClass();
wantToSeeIt.addClass("dont_want_to_see_it");
$("dont_want_to_see_it").show();
},
error: function (data) {
alert('Error occurred.');
}
});
});
$(".dont_want_to_see_it").click(function () {
alert('clicked on donot want to see it');
var wantToSeeIt = $(this);
$.ajax({
url: '#Url.Action("SeenIt", "MovieProfile")',
data: { Status: 0, MovieID: movieID },
dataType: 'json',
type: "POST",
success: function (data) {
wantToSeeIt.removeClass();
wantToSeeIt.addClass("want_to_see_it");
$("want_to_see_it").show();
},
error: function (data) {
alert('Error occurred.');
}
});
});
And problem is it shows "clicked on donot want to see it" or "clicked on want to see it" as alert every time I click . What I have to do is this message should alternate every time I Click on their respective image.
Problem here is that you want to change the handlers dynamically on click of each element. But events are bound to the element directly using click event.
One option is to hide and show respective items.
Another option is to bind and unbind events.
Third option is to use event delegation. Your requirement will work with this since with event delegation events are not directly attached to the elements, they are instead delegated. So the moment you swap the class name event subscribed for that class name will automatically get delegated. SO next click on the same element will go to the other event handler attached its new class name. See if this is what you were looking for.
$(document).on('click',".want_to_see_it" ,function (e) {
var wantToSeeIt = $(this);
alert('clicked on want to see it.');
///Your ajax
wantToSeeIt.removeClass();
wantToSeeIt.addClass("dont_want_to_see_it");
$(".dont_want_to_see_it").show();
});
$(document).on('click',".dont_want_to_see_it" ,function (e) {
alert('clicked on donot want to see it');
var wantToSeeIt = $(this);
///Your ajax
wantToSeeIt.removeClass();
wantToSeeIt.addClass("want_to_see_it");
$(".want_to_see_it").show();
});
Note:- In the example i have attached to the document, You should n't attach it to the document, instead attach it to any containing element that is present in DOM at any time.
Demo
There was another issue, you missed . before the classname in your ajax success.
The problem is you need to unbind("click") to clear the previous handler then bind a new event handler for its new class.
Instead of unbinding and rebinding, do in one handler:
$(".usermovie_option a").on("click", function () {
var status = 0;
if ($(this).hasClass("want_to_see_it")) {
status = 1;
}
$.ajax({
url: '#Url.Action("SeenIt", "MovieProfile")',
data: { Status: status, MovieID: movieID,
dataType: 'json',
type: "POST",
success: function (data) {
$(this).toggleClass("want_to_see_it");
$(this).toggleClass("dont_want_to_see_it");
},
error: function (data) {
alert('Error occurred.');
}
});
});