We Keep Coding

Bootstrap modal is blocked

I have written a code to show popup using a bootstrap modal.
It worked, but all element is blocked. I don't know what wrong with my code.
Here is my code:
<div id="add_data_Modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add data</h4>
</div>
<div class="modal-body">
<form method="post" name="insert_form" id="insert_form">
<label>Số thuê bao</label>
<input type="text" name="name" id="name" class="form-control" />
<br />
<label>Speed number</label>
<input type="text" name="spd_number" id="spd_number" class="form-control" />
<br />
<label>Dial number</label>
<input type="text" name="dial_number" id="dial_number" class="form-control"/>
<br />
<input type="submit" name="insert" id="insert" value="ADD" class="btn btn-success"/>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

You can solve your issue,following this link.
bootstrap modal examples
As if have different css files,check that css files also.because some times you added classes or ID can be override.

Please check your code, I think the cause may be due to your code redundant or missing a close tag. Usually missing or excess div tags.

Bootstrap document indicate: Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements.You’ll likely run into issues when nesting a .modal within another fixed element.
If you realy can't find error, don't know whether parent container of id="add_data_Modal" against the Bootstrap's rules. Try below code:
$('#add_data_Modal').appendTo('body');
Using jquery to place your modal HTML to body. In case you can sure your modal HTML in a top-level position.
Update--------
If someone using Angular this works - sort of. But... this has a nasty side effect as well: Because Angular re-renders the view every time it's accessed, a new #add_data_Modal element is created each and everytime.
This behavior causes duplication of the the elements and on occasion causes the wrong data to come up.
Fix this by clearing out the modal before append to body like below:
$('#"body>#add_data_Modal').remove();
$('#add_data_Modal').appendTo('body');

Textarea above bootstrap modal doesn't get focus

I have a chat, which has a textarea part for typing. Works good.
I open a modal, the textarea still remains above, due to z-index. However it doesn't get focus when I click with the mouse. Looks like it's disabled.
It doesn't work also if I open the chat after I opened the modal.
Any ideas?
The chat window has absolute positioning.

For some reason that I don't know, Boostrap don't permit do that.
I make some think like this using Bulma ( a pure css lib ):
<div class="container" id="app">
<div class="modal">
<div class="modal-background"></div>
<div class="modal-content">
<!-- Any other Bulma elements you want -->
<table>
<tr>
<td>Jhon</td>
<td>Hi</td>
</tr>
</table>
<input type="text" class="input" />
</div>
<button class="modal-close"></button>
</div>
<textarea style="position:absolute;z-index: 9999" name="" id="" cols="30" rows="2"></textarea>
<br /><br /><br />
<p>
<button class="button" id="showModal">Show</button>
</p>
</div>
OBS: Bulma don't have JavaScript code, and you should make the transition of classes yourself.
JavaScript:
$("#showModal").click(function() {
$(".modal").addClass("is-active");
});
$(".modal-close").click(function() {
$(".modal").removeClass("is-active");
});
http://codepen.io/edgardleal/pen/GWWKoO?editors=1010

getelementbyid().onclick works for one button but doesn't work for another

I have five buttons in my html page. I used to create four of them by javascript and one with html, but after various changes decided to create all of them with html. The problem is that previously all of my buttons worked just fine, but after the change the ones previously made by javascript don't work anymore. I use getElementById("").onclick = function() for all of the buttons, yet only one of them works. (I only made the functionality for one of the four buttons because I encountered this problem)
Here is the javascript for both of the buttons. button1 is the one that doesn't work, I even tried with only having console.log() inside the function, but it didn't do anything.
document.getElementById("button1").onclick = function(){var element = document.getElementById('presetPicker');element.value = this.value;providerManager.refreshProviders();};
document.getElementById("DownloadXml").onclick = function (){createReport('http://192.168.0.101:8080/rest/v1/excel-reports/run/XLT_211607',verifyReport)};
Here is the html part of the page
<body>
<div id="container1">
<header>
<img src="http://www.jamk.fi/globalassets/tietoa-jamkista--about-jamk/materiaalit-esitteet-asiakaslehdet-ja-logot/jamkin-logot/jamk_fi--tunnus/jamkfi_tunnus_sininen_suomi.png" alt="Jamk logo" style="width:50%;height:50%;margin-left:25%;">
</header>
<div id="container2">
<div id="textContainer">
<h2>Fosfaattifosfori PO4-P [mg/l]</h2>
</div>
<div id="Graafi"></div>
<div class="input">
<div id="buttonContainer1">
<ul id="buttonList" class="timeForm">
<input id="button1" type="button" class="buttonGroup1" value="Previous day"
><input id="button2" type="button" class="buttonGroup1" value="Previous week"
><input id="button3" type="button" class="buttonGroup1" value="Previous month"
><input id="button4" type="button" class="buttonGroup1" value="Previous year">
</ul>
</div>
<div id="buttonContainer2">
<div id="list">
<ul id="downloadList">
<input id="DownloadXml" type="button" value="Download" />
</ul>
</div>
<div id="download_div">
<img id="loading_gif" src="/modules/dashboards/web/public/359.gif" alt="Loading" style="display:block;">
</div>
</div>
<iframe id="download_frame" style="display:none;"></iframe>
</div>
<div class="testi">
<select id="presetPicker" class="testi" ></select>
</div>
<footer>
</footer>
</div>
</div>
</body>

By adding an option <option value="Previous day">Previous day</option> to the select, your code works again. So either that is the problem, or the function providerManager.refreshProviders();, which I can't check, is giving you issues.

Can you please provide a jsFiddle with the example?
I think you are loading the script before the DOM elements are drawn.
Maybe a $(document).ready() should resolve.

I found the problem. Looks like there was no problem with the code itself, but I was using Firefox Web console to debug, and for some reason it didn't register any console.log() commands. After debugging with Browser console I found the debug data.
Feeling quite ashamed now
EDIT: should I remove the question or let it stay here to remind every starting developer to doubt their debug tools?

Can I display Javascript Content HTML

I'm trying to get a hidden form CLASS to show onclick of a class.
Heres my code:
<div class="product">
<input type="submit" class="clickme" />
<script>
document.getElementsByClassName('clickme')[0].onclick = function(){
document.write('<form class="etc"><label>Etc</label><select></select>');
};
</script>
</div>
<div class="product">
<input type="submit" class="clickme" />
<script>
document.getElementsByClassName('clickme')[0].onclick = function(){
document.write('<form class="etc"><label>Etc</label><select></select>');
};
</script>
</div>
<div class="product">
<input type="submit" class="clickme" />
<script>
document.getElementsByClassName('clickme')[0].onclick = function(){
document.write('<form class="etc"><label>Etc</label><select></select>');
};
</script>
</div>
The forms inside the scripts are styled.
I want the click to show only the content in the script, however nothing is working, Alerts work fine - So my question is can i use HTML in Scripts? And if so - based on what you see in this code, how can i do that?

I know this is not really what you expect as answer but I believe you can pretty much what you are trying to do with jquery click and jquery html.
Hope this helps

using multiple id in jquery

I made little jquery script for checking if input box value bigger than 5 .but I have 2 tag with an id and only one of them works.
<div id="register">
<form id="register">
<input id="first" type="text" /> <a id="first" ></a> <br />
<input id="second" type="text" /> <a id="second" ></a>
</form>
$('input').keyup(function(){
if($(this).val().length<5)
{
$('a.first').text("Please fill");
}
if($(this).val().length<5){
$('a.second').text("Please fill");
}
});
But it shows only first <a id="first"></a> tag. Second tag not visible

You just need to change your <a>'s to use classes:
<div id="register">
<form id="register">
<input id="first" type="text" /> <a class="first" ></a> <br />
<input id="second" type="text" /> <a class="second" ></a>
</form>
</div>
The jQuery selectors you're using:
$('a.first')
$('a.second')
Are looking for an <a> with a class. If you were trying to look for an <a> with an id, they would need to be as follows:
$('a#first')
$('a#second')

change the ID of register , its not correct to have two identical ID's in the same page ,
after that everything should be working fine
cheers

Agreed with not having duplicate id's. Easier to keep track of, and cleaner code. My two cents :), after having to refactor a chunk of code at work recently that had duplicate id's that failed to work in IE. Lesson learned!