We Keep Coding

How to bind button function to a corresponding item in an array - AJAX, Firebase

I'm attempting to first make an AJAX request from a social API and append the results with a button inside the div that will save the corresponding item in the array to my firebase database. For example,
I have my AJAX request - I cut out about 75% of the actual code that isn't needed for the question.
$.ajax({
type : 'GET',
url : url,
dataType : "jsonp",
cache: false,
success : function(data){
console.debug(data);
vids = data.response.items;
for(var i in vids) {
dataTitle = vids[i].title;
ncode = "<div class='tile'><img src='"+ vids[i].title "'/></a><button class='btn' type='button' onClick='saveToDatabase()'>Save</button></div>";
$('#content').append( ncode )
And then I have my function that I want to save the 'title' of the object the button was appended with to the firebase database.
var dataTitle;
function saveToDatabase() {
ref.push({
title: dataTitle
});
}
The issue is that when the button is clicked it posts a random title from inside the array instead of the title of the item the button was appended with... How can I bind the buttons function to the correct dataTitle?
I'm not sure if that makes sense so please let me know if clarification is needed. Thanks in advance for any help you can provide!

This fails because you are iterating the entire list and assigning them to a global variable. The result is not random at all--it's the last item in the list, which was the last to be assigned to the globar variable.
Try using jQuery rather than writing your own DOM events, and utilize a closure to reference the video title.
function saveToDatabase(dataTitle) {
ref.push({
title: dataTitle
});
}
$.ajax({
type : 'GET',
url : url,
dataType : "jsonp",
cache: false,
success : function(data) {
console.debug(data); // console.debug not supported in all (any?) versions of IE
buildVideoList(data.response.items);
}
});
function buildVideoList(vids) {
$.each(vids, function(vid) {
var $img = $('<img></img>');
$img.attr('src', sanitize(vid.title));
var $button = $('<button class="btn">Save</button>');
$button.click(saveToDatabase.bind(null, vid.title));
$('<div class="tile"></div>')
.append($img)
.append($button)
.appendTo('#content');
});
}
// rudimentary and possibly ineffective, just here to
// point out that it is necessary
function sanitize(url) {
return url.replace(/[<>'"]/, '');
}

I actually just ended up passing the index to the function by creating a global array like so. It seems to be working fine... any reason I shouldn't do it this way?
var vids = []; //global
function foo() {
$.ajax({
type : 'GET',
url : url,
dataType : "jsonp",
cache: false,
success : function(data){
console.debug(data);
vids = data.response.items;
for(var i in vids) {
ncode = "<div class='tile'><img src='"+ vids[i].title "'/></a><button class='btn' type='button' onClick='saveToDatabase('+i+')'>Save</button></div>";
$('#content').append( ncode )
} //end ajax function
function saveToDatabase(i) {
ref.push({
title: vids[i].title
});
}

Combine two functions? Javascript and AJAX api call with throbber

I have a function getShare which creates a script and then calls an url shortener api which then returns a shortened url and sets that link to an input box's value.
Secondly I also have this function which I'm trying get to work with the first. So far I've only been able to .show the loader gif but not hide it when the function is successful.
EDIT: Below is updated code with my original script inside the response.success but i'm get a message in the console saying Failed to load resource and a 404 - the missing url is shown to be http://b1t.co/Site/api/External/MakeUrlWithGet?callback=apiCallback&_=1391704846002
function getShare(url)
{
$('#loader').show(); // show loading...
$.ajax({
dataType: "jsonp",
jsonpCallback:'apiCallback', // this will be send to api as ?callback=apiCallback because this api do not want to work with default $ callback function name
url: 'http://b1t.co/Site/api/External/MakeUrlWithGet',
data: {'url':url},
success: function(response){
$('#loader').hide(); // hide loading...
//respponse = {success: true, url: "http://sdfsdfs", shortUrl: "http://b1t.co/qz"}
if(response.success){
{
var s = document.createElement('script');
var browserUrl = document.location.href;
//alert(browserUrl);
if (browserUrl.indexOf("?") != -1){
browserUrl = browserUrl.split("?");
browserUrl = browserUrl[0];
}
//alert(browserUrl);
var gifUrl = $('#gif_input').value;
var vidUrl = $('#gif_input').value;
//alert(gifUrl + "|" + vidUrl);
url = encodeURIComponent(browserUrl + "?gifVid=" + gifUrl + "|" + vidUrl);
//alert(encodeURIComponent("&"));
s.id = 'dynScript';
s.type='text/javascript';
s.src = "http://b1t.co/Site/api/External/MakeUrlWithGet?callback=resultsCallBack&url=" + url;
document.getElementsByTagName('head')[0].appendChild(s);
}
function resultsCallBack(data)
{
var obj = jQuery.parseJSON(JSON.stringify(data));
$("#input-url").val(obj.shortUrl);
}
}
},
error:function(){
$('#loader').hide();
}
});
}

There's no need to "combine" it.
What someone is suggesting is a regular ajax method. Just move your js scripts you want executed on success, inside the success: callback.
Read more about the ajax method at another answer I did here: https://stackoverflow.com/questions/21285630/writing-my-first-rest-api-call-to-a-webservice-endpoint-post/21286810#21286810 or jQuery's docs: http://api.jquery.com/jQuery.ajax/
Note: to use this you will need jQuery and probably an XDR plugin for the ajax to support < IE 10

pass paremeter through .load from previous ajax call

Tearing my hair out on this one.... sure it just the structure of my function.
Basically I make a Ajax call within an Ajax loaded tab. The call made within writes a record to the Database and returns a value. I can alert the value fine but when I try to use it as a data parameter in my .load() call it doesn't get passed?
As they are in the same success function I just thought (Stupidly?) that I could easily reference it!
$('#convert-2-booking').click(function(e) {
var quoteid = $(this).attr("title");
$.ajax({
type: "POST",
url: 'tabs/convert-2-booking.asp?Planner_ID='+$('#convert-2-booking').attr("title")+'',
data: quoteid,
cache: false,
dataType: "html",
success: function(responseText){
var ajax_load = "<img class='loading' src='images/load.gif' alt='loading...' />";
var loadUrl = "tabs/booking.asp";
bookingid = responseText;
//above gets correct returned id.
$("#bookingtab").html(ajax_load).load(loadUrl, { 'bookingid': bookingid } ); // not here though :(
alert(bookingid) // alerts the correct id here too!
setTimeout(function() {
     
// move to bookings tab after 3 seconds
$("#tabs").tabs( "option", "active", 3 );
// load correct record into tab
}, 3000);
},
error: function(responseText){
alert("NOT:"+responseText);
//alert(responseText);
$("#tabs").tabs( "option", "active", 2 ); //load previous tab itself if returns error..
},
});
});

Try passing it via "booking.asp?bookingid=..."
Like this:
.load(loadUrl+"?bookingid="+bookingid)
It's a workaround tho; I'm not sure why load() doesn't do the same thing thru your array... Maybe it's because you only check GET variables on server side and load() gives you POST...?

ended up deciding to store the id in a session for the few seconds i need it. Not ideal, but a workaround for now, and enough to allow me to demo to my client.

Return or structure code so data from ajax call can be used in dynamically populated list

an answer from a previously question I asked here has posed another problem for me, as I am learning more and more about async calls I still can not figure out how to accomplish (as the previous answer showed me) a list which allows me to store and use data from a selected list item.
$('#home').live('pageshow', function(){
// creating object
var customerList = JSON.parse('{"customerInAccount":[{"customer_name":"Jane Doe","auto_id":"21"},{"customer_name":"Jack Black","auto_id":"22"}]}');
// creating html string
var listString = '<ul data-role="listview" id="customerList">';
// running a loop
$.each(customerList.customerInAccount, function(index,value){
listString += '<li><a href="#" data-cusid='+this.auto_id+'>'+this.customer_name+'</a></li>';
});
listString +='</ul>';
console.log(customerList);
//appending to the div
$('#CustomerListDiv').html(listString);
// refreshing the list to apply styles
$('#CustomerListDiv ul').listview();
// getting the customer id on the click
$('#customerList a').bind('click',function(){
var customerID = $(this).data('cusid');
alert(customerID);
});
});
with js fiddle http://jsfiddle.net/amEge/3/
This code works excellent and will allow me to accomplish what I want but fist I need to populate the customerList from a ajax call. But from the "success" function I cannot seem to get the code to work.
$.post(postTo,{id:idVar} , function(data) {
customerList = data;
//alert(customerList);
})
When I move the code inside the ajax function it dose not work. I was just wondering if anyone could help me and maybe show me how to deal with this from asynchronous calls ?
Many Thanks

You need to change your page as below.
// I assume this is your dot net web service url
var webServiceURL = 'customer.asmx/GetCustomer';
// here home is your page's ID
$('#home').live('pageshow', function(){
getCustomerList();
});
function getCustomerList(){
param=JSON.strigify({id:'2'});
callWebService(param, webServiceURL, onGetCustListSuccess, onGetCustListFailed)
}
function onGetCustListFailed(){
alert("service request failed");
}
function onGetCustListSuccess(data, status){
// creating object
// replace previous line with below
// var customerList = JSON.parse('{"customerInAccount":[{"customer_name":"Jane Doe","auto_id":"21"},{"customer_name":"Jack Black","auto_id":"22"}]}');
var customerList = JSON.parse(data.d);
// creating html string
var listString = '<ul data-role="listview" id="customerList">';
// running a loop
$.each(customerList.customerInAccount, function(index,value){
listString += '<li><a href="#" data-cusid='+this.auto_id+'>'+this.customer_name+'</a></li>';
});
listString +='</ul>';
console.log(customerList);
//appending to the div
$('#CustomerListDiv').html(listString);
// refreshing the list to apply styles
$('#CustomerListDiv ul').listview();
// getting the customer id on the click
$('#customerList a').bind('click',function(){
var customerID = $(this).data('cusid');
alert(customerID);
});
}
function callWebService(param,url,successFunc,errorFunc){
if(errorFunc=='undefined'){
errorFunc=OnDataError;
}
$.ajax({
type: "POST",
url: url,
data: param,
contentType:"application/json; charset=utf-8",
dataType: "json",
success: successFunc,
error: errorFunc,
beforeSend:function(){$.mobile.loading( 'show' );},
complete:function(){$.mobile.loading( 'hide');}
});
}
Hope this would help you out. If you have problems asks me here.

Correct me if I'm wrong, but I'll hazard a guess that your "live" code looks something like this:
$('#home').live('pageshow', function(){
// creating object
var customerList;
$.post(postTo, {id:idVar}, function(data) {
customerList = data;
//alert(customerList);
});
// creating html string
var listString = '<ul data-role="listview" id="customerList">';
// and all the rest...
If so, then your problem is that the code that's depending on your customerList variable being filled in ("all the rest...") runs immediately, rather than waiting for the response from your HTTP request to come back from the Web server. That $.post() doesn't wait around (or "block," as we say in the computer software programming game) while the HTTP transaction makes its way to the Web server and back. Instead, the rest of your code runs immediately, and then later, when that response comes back to the browser, the JavaScript engine dutifully executes your success function (or "closure," as we hm hmm hmmmm).
So what you'll want to do is put all this other code (the stuff that's dependent on customerList) into a separate function, then call that function from within your success closure. You won't even need your customerList variable then; you can just pass the new response data as an argument to your new function.

Telerik MVC Grid - Pass Value to New Controller Action

Using Telerik Extensions for ASP.NET MVC, I created the following Grid:
.. and I am able to extract the value of my Order Number using the client-side event "OnRowSelect", when the user selects any item in the grouped order. I can then get as far as displaying the selected value in an alert but what I really want to do is pass that value back to a different controller action. Is this possible using javascript?
When I tried the server-side control, I ended up with buttons beside each detail row, which was just not the effect/look desired.

You can easily make an ajax call in that event.
Kind of two part process (assuming your event handler resides in a separate .js file- otherwise you can define a url directly in .ajax call).
Define an url you need to post to - in $(document).ready(...)
like:
<script type="text/javascript">
$(document).ready(function() {
var yourUrl = '#Url.Action("Action", "Controller")';
});
Then place in your OnRowSelect event handler something like:
function onRowSelect(e) {
var row = e.row;
var orderId = e.row.cells[0].innerHTML;
$.ajax(
{
type: "POST",
url: yourUrl,
data: {id: orderId},
success: function (result) {
//do something
},
error: function (req, status, error) {
//dosomething
}
});
}
That should do it.

As it turns out there is an easier way to get to the new page by simply changing the Window.location as follows:
var yourUrl = '#Url.Action("Action", "Controller")';
var orderID;
function onRowSelected(e) {
var ordersrid = $('#IncompleteOrders').data('tGrid');
orderID = e.row.cells[1].innerHTML;
window.location = yourUrl + "?orderId=" + orderID;
}
Thanks to those who responded; however, the above answer as provided from Daniel at Telerik is more of what I was looking for.