CODEWITHSUNDEEP
javascriptjqueryhtmlajax
user1010101
user1010101

Reputation: 1658

Using ajax in jquery to create buttons

I am using ajax GET to recieve some html response body. Once i got the response body i parsed out the desired strings. In my case the desired strings are names of popular american basketball teams. Then i stored the parsed strings in a string array called teamNames.

So if i were to print out the string array teamNames it would print names like => Heat, Raptors, Pacers etc.

Now i want to use some ajax method to create button names for all the strings sotred in the teamNames array.

The following is my javascript.

  <script>
    $( document ).ready(function()
    {
       $("#log").click(function(){

     $.ajax({
        url: "http://1xx.1xx.0.1xx:8081/script.login",
            type: "GET",
            data: { 'page':'create_user', 'access':'user','username':'user', 'password':'user'},
            dataType: "text",
            success: function (html) {
                //Prints the Response Body
                console.log(html);


          var teamNames = new Array();
          var res = html.match(/insertNewChild(.*);/g);
                for(var i =0;i<res.length;i++)
                {

                    //Parse out names of the desired strings         
                    var temp = res[i].split(',');
                    if(temp.length >= 3)
                    {

               //Store the desired strings in an string array 
              teamNames[i] = (temp[2].replace('");','')).replace('"','');
                    }                   
                }


              for(var i = 0; i<teamNames.length; i++){

                 //this will print names of all the basketball teams (desired string)
                 alert(widgetNames[i]);

                 //create buttons using the printed string


              }

            }

       });
      });


    })

</script>

In my html code i have a div called item which is in some navigation menu. 

  <div id="items">
 <!-- Should be loaded using some ajax method -->
 <a href="" data-theme="b" data-role="button">Raptors</a>
  <a href="" data-theme="b" data-role="button">Heat</a>
 <a href="" data-theme="b" data-role="button">Pacers</a>
<a href="" data-theme="b" data-role="button">Celtics</a>
<a href="" data-theme="b" data-role="button">Bulls</a>
<a href="" data-theme="b" data-role="button">Orlando</a>

 <!-- Should load by default. -->
<a href="#page1" data-transition="fade" data-theme="b" data-icon="flat-cross" data-role="button">LOG OUT</a>
  </div>

I would like to be able to create the buttons listed above dynamical using ajax . So for instance if my teamNames array contains Raptors then i want to dynamically create the following inside the items div. ==> 

<a href="" data-theme="b" data-role="button">Raptors</a>

Please advice on how this can be done? I apologize again if this is a bad question as i am a js and html noob. i have asked a couple of questions in the past here and got great help that got me started. Any tip or hint is appreciated.

Upvotes: 0

Views: 4939

Answers (3)

cocco
cocco

Reputation: 16716

Shortest way

No Loop needed !!

var buttonsHTML='<a href="#" data-theme="b" data-role="button">'+
teamNames.join('</a><a href="#" data-theme="b" data-role="button">')+
'</a>';

or

var 
a='<a href="#" data-theme="b" data-role="button">',
b='</a>',
btns=a+teamNames.join(b+a)+b;

Demo

http://jsfiddle.net/7Nu5k/2/

If you have any questions just ask!

Upvotes: 0

Haris ur Rehman
Haris ur Rehman

Reputation: 2663

You can use the following code"

for(var i = 0; i<teamNames.length; i++){
   $('#items').prepend('<a href="javascript:;" data-theme="b" data-role="button" >'+teamNames[i]+'</a>');
}

Upvotes: 1

keeehlan
keeehlan

Reputation: 8054

I won't show how to process the buttons because I'm not sure what you're trying to do with them, but I will show you how to create them.

var buttons = new Array();

for(var i = 0; i < teamNames.length; i++){

    //this will print names of all the basketball teams (desired string)
    alert(widgetNames[i]);

    //create buttons using the printed string
    buttons[i] = $("<a href='#' data-theme='b' data-role='button'>" + widgetNames[i] + "</a>");       

}

That should populate an array with one button-style anchor for each value in widgetNames.

Upvotes: 0

Related Questions