How to pass the jquery's ajax response data to outer function?

Question

Am getting data from ajax call and appending the data to table. Am getting title and url from the data. Now when i click on the url data of table , i need to call a outer javascript function with the clicked url data.

 <script>

 jquery(document).ready(function(){
   jquery(#button).click(function{
  showData();  
 });
 });


function showData(){
var total  = "";
var final = ""; 
  jquery.ajax({
url : "AJAX_POST_URL",
type: "POST",
data : input,
    dataType: "json",
success: function(jsondata)
{
    //data - response from server
     var document= jsondata.data.results;  //am getting array of objects
     for(int i=0; i<document.length; i++){
      var tr = "<tr>";
    var td = "<td>" + "Title : " +
    document[i].title + "Url :" + "<a href=''>" +  document[i].url + </a> + "</td></tr>";
   final = tr + td;
    total= total + final ;
        }

    $("#docTable").append(total) ;

},
error: function (jqXHR, textStatus, errorThrown)
{
            alert("error");
}
});
}
</script>


<script>
function download(){

  //inside this function i need to get the value of document[i].url
}
</script>

@adeneo : I have read the link..but I need to catch the data after clicking on data of the table and pass it to outer function.? how to do that? — Afju, Dec 21 '13 at 19:17

score 0 · Accepted Answer · answered Dec 21 '13 at 19:39

0

You really should structure your program quite a bit better, and it would be easier if you could put your complete example up on jsfiddle.net.

But a quick solution in your current code may be to make "document" a global variable. Beware that document already is a global variable in the BOM (Browser Object Model), so use something else like say "docs".

<script>
// Global variable
var docs;

jquery(document).ready(function(){
  jquery(#button).click(function{
    showData();  
  });
});

function showData(){
  var total  = "";
  var final = "";

  jquery.ajax({
    url : "AJAX_POST_URL",
    type: "POST",
    data : input,
    dataType: "json",
    success: function(jsondata)
    {
      //data - response from server
      docs = jsondata.data.results;  //am getting array of objects

      for(int i=0; i<document.length; i++) {
        var tr = "<tr>";
        var td = "<td>" + "Title : " +
        docs[i].title + "Url :" + "<a href=''>" +  docs[i].url + </a> + "</td></tr>";
        final = tr + td;
        total = total + final;
      }

      $("#docTable").append(total) ;
    },

    error: function (jqXHR, textStatus, errorThrown)
    {
      alert("error");
    }
  });
}
</script>


<script>
function download(){    
  //inside this function i need to get the value of document[i].url

  // You have access to docs through the global variable
  for(var i=0;i < docs.length;i++) {
    console.log(docs[i].url)
  }
}
</script>

answered Dec 21 '13 at 19:39

Hallvar Helleseth

1,867
15
17

Thanks Hallvar..! Can i know one more thing. Actually When i click on the data of the table, i was calling the function 'download'. so how i can i come to know that specific url . here as per the answer , am getting whole docs, but i need to get the specific url data when i click on the table url data. – Afju Dec 21 '13 at 20:37
@Hallvar...Yeah i agree. from next time, i will post it in jsfiddle.net – Afju Dec 21 '13 at 20:40
If you just want to send the browser to the url of the doc, then you do not need the download function. You can instead change "" to ''. When the user clicks the url the browser will open that url. – Hallvar Helleseth Dec 21 '13 at 20:42
No..What i mean to say is that, When i click on the url's of table data, i need to invoke a java method , so when i click on the url , i was writing a js function which inturn calls java method, but how to pass the clicked url to the js function , so that from there i can pass to java method – Afju Dec 21 '13 at 20:48
I assume by java method you mean a WebService/REST URL of some sort. Either set the URL to the WebService/REST in the href. Or ''. Then the download function looks something like "function download(url) { console.log(url); }". This is not very pretty code, but it is difficult to show a better way without a more complete example. – Hallvar Helleseth Dec 21 '13 at 20:56
@Hallvar... check the html and javascript editor field from this link..http://jsfiddle.net/NN5hj/1/ – Afju Dec 21 '13 at 20:58
Then shall i need to write like this ---> '' and outer function as --> "function download(url){ console.log(url);}". Am i right? – Afju Dec 21 '13 at 21:06
can i know why are those "\" in before and after url value? – Afju Dec 21 '13 at 21:09
That is to pass the url as a string into the download function. We are writing javascript code from within javascript (usually a bad idea) Since docs[i].url will return the value of the string without the quotes, we need to put the quotes back when constructing the javascript. A much better idea is to attach and onclick event handler from JavaScript. Or even better use a framework such as Knockout.js to make your code much cleaner and clearer. – Hallvar Helleseth Dec 21 '13 at 21:17
1

am at beginner level of javascript and jquery..so i was asking 'n' number of questions? – Afju Dec 21 '13 at 21:17
Once again Thanks for answering all my questions..! Now am clear – Afju Dec 21 '13 at 21:19
@Hallvar.. I tried with your code ''. But when i click on the url, the js function is not at all getting called. – Afju Dec 22 '13 at 05:13
Sorry it should be: ''. – Hallvar Helleseth Dec 22 '13 at 09:47

How to pass the jquery's ajax response data to outer function?

1 Answers1

Linked