I am trying, in vain it seems, to be able to pass additional parameters back to the success callback method that I have created for a successful ajax call. A little background. I have a page with a number of dynamically created textbox / selectbox pairs. Each pair having a dynamically assigned unique name such as name="unique-pair-1_txt-url" and name="unique-pair-1_selectBox" then the second pair has the same but the prefix is different.
In an effort to reuse code, I have crafted the callback to take the data and a reference to the selectbox. However when the callback is fired the reference to the selectbox comes back as 'undefined'. I read here that it should be doable. I have even tried taking advantage of the 'context' option but still nothing. Here is the script block that I am trying to use:
<script type="text/javascript" language="javascript">
$j = jQuery.noConflict();
function getImages(urlValue, selectBox) {
$j.ajax({
type: "GET",
url: $j(urlValue).val(),
dataType: "jsonp",
context: selectBox,
success:function(data){
loadImagesInSelect(data)
} ,
error:function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
});
}
function loadImagesInSelect(data) {
var select = $j(this);
select.empty();
$j(data).each(function() {
var theValue = $j(this)[0]["@value"];
var theId = $j(this)[0]["@name"];
select.append("<option value='" + theId + "'>" + theValue + "</option>");
});
select.children(":first").attr("selected", true);
}
</script>
From what I have read, I feel I am close but I just cant put my finger on the missing link. Please help in your typical ninja stealthy ways. TIA
****UPDATE**** Nick is a true Ninja. They should invent a new badge for that! His answer below does the trick. As he mentions it's 1.4 specific but I can live with that. Here is my final code that is working for any Ninjas in training (and my future reference):
<script type="text/javascript" language="javascript">
$j = jQuery.noConflict();
function getImages(urlValue, selectBox) {
$j.ajax({
type: "GET",
url: urlValue+ '?callback=?',
dataType: "jsonp",
context: selectBox,
success: jQuery.proxy(function (data) {
var select = $j(this);
select.empty();
$j(data).each(function() {
var theValue = $j(this)[0]["@value"];
var theId = $j(this)[0]["@name"];
select.append("<option value='" + theId + "'>" + theValue + "</option>");
});
select.children(":first").attr("selected", true);
}, selectBox),
error:function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
});
}
</script>
The callback function is passed two parameters: the response from the Ajax call and the status of the Ajax call. The callback function should be defined as a function and not as a property of an object.
Put this into your $.ajax parameters.
invokedata: {
data1: "yourdata",
data2: "moredata"
}
In the success function use it like this
this.invokedata.data1;
this.invokedata.data2;
Your $.ajax call and the success function must also be a part of the same object. Put your functions in an object and define them like this
function myObject {
var getImage = function(..) { }
var loadImagesInSelect = function(..) { }
}
This is what I did, and it also worked fine:
$.ajax('URL', {
myCustomControl: selectBox,
myCustomVariable: 'teste',
data:
{
myData: 1
},
success: function (data, textStats, jqXHR) {
myFunction(data, textStats, jqXHR, this.myCustomControl, this.myCustomVariable);
}
});
You can add controls and variables to the parameters of your ajax call.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With