Develop Reference

how to passing variable inside button click function to another click function and make into parameter?

I wanna ask about is possible if I have one button click function (modal value) and getting all data for my update requirement and passing into button confirmation (update button) and edit my data?
for code I explain in bellow :
/* button edit click */
$("#data-items").on('click', '#edit', function () {
/* get id from attribute */
const getId = $(this).attr("data-edit");
$.ajax({
url: `my-web/my-url/${getId}`,
method: "GET",
dataType: "JSON",
data: {
id_item: getId,
},
success: function (success) {
/* showing modal */
$("#edit-item").modal("show");
/* get data item and insert into input type */
const getIdItem = success['get_data']['id_item'];
const getNameItem = success['get_data']['name_item'];
$("input[name='item-name']").val(getNameItem);
// example 1
$("#my-update-button").on('click', function () {
console.log(getIdItem);
});
// example 2
// I wanna passing the getIdItem into my-update-button but I still don't know how to do that
}
});
});
// example 2
$("#my-update-button").on('click', function (getIdItem) {
console.log(getIdItem); <= but the data giving undefined
});
More Explain (I'm afraid my explanation in above is not good enough)
Example 1 : I wanna make my update button inside my data-item function click but it's not working and nothing happened.
Example 2 : I wanna make data in variable getIdItem into parameter and passing into update button function and I still don't know how to do that.
If my explanation still make everyone confused about my problem you can ask me in the comment, I need your help, thank you before

Not updating modal body

I have an empty modal on my page and I'm performing an ajax call as below (simplified for reading)
function returnIt(x)
{
$.ajax({
type:"POST",
url:"link",
data:{id:"123"},
success: function(data)
{
data=JSON.parse(data);
var content=document.getElementById("returnItModalBody").innerHTML;
for(var i=0;i<data.length;i++)
{
if(data[i]["nick"]==1)
content+="<p>"+data[i]["upd"]+"</p>";
else
content+="<p>"+data[i]["upd"]+"</p>";
}
alert(content);
$("#returnItModal").modal('show');
}
});
}
When I tell the script to alert with content it shows it should show in modal.
When modal opens, there is nothing in its body.
What am I missing here?
Thanks

var content=document.getElementById("returnItModalBody").innerHTML;
That copies the value of innerHTML (a string) to content.
content+="<p>"+data[i]["upd"]+"</p>";
Then you assign a new string to content
alert(content)
Then you look at the string in content
You never change innerHTML.
If you want to change innerHTML then you have to assign a new value to it.

JQuery & Ajax disable click

I have a table with data and a function to help me get values from rows:
function getRow () {
$('#mytable').find('tr').click( function(){
let fname = $(this).find('td:eq(4)').text();
let start = $(this).find('td:eq(5)').text();
let end = $(this).find('td:eq(6)').text();
.......ajax method () etc
................
}
So far, it has been working perfectly and fetching me the correct data. I had another function elsewhere in the page, where clicking on some links would fetch some data from the server and reload the page to display the new data. Everything was working like clockwork.
Now, I decided that when re-displaying fresh data, instead of reloading the page, it's better to refresh the #mytable div. Indeed, it worked, but alas it spoiled the first function. So basically the function below has introduced a bug elsewhere in the page, and I'm not sure why or how to fix it. It's as if the div refresh has completely disabled the event handler. Any ideas?
$(document).ready(function() {
$(".key").click(function(event) {
event.preventDefault();
var word = event.target.innerHTML;
$.ajax({
url: '.../',
data: {
action : "key",
keyword: word
},
type: 'get',
success: function(data){
$('#mytable').load("/.../../..." + ' #ytable');
},
error: function(e){
console.log(e);}
});
});
});

Select Option not showing selected value sometimes

I have a group of select option and each are relational from top to bottom by ajax. This is works fine in insert mode. But in edit mode when i push data to perform ajax operation and set the selected value based on stored data, It sometime not setting the value though the data is loaded to DOM and sometime it's working.
Actually if any data would miss, all the next data won't be loaded. but here 3rd and 4th data missed but 5th data is loaded.
I can't figure it out what is the problem. Please help if possible.
This is one of the ajax function to load data to district section
function loadDistricts(division1, distidentifier) {
return $.ajax({
type: 'post',
url: 'GetDistricts',
data: {
get_option:division1
},
success: function(response) {
$(distidentifier).html(response);
}
});
}
This is the function to call the ajax function and select the proper value
function loadAdress(divi, diviselect, dist, distselect, upaz, upazselect, unio, unioselect, vill, villselect){ // Id of all address field and jquery selector pass here
$(diviselect).val(divi).trigger('change');
loadDistricts(divi, distselect).done(function() {
$(distselect).val(dist).prop('selected', 'selected').trigger('change');
loadUpazilla(dist, upazselect).done(function() {
$(upazselect).val(upaz).prop('selected', 'selected').trigger('change');
loadUnion(upaz, unioselect).done(function(){
$(unioselect).val(unio).prop('selected', true).trigger('change');
loadVillage(unio, villselect).done(function(){
$(villselect).val(vill).trigger('change');
});
});
});
});
}
And finally I called the function, with value and jqueryidentifire --
loadAdress(divipid, '#divisions', distpid, '#districts', upapid, '#upazila', unipid, '#allunions', villpid, '#villages');
Any suggestion is appreciated.

Issue passing value through ajax

I have a HTML table on my website where I click on a cell and then am able to edit it. I am now trying to push the edited value back to my database by using ajax. I have tested the click to work properly, the content editable to work properly and that ajax is sending to the correct URL by using a simple "hello" on updatedatabase.php and seeing it return through the alert. When I try to pull the data from ajax to updateddatabase.php is where I am having problems. I believe that maybe $(this).val() may not be what I want to get the contents of the cell that I just edited with contenteditable? The reason I say this is because it looks like a blank value is being passed through to the second page. Here is a chunk of my code for the click / content editable /ajax on the main page:
$('td').click(function(){
var val=($(this).siblings().first().text());
var col = $(this).parent().children().index($(this));
$(this).prop('contenteditable', true);
//var row = $(this).parent().parent().children().index($(this).parent());
//alert('Date: ' + val + ', Column: ' + col);
$(this).bind('input propertychange', function() {
//On key stroke
$.ajax({
method: "POST",
url: "updatedatabase.php",
data: { content: $(this).val() }
})
.done(function( msg ) {
alert( "Data Saved: " + msg );
});
});
});
and here is what I have sitting on updatedatabase.php. I kept it simple just to test the value passing through for now.
<?php
if(array_key_exists("content", $_POST)) {
echo $_POST['content'];
}
?>
Hopefully this is an easy fix as I believe it all may just be with $(this).val() but I am not sure what I should change it to? Thanks for the help!!

Part of the problem is that you're not actually capturing the value of the table cell to be edited. Using a new version of jQuery in my sample code I have replaced your bind() with keyup() as there should not need to be any delegation:
$('td').click(function() {
console.log('clicked');
$(this).prop('contenteditable', true);
$(this).keyup(function() { // get the new value as soon as the key is released
console.log($(this).html());
});
});
https://jsfiddle.net/w9e0d5wm/
As mentioned in comments by #adeneo, table cells have no value property which you can get with val(). In my example I have used $(this).html() to get the text inside the changed <td>, but you could also use .text().
You should change data: { content: $(this).val() } to data: { content: $(this).html() } or data: { content: $(this).text() } in order to send a variable value in your AJAX. Now if you watch the console you'll see something posted and something returned.

Try "delegate" instead of "bind"