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> '; $("#textfile-buttons").append(button); } }); } }); }); </script>
result
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> '; $("#textfile-buttons").append(button); } } });
so, if textfile.txt contains button1 button2 button3 button3 button3 button3 button7 button8 button9 button10
only 1 button3 created.
Comments
Post a Comment