Develop Reference

Jquery Functions submitting at wrong times

My problem current is that I am trying to call a function with jquery at a specific event but it is running at the wrong event. The function I want to call is:
function resolvedAjax(tid){
$.ajax({type: 'post',url: 'resolveTicket.php',data: 'tid=' +tid, success: function(s){
$('#resolvedTicket').html("Resolved");
mainTable();
}});
}
I am trying to call it VIA this block of jquery:
$(document).on('click', '.viewTD', function(){
var tid = $(this).closest('tr').find('.tidTD input').val();
$.ajax({
type: 'post',
url: 'modalInfo.php',
data: 'tid=' +tid,
success: function(d){
$('.modal-body').html(d);
$('.modal-title').html("Ticket ID: " + tid);
$('#myModal').modal('show');
var time = $('#time').val();
var desc = $('#description').val();
$("#addComment").click(function(){
$.ajax({type: 'post', data: { myData: $('#commentAdd').serialize() }, url: "addComment.php", success: function(info){
$.ajax({
type: 'post',
url: 'modalInfo.php',
data: 'tid=' +tid,
success: function(d){
$('.modal-body').html(d);
$('.modal-title').html("Ticket ID: " + tid);
$('#myModal').modal('show');
}});
}});
});
}
});
$('#Resolved').click(resolvedAjax(tid));
});
The problem is that when I open the modal by clicking the viewTD class it runs the function which is not quite what I want. I am trying to get it so that if you click the resolved button inside the modal, which has an ID of Resolved, it will run that function. Currently it is running it as soon as it opens and doesn't wait till the resolved button is closed. Is .click() not the right trigger? I am trying to optimize this bit of code which is redundant and probably as poorly constructed as can be which is why I am working on function implementations to simplify code and make it more correct but currently this function is having problems and I don't know why.
(Additional information just in case it is needed)
The modal's body is constructed by the first ajax call in the second bit of jquery code. Inside the modal is a table with the ticket information and a form to add comments and the resolve button. I have all this redundant nested code because it was the only way I could get comments to get added and it resolved a few problems (though it has created a few). I think I can get it all working if I can get some of these functions to work but right now I am having the problem of opening the modal and resolving the tickets right away instead of allowing me to view it and add comments correctly.
I know it's probably something simple but I am still trying to learn to use jquery as I have not used it much in the past, sorry if there is any confusion I can try and clarify anything if needed.
Thanks
Edit I have this code now but it is still not working:
$(document).on('click', '.viewTD', function(){
window.tid = $(this).closest('tr').find('.tidTD input').val();
$.ajax({
type: 'post',
url: 'modalInfo.php',
data: 'tid=' +tid,
success: function(d){
$('.modal-body').html(d);
$('.modal-title').html("Ticket ID: " + tid);
$('#myModal').modal('show');
var time = $('#time').val();
var desc = $('#description').val();
}
});
});
$( document ).on( "click", "#addComment", function() {
$.ajax({type: 'post', data: { myData: $('#commentAdd').serialize() }, url: "addComment.php", success: function(info){
}});
});
$( document ).on( "click", "#Resolved", resolvedAjax(window.tid));
I can't seem to get tid accessible outside of the scope of that viewTD click event. I have tried windows, global variables and objects but can't get it working.

Your handler
$("#addComment").click(function()
is inside another handler.
$(document).on('click', '.viewTD', function(){
The second handler does not exist as far as the compiler is concerned because it is in the wrong scope. You need to move that #addComment handler into the root scope. Of course this will require you to rewrite the function - but that is why it is not responding to the clicks.
Also, .click is fine, but a better syntax is using .on because it allows you to scope your handler a little better.
$( document ).on( "click", "#addComment", function() {
console.log( "foo!");
});

Solution I found finally:
$(document).on('click', '.viewTD', function(){
var tid = $(this).closest('tr').find('.tidTD input').val();
modalConent(tid);
tabID.tableID = tid;
});
$( document ).on( "click", "#addComment", function() {
$.ajax({type: 'post', data: { myData: $('#commentAdd').serialize() }, url: "addComment.php", success: function(info){
modalConent(tabID.tableID);
}});
});
$( document ).on( "click", "#Resolved", function(){
resolvedAjax(tabID.tableID);
});
The change I made to fix it was:
$( document ).on( "click", "#Resolved", function(){
resolvedAjax(tabID.tableID);
});
instead of
$( document ).on( "click", '#Resolved', resolvedAjax(tabID.tableID));
Not sure why you can't do it the second way but whatever the reason is you have to do it the top way, if someone could comment why I'd sure love that!
#Korgrue's suggestion of getters and setters helped to make the tid variable accessible everywhere and helped make this work fully.

jQuery function doesn't work after after loading dynamic content

I'm using below code. This is bootstrap 3 delete conformation message.
$(document).ready(function(){
$('a.btnDelete').on('click', function (e) {
e.preventDefault();
var id = $(this).closest('div').data('id');
$('#myModal').data('id', id).modal('show');
});
$('#btnDelteYes').click(function () {
var id = $('#myModal').data('id');
var dataString = 'id='+ id ;
$('[data-id=' + id + ']').parent().remove();
$('#myModal').modal('hide');
//ajax
$.ajax({
type: "POST",
url: "delete.php",
data: dataString,
cache: false,
success: function(html)
{
//$(".fav-count").html(html);
$("#output").html(html);
}
});
//ajax ends
});
});
This is the trigger element that I'm using
<div data-id="MYID"><a class="btnDelete" href="#">Delete</a></div>
And I'm using the same HTML element dynamically to trigger delete and it doesn't work.
Can someone point me the correct way to do it?

You have to use event delegation
$(document).on("click" , '#btnDelteYes' ,function () {
Pretty much: bind the click higher up to something that exists when the script is run, and when that something is clicked, tell it to pass the click event to the #btnDelteYes element instead
I cant understand what exactly you are doing on your code due to missing information, but the answer is: you should use event delegation on the dynamically inserted content

you can try
$('[data-id=MYID]').on('click','.btnDelteYes',function({
e.preventDefault();
var id = $(this).closest('div').data('id');
$('#myModal').data('id', id).modal('show');
});
here <div data-id="MYID"> should be a hard coded html content and The idea is to delegate the events to that wrapper, instead of binding handlers directly on the dynamic elements.

Query function not being fired when called

I have a Jquery function to delete a row in an HTML table, it looks like this;
$(document).ready(function(){
$("#thisNet td a.delete").click(function() {
if (confirm("Are you sure you want to delete this row?")) {
var id = $(this).parent().parent().attr('id');
var data = 'id=' + id ;
var parent = $(this).parent().parent();
$.ajax({
type: "POST",
url: "delete-row.php",
data: data,
cache: false,
success: function()
{
parent.fadeOut('slow', function() {$(this).remove();});
}
});
}
});
});
I don't know if it works or not because when I click the button I never get into the function. The delete item to click is in a table created by PHP/MySQL. I followed the tutorial here; https://sarfraznawaz.wordpress.com/2009/09/14/deleting-table-rows-using-jquery-and-php/ to create the delete function. I'm guessing the reason it doesn't fire has to do with timing. The $(document).ready(function() already thinks the page is done loading before the table is created..but I don't know how to overcome this problem.
The page is here; http://kcmecc.org/RaspPi/ once you access it use the drop down to select Net #1. The delete column is the last one with the red x.

Your delete button doesn't exist on document ready. You need to use .on to delegate the event to an ancestor element when dynamically adding elements...
$(document).on('click', '#thisNet td a.delete', function() {

Trouble in updating span tag after Ajax Success call

I am having trouble in updating span tag in my html file. I am getting JSON object from server and its showing me in console.log too. But When I try to update it on span tag in AJAX:Success it doesn't work. If I call same line outside the success tag, it does work there.
AJAX.JS
$('a.up_vote').click(function(e) {
e.preventDefault();
$(this).siblings("span").css( "background-color", "green" );
$.ajax({
url: $(this).attr('href'),
type :'get' ,
success : function (data){
$(this).find("span").css( "background-color", "red" );
$(this).siblings('span').html(data.count);
$(this).siblings("span").css( "background-color", "red" );
},
failure : function (data){
alert('failure') ;
}
}) ; // ajax call
}); // upvote link call
HTML
<div class ='up' style="float:left">
<a href='{% url 'upvote-detail' post.id %}' class='up_vote'>Up vote</a>
<span> {{ post.upvote }} </span>
</div>

The issue is your use of $(this)
Using the context of the 'this' keyword with jQuery
https://remysharp.com/2007/04/12/jquerys-this-demystified
A simple way is to store referance to $(this) then use it later.
For example:
$('a.up_vote').click(function(e) {
e.preventDefault();
window.alert("hello");
console.log("hello there");
var $that = $(this);
$that.siblings("span").css( "background-color", "green" );
$.ajax({
url: $that.attr('href'),
type :'get' ,
success : function (data){
// alert('success');
console.log('hello from success ajax')
console.log(data.count);
$that.find("span").css( "background-color", "red" );
$that.siblings('span').html(data.count);
$that.siblings("span").css( "background-color", "red" );
// $('#upvote_count').html(data.count);
console.log('siblings passed')
},
failure : function (data){
alert('failure') ;
}
}) ; // ajax call
}); // upvote link call
The $that is just a var name starting with a $, not specific to jquery as such but a useful habit for variable that store jquery objects (including $() wrapped DOM elements, as those are jquery objects too)
The $that = $(this) is a useful pattern to apply, using whatever variable names you want.
Also, a simple console call to check key variables is always recomended when something doesnt work
console.log('debug',$(this));
You just hit F12 and go to console tab (or google your browser name + dev console if nothing happens) and see what is printed there (or even use breakpoints or other debugging method, see link)
Debugging Links
Chrome DevTools: https://developer.chrome.com/devtools
Debugging JS in Chrome: https://developer.chrome.com/devtools/docs/javascript-debugging

$(this) inside the success callback is not referencing the clicked item anymore.
You have to reference it directly or use a temporary variable like:
var clickedItem = $(this); // before ajax call
and then inside success callback try
$(clickedItem) instead of $(this)
I hope this works for you; please let me know.
Here you have a nice explanation of 'this' keyword use inside callbacks.

$('a.up_vote').click(function (e) {
e.preventDefault();
$(this).siblings("span").css("background-color", "green");
$.ajax({
url: $(this).attr('href'),
type: 'get',
success: function (data) {
$('a.up_vote').siblings("span").css("background-color", "red");
$('a.up_vote').siblings('span').html(data.count);
},
failure: function (data) {
alert('failure');
}
}); // ajax call
}); // upvote link call
try this one.

on jQuery .html() update, other functions stop working

I have certain "pages" on my website that are sortable. They also auto update to a database.
After my li list is sorted, a php page is called that re-orders the "pages" and then I call .html(data) to change the order of the pages that are displayed on the page.
After doing this, however, my auto update functions in my javascript stop working.
There is a #form1 that works before the sort takes place and the .html(data) is called. Once it is called, the previous #form1 get's removed and re-added to the page. This is when it stops working.
Does anyone know the reasoning for this?
My update script
$("#reportNav").sortable({
stop : function(event, ui){
var postData = $(this).sortable('serialize');
var url = "saveOrder.php";
$.ajax({
type: "POST",
url: url,
data: postData,
success: function(data) { $('#reportContainer').html(data); },
error: function(data) { $changesSaved.text("Could not re-order pages."); }
});
}
});
What stops working/stops being called
var timeoutId;
$('#form1').on('input propertychange change', function() {
clearTimeout(timeoutId);
timeoutId = setTimeout(function() {
// Runs 1 second (1000 ms) after the last change
$("#form1").submit();
}, 1000);
});

Probably a case of over-writing your elements that has handlers bound, in which case you need event delegation:
$('#reportContainer').on('input propertychange change', '#form1', function() {