0

The thing is I'm currently using an ajax call to grab some data from an html file, and populate a list of buttons on success from the data it finds in the html file. This part is working fine. However, in the same function that populates the list of buttons, im trying to make it so that each button, once clicked, performs another ajax to a url that is specific to that button. Since i have the list of urls in an array, i use a for loop to populate the list of buttons, and in the same for loop, i add an on click function to each button. The problem I'm having is that when i click a button, it only retrieves the last URL regardless of which button was clicked.

heres my code:

for(var i = 0; i < tools.length; i++){
    name = tools[i][0];
    url = tools[i][1];

    var id = "";
    for(var j = 0; j < name.length; j++){//remove periods from ids
        if(name.charAt(j) != '.'){
            id += name.charAt(j);
        }
    }

    //populate the list of tools
    $("#tools").append("<li>"
     + "<button class='button button-primary buttons' id='"+id+"' type='button'>"+name+"</button>"
     + "</li>"
     );
    // alert(url);

    $("#"+id).on('click', function(event) {

        $.ajax({
        url: url,
        type: 'GET',
        dataType: 'xml',
        success: processXML
        });

    }); 

};
function processXML(xml){
    var title = $(xml).find('title').first().text();
    alert(title);
}

I researched a bit and found this response: https://stackoverflow.com/a/2687739/4312572

however creating a function(i) that did everything in my for loop, then calling the function inside the for loop didn't change anything. It still used the last value for i.

I need each button to make its own ajax call, but the buttons themselves are populated by the success function of a previous ajax call.

How should i set this up to achieve what i need? Thanks in advance for any help!

Community
  • 1
  • 1
coderasd
  • 19
  • 1
  • 5
  • http://stackoverflow.com/questions/28756691/javascript-for-loop-increment-behaves-strangely/28756710#28756710 – Igor Feb 27 '15 at 03:24
  • FYI, you can remove periods with a simple `.replace()` method call as in `var id = name.replace(".", "");` – jfriend00 Feb 27 '15 at 03:26
  • or if there can be multiple `.` then `var id = name.replace(/\./g, '');` – Arun P Johny Feb 27 '15 at 03:30
  • http://jsfiddle.net/arunpjohny/8bg3bjrx/2/ or http://jsfiddle.net/arunpjohny/8bg3bjrx/1/ – Arun P Johny Feb 27 '15 at 03:34
  • @jfriend00 thanks, I knew about the replace function but i tried it earlier using a regex to remove multiple '-' from a string and it didn't work so i said screw it and dirty coded it. I'm not proud of it though lol. Will definitely keep using it in the future. – coderasd Feb 27 '15 at 03:52
  • @ArunPJohny First off, thanks for your help! Your second suggestion worked perfectly! However, the first one did not work and i think its because it uses tools[i] but there is no i to use. I like your first solution better because I understand it more, how can i make it work if it doesnt use an i value yet tools is a two dimensional array. – coderasd Feb 27 '15 at 03:54
  • @coderasd sorry... http://jsfiddle.net/arunpjohny/8bg3bjrx/3/ .. but I would recommend http://jsfiddle.net/arunpjohny/8bg3bjrx/1/ – Arun P Johny Feb 27 '15 at 04:00
  • @coderasd - a common mistake with `.replace()` is that it does not modify the existing string (strings are immutable in Javascript), it returns a new string. People often forget this and they call `str.replace(...);` and expect `str` to change. Instead it has to be `result = str.replace(...);`. – jfriend00 Feb 27 '15 at 04:00
  • @ArunPJohny nice! Hmm any particular reason why the second is preferable? I figure if i'm going to learn javascript/jquery i might as well learn best practices from the beginning. Any insight as to your preference for the second one is much appreciated. – coderasd Feb 27 '15 at 04:10
  • @jfriend00 ugh thats exactly why it wasn't. So silly of me. Thanks for the help! – coderasd Feb 27 '15 at 04:12

0 Answers0