CODEWITHSUNDEEP
javascriptjqueryhtml
shefali
shefali

Reputation: 69

How to append data only once using jquery

Below is the my code for clicking functionality of tabs. 

<body>
    <div class="row-fluid">
        <div class="span1 offset1">
            <div class="tabbable" align="center">
                <ul class="nav nav-tabs nav-stacked">
                    <li class="active"><a href="#tabs-1" data-toggle="tab">Eat</a>
                    </li>
                    <li><a href="#tabs-2">Drink</a>
                    </li>
                </ul>
            </div>
        </div>
        <div id="1"></div>
    </div>
    <script type="text/javascript">
        $("a[href=#tabs-1]").click(function() {

            for (i = 0; i < mytabs.length; i++) {
                $('div').append("<br>" + mytabs[i] + "<br>");
            }
        });
    </script>
</body>

And here I am using javascript to store the values of tabs in array

<script>
    $(function() {
        $("#tabbable").tabs();
    });

    var i;
    var mytabs = new Array();
    mytabs[0] = "Saab";
    mytabs[1] = "Volvo";
    mytabs[2] = "BMW";
</script>

Now I want that after clicking on tabs the values stored in data should get displayed. But what my code is doing , It is showing the data as many times as the data is stored in array. Means I want output as Saab,Volvo,BMW but is displaying it three times. Can anyone help me in this that what to use instead of append so that i get the desired output.

Upvotes: 2

Views: 7678

Answers (5)

Kean Allen
Kean Allen

Reputation: 31

This works for me: $('div#1').empty(); $('div#1').append('your code here');

Upvotes: 2

Aditya Singh
Aditya Singh

Reputation: 9612

Try using jQuery.one http://jsfiddle.net/adiioo7/UFBzn/1/

JavaScript:-

 var i;
 var mytabs = new Array();
 mytabs[0] = "Saab";
 mytabs[1] = "Volvo";
 mytabs[2] = "BMW";

 $(function () {
     $(".tabbable").tabs();

     $("a[href^=#tabs-]").one("click", function () {
         for (i = 0; i < mytabs.length; i++) {
             $($(this).attr("href")).append("<br>" + mytabs[i] + "<br>");
         }
     });
 });

HTML:-

<div class="row-fluid">
    <div class="span1 offset1">
        <div class="tabbable" align="center">
            <ul class="nav nav-tabs nav-stacked">
                <li class="active"><a href="#tabs-1" data-toggle="tab">Eat</a>

                </li>
                <li><a href="#tabs-2">Drink</a>

                </li>
            </ul>
            <div id="tabs-1"></div>
            <div id="tabs-2"></div>
        </div>
    </div>
</div>

Upvotes: 3

Suryaprakash Pisay
Suryaprakash Pisay

Reputation: 648

Try this

Your html has 3 div elements . First of all make sure where you want (in which Div) you want to append the tabs.Below code will append tabs in div with id="1" .Other wise it will append in all the div s.

 <script type="text/javascript">
$("a[href=#tabs-1]").click(function()
            {
        $('div#1').empty();
          for (i=0;i<mytabs.length;i++)
            {
              $('div#1').append("<br>"+mytabs[i]+"<br>");
        }
        });
 </script>

Upvotes: 1

Johan
Johan

Reputation: 35194

Quick and dirty, but does the job

$('div#1').empty();

for (i=0;i<mytabs.length;i++)
    $('div#1').append('<br/>' + mytabs[i] + '<br/>');

It will clear the div before adding content. Is this what you're asking for?

Upvotes: 2

Milchkanne
Milchkanne

Reputation: 111

Try this:

$('div').html("<br>"+mytabs[i]+"<br>");

Upvotes: -1

Related Questions