Creating bootstrap buttons dynamically

Question

Is it possible to create bootstrap button dynamically? I have a textfile that have a list of items where I will make use of javascript to create an array with. That is where I would like to create bootstrap buttons dynamically with those items being the text within each button. If there is 10 items in the textfile, there would be 10 buttons created. Can someone tell me how can it be done or point me to some tutorial about it.

EDIT(Creation is possible now but not code for checking if buttons is created):

createButtons():

$(function() {
  $.ajax({
    url : 'http://localhost:8080/SSAD/type.txt',
    dataType : "text",
    success : function (filecontent) {
      var lines=filecontent.split('\n');
      $.each(lines, function() {
        if (this!='') {
            var word = this;
            word = word.toLowerCase().replace(/(?:_| |\b)(\w)/g, function(str, p1) { return p1.toUpperCase();});
            if ($('button:contains("'+word+'")').length==0) {
                var button='<button type="button" class="btn btn-block btn-inverse active" data-toggle="button tooltip" title="Click this to enable/disable viewing of'+this+'" onclick="toggleVisibility('+"'"+this+"'"+')">'+word+'</button>';
                $(".crisisButtons").append(button);
            }
        }
      });
    }
  });
});

HTML:

<button type="button" class="btn btn-block btn-inverse" onclick="createButtons">Click me!</button>

<div class="crisisButtons"></div>

davidkonrad · Accepted Answer · 2013-04-01 12:44:58Z

7

Yes. It is very easy.

textfile.txt

button1
button2
button3
button4
button5
button6
button7
button8
button9
button10

code

<div id="textfile-buttons"></div>

<script type="text/javascript">
$(document).ready(function() {
  $.ajax({
    url : 'textfile.txt',
    dataType : "text",
    success : function (filecontent) {
      var lines=filecontent.split('\n');
      $.each(lines, function() {
        if (this!='') {
          var button='<button class="btn btn-primary">'+this+'</button>&nbsp;';
          $("#textfile-buttons").append(button);
        }
      });
    }
  });
});
</script>

Result enter image description here

Of course you need to assign a click-handler to the buttons, or a link if you use <a> -tags instead of <button>.

Update

If you want to check if a button with a certain text already exists, modify the $.each loop

$.each(lines, function() {
  if (this!='') {
    //check if a button with "this" text not already exists
    if ($('button:contains("'+this+'")').length==0) {
      var button='<button class="btn btn-primary">'+this+'</button>&nbsp;';
      $("#textfile-buttons").append(button);
    }
  }
});

So, even if textfile.txt contains button1 button2 button3 button3 button3 button3 button7 button8 button9 button10

only one button3 will be created.

edited Apr 1, 2013 at 12:44

answered Apr 1, 2013 at 10:29

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

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

4 Comments

U.f.O Over a year ago

Thanks for the response. Is it possible to check if a button have been previously created so that it will not create it again. Example: buttons are created by clicking a button. So if button 2 was created before and if I click on the button to create buttons, it should not create button 2 again.

davidkonrad Over a year ago

What is not working? You must be specific. Sure you have copy-pasted correctly?

U.f.O Over a year ago

I created a button to create buttons base on the items in the textfile. It will create the same list of buttons again. I tried addingmultiple similar entry into the textfile too and it creates them too. The only difference is my var button have a button type.

davidkonrad Over a year ago

It is impossible to guess. Show your code (edit the question)

Collectives™ on Stack Overflow

Creating bootstrap buttons dynamically

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related