javascript - Creating bootstrap buttons dynamically -


is possible create bootstrap button dynamically? have textfile have list of items make use of javascript create array with. create bootstrap buttons dynamically items being text within each button. if there 10 items in textfile, there 10 buttons created. can tell me how can done or point me tutorial it.

edit(creation possible not code checking if buttons 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 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> 

yes. 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 need assign click-handler buttons, or link if use <a> -tags instead of <button>.


update

if want check if button text exists, modify $.each loop

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

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

only 1 button3 created.


Comments

Popular posts from this blog

Delphi XE2 Indy10 udp client-server interchange using SendBuffer-ReceiveBuffer -

Qt ActiveX WMI QAxBase::dynamicCallHelper: ItemIndex(int): No such property in -

Enable autocomplete or intellisense in Atom editor for PHP -