Using ajax in jquery to create buttons

Question

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.

You haven't explained about the problem you are facing. You mentioned only "What you want".. — Siva Charan
– Siva Charan, Commented Jan 27, 2014 at 18:02

Haris ur Rehman · Accepted Answer · 2014-01-27 18:04:34Z

1

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>');
}

answered Jan 27, 2014 at 18:04

Haris ur Rehman

2,67132 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Theofilos Mouratidis Over a year ago

or append, depending what he really wants

user1010101 Over a year ago

Although all the codes are working fine this one i happened to use first. THANKS so much. i dont have enough reps to give all of you a upvote.

user1010101 Over a year ago

@hrehman , just a small problem for some reason it works but my data-theme="b" is not working. I see no color for the created buttons. any idea why?

keeehlan · Accepted Answer · 2014-01-27 18:03:31Z

0

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.

answered Jan 27, 2014 at 18:03

keeehlan

8,06416 gold badges61 silver badges105 bronze badges

Comments

cocco · Accepted Answer · 2014-01-27 18:23:26Z

0

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!

edited Jan 27, 2014 at 18:23

answered Jan 27, 2014 at 18:08

cocco

16.8k7 gold badges65 silver badges77 bronze badges

Collectives™ on Stack Overflow

Using ajax in jquery to create buttons

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related