I don't know if the question itself is correct, but here is explanation.
For example, i have function load_window() and tons of click, change (etc) events.
How to correctly create custom_data variable in events and use it in load_window() function? Basicly, after successful event, i want to store that variable in function and load ajax with that custom data variable.
Am i close to this one, or i need to rewrite whole thing?
function load_window() {
$.ajax({
type: "POST",
url: url+'/window',
dataType: "html",
data: {custom_data},
success: function(data) {
$('#window').html(data);
return data;
}
});
}
$('body').on('click', '#div', function(event) {
event.stopPropagation();
var this_id = $(this).data('id');
var custom_data = "'id':"+this_id;
load_window();
});
$('body').on('change', '#div > .div > select', function(event) {
event.stopPropagation();
var custom_id = $(this).data('id');
var custom_data = "'id':"+custom_id;
load_window();
});
// etc
Sorry for bad english and thanks for any answers.
It's just my opinion but i'd do something like this:
function load_window(id) {
$.ajax({
type: "POST",
url: url+'/window',
dataType: "html",
data: {id:id},
success: function(data) {
$('#window').html(data);
return data;
}
});
}
$('select').on('change', '#div > .div > select', function(event) {
event.stopPropagation();
var custom_id = $(this).data('id');
load_window(custom_id);
});
this will sligthly reduce the number of lines of code without affecting readibility but this is just my opinion
You're close. You probably want to pass the variables to the function.
function load_window(custom_id, custom_data) {
$.ajax({
type: "POST",
url: url+'/window',
dataType: "html",
data: {custom_data},
success: function(data) {
$('#window').html(data);
return data;
}
});
}
Then when you call it
load_window(custom_id, custom_data);
You could solve the issue in two ways. Firstly you could pass the data to your load_window() function.
Note that the manner you're currently using to create the object is not syntactically correct, and will give a different result to what you're expecting. You need to provide the key and value separately, not as a single string provided to the object. Also note that you cannot return anything from an asynchronous handler. If you need to use the returned data, do it in the callback. Try this:
function load_window(requestData) {
$.ajax({
type: "POST",
url: url + '/window',
dataType: "html",
data: requestData,
success: function(data) {
$('#window').html(data);
// do something with data here, don't 'return' it.
}
});
}
$('body').on('click', '#div', function(e) {
e.stopPropagation();
load_window({ id: $(this).data('id') });
});
$('body').on('change', '#div > .div > select', function(e) {
e.stopPropagation();
load_window({ id: $(this).data('id') });
});
Alternatively you can provide the load_window() function reference to the event handlers and get the data('id') using the this reference within the function:
function load_window() {
$.ajax({
type: "POST",
url: url + '/window',
dataType: "html",
data: { id: $(this).data('id') },
success: function(data) {
$('#window').html(data);
// do something with data here, don't 'return' it.
}
});
}
$('body')
.on('click', '#div', load_window)
.on('change', '#div > .div > select', load_window);