We Keep Coding

Re-opening modal after closing one, laravel

When I close my bootstrap modal, the modal opens again, then hide and the background stays darken. I am opening the modal on click on table tr. I also tried to force modal hide but it did not work. Please any help'll work.
<tr class="task-row task-row-{{$v_task->id}}" data-id="{{$v_task->id}}" data-target="#editTaskModal-{{$v_task->id}}">
<div id="editTaskModal-{{$v_task->id}}" class="modal fade editTaskModal" role="dialog" data-id="{{$v_task->id}}">
<input type="hidden" name="_method" value="put">
<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">{{$v_task->task_name}}</h4>
</div>
<div class="modal-body">
<div class="form-group">
<div class="row">
<label for="listNameInput" class="col-sm-2">Name:</label>
<div class="col-sm-10">
<input type="text" name="taskNameName" class="form-control" placeholder="Your task name..." id="taskNameInput-{{$v_task->id}}">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label for="listPriorityInput" class="col-sm-2">Priority:</label>
<div class="col-sm-10">
<input type="text" name="taskNamePriority" class="form-control" placeholder="Your priority..." id="taskPriorityInput-{{$v_task->id}}">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label for="listDeadlineInput" class="col-sm-2">Deadline:</label>
<div class="col-sm-10">
<div class="input-group datetimepicker2">
<input type="datetime" name="taskNameDeadline" class="form-control deadlineInput" placeholder="Deadline..." id="taskDeadlineInput-{{$v_task->id}}">
<div class="input-group-addon calendar-div">
<span class="fa fa-calendar-o"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success updateTaskModalBtn" data-dismiss="modal">Update</button> or
<a data-dismiss="modal" href="" class="closeTaskModalLink"> Close</a>
</div>
</div>
</div>
</div>

It seems you have an onclick event which triggers when the close link has been click to close the modal.
Referring to this:
<a data-dismiss="modal" href="" class="closeTaskModalLink"> Close</a>
There's no need to do that since there's an attribute that would close the modal.
So I suggest change your code above and do below and see how it works.
<a data-dismiss="modal">Close</a>
Update
Ok I see your JS code:
$('.editTaskModal').on('hidden.bs.modal', function () {
$('.editTaskModal').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
})
You should not include these, since what it would do is, if the modal is close/hidden it will hide the modal again. Which doesn't make sense since the modal is already close. That could be the reason why it's messing up the modal reveal/hide.
So remove that and see what happens.

Thanks, I found the problem. I had had my modal in tr and I also had triggered the modal opening on tr click and when I was trying to dismiss the modal the event repeated opening.

bootstrap modal dialog box not appearing in ASP.Net

I have a modal dialog box that is supposed to show up, the code is as follows:
<div class="form-group">
<div class="row">
<div class="col-sm-6">
<asp:Button ID="btnSimpan" CssClass="btn btn-success" runat="server" Text="SIMPAN" />
</div>
</div>
</div>
<div id="myModal" class="modal fade in" role="dialog">
<div class="modal-dialog">
<!-- Modal Content -->
<div class="modal-content">
<div class="modal-header" style="background-color:red;">
<button type="button" class="close" data-dismiss="modal">&times</button>
<h4 class="modal-title">Makluman</h4>
</div>
<div class="modal-body">
<div role="form">
<div class="form-group">
<h4 class="modal-title">Adakah Anda Pasti ?</h4>
<div class="form-group">
<div class="row">
<div class="col-sm-6">
<span class="pull-right">
<asp:Button ID="btnSubmit" CssClass="btn btn-success" runat="server" Text="Ya" /></span>
</div>
<div class="col-sm-6">
<span class="pull-left">
<asp:Button ID="Button1" CssClass="btn btn-danger" runat="server" Text="Tidak" /></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
the code simple does nothing, nothing happens when i click btnSimpan button,
like this:
The output is here
looked at many examples on the internet and they all appear the same.I'm guessing I must be missing a something somewhere, unless the error is with my code, any one any suggestions...

Why you need in class for modal? This class will be added when the modal is shown. If the backdrop is only displaying and modal doesn't, please check whether you missed to close any div tags.
Also, why you need to use an Asp.Net server side controll, such as asp:Button to call modal open function? Since you used the button control inside anchor tag which may resulting in a postback event that will reload the page.
You can either use a simple anchor tag with data-target attribute as below:
If you want to trigger the modal open function on asp:button click function, then use ScriptManager.RegisterStartupScript as below on button click event.
<asp:Button ID="btnSimpan" CssClass="btn btn-success" runat="server" OnClick="btnSimpan_Click" Text="SIMPAN" />
c#
protected void btnSimpan_Click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "", "<script>$(function () {$('#myModal').modal('show');});</script>", false);
}

How does one pop up a modal AND run a checkbox check in JavaScript/jQuery?

I need a question answered, that in all honesty is almost completely identical to this one. The only difference is that instead of displaying a JS alert, I'm trying to display a modal using Bootstrap 3.1.1.
Here's what I have for relevant code so far:
HTML
<!DOCTYPE HTML>
<form id="aForm" method="post" action="">
...
<p class="alert alert-error alert-danger" id="errorMsg" style="display:none;">You must check the checkbox!</p>
<label class="checkbox"><input type="checkbox" id="theChkbox" required="required" />Click the box.</label>
<button id="clickButton" class="btn" type="button" onclick="submitCheck('theChkbox','errorMsg');">Click</button>
...
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4 class="modal-title">Modal Title</h4>
</div>
<div class="modal-body">
<!-- Content here -->
</div>
<div class="modal-footer">
<button type="button" onclick="submitModal()" class="btn">Click Me</button>
</div>
</div>
</div>
</div>
...
</form>
JavaScript
function submitCheck(chkbox,error) {
if (document.getElementById(chkbox).checked == false) {
document.getElementById(error).style.display = "block";
} else {
window.location.href = "#myModal";
}
}
Now, the condition that the checkbox must be checked has to be there, and only when it is checked, and the button is pressed is the modal supposed to pop up.
Any advice is welcome. Seriously, this is driving me nuts! >.<

I'll guess that you have JQuery...
Here is a JSFiddle that might show you how to do so with bootstrap : JSFIDDLE
// everytime the button is pushed, open the modal, and trigger the shown.bs.modal event
$('#openBtn').click(function () {
$('#modal-content').modal({
show: true
});
});
HTML
Open modal
<div id="modal-content" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>
<input type="text" id="txtname" />
</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
</div>
</div>

How to restore data on edit form implemented by Bootstrap3 modal [duplicate]

This question already has answers here:
How to reset form body in bootstrap modal box?
(9 answers)
Closed 7 years ago.
I am working on a project which uses bootstrap3 to implement a modal containing edit form. I can display the modal and load original data into each input field by setting the value attribute. The problem is when I make some change and click Close button to cancel it. Then load this edit form again and see the content is what edited last time not the original one. I do not know how to restore it on clicking the Close button. Besides, where is the user input stored in modal?
Below is my code
<div class="span4">
<div class="panel panel-primary">
<div class="panel-heading">qawsedrftgDI</div>
<div class="panel-body">jhyuh</div>
</div>
<p>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editItem2">Edit</button>
<input type="button" class="btn btn-default" value="Delete" onclick="javascript:deleteCategoryNoneItem(2);" />
</p>
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" id="editItem2">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Make Your Change</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" method="POST" id="existingItem2">
<div class="form-group">
<label class="control-label col-md-2">Title</label>
<div class="col-md-8">
<input type="text" class="form-control" value="qawsedrftgDI" id="title2" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Content</label>
<div class="col-md-8">
<textarea rows="10" class="form-control" id="content2">jhyuh</textarea>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="changeExistingItem" onclick="javascript:modifyCategoryNoneItem(2);">Save changes</button>
</div>
</div>
</div>
</div>
</div>

See the documentation for Bootstrap modals. In the event section you can use "hidden.bs.modal" event to do some stuff after the modal is closed. So it can look like:
$('#myModal').on('hidden.bs.modal', function (e) {
$(this).find('input').val('');
});
From here you can specify "placeholder" attributes on input fields, or do some javascript in the event handler.

bootstrap modal crashing when setting value

In my website I'm trying to use bootstrap modal to ask for two values and get the middle of it. I have a button that when clicked, calculates the middle of the two values and sets a value I have declared in the modal-body code. It sets the value and then the modal disappears and the webpage reloads. Can you tell me what I'm doing wrong?
In the HTML, modal-body:
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Get Middle.</h3>
</div>
<div class="modal-body">
<form class="form-inline">
<div class="input-prepend">
<span class="add-on">$</span>
<input class="span2" id="lowSide" type="text">
</div>
to
<div class="input-prepend">
<span class="add-on">$</span>
<input class="span2" id="highSide" type="text">
</div>
<button type="submit" class="btn" onClick="enteredRange(lowSide.value,highSide.value)">Enter</button>
</form>
<form class="form-inline"> <label>middle:</label> <input id="middle" type="text" /> </form>
</div>
</div>
The javascript function to set it:
function enteredRange(x,y)
{
var low=parseFloat(x);
var high=parseFloat(y);
var middle1=parseInt((low+high)/2);
middle.value=middle1;
}
I've also done
document.getElementById('middle').value=middle1;
in place of the middle.value=middle1 and gotten the same result.
Any idea on how I could set this up correctly?

You should get rid of the <form></form> elements, since you don't need them and they cause the page to redirect via form-post. I also removed some unnecessary closing divs. I don't know if rest of your code requires them. And finally cleaned your markup a bit.
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Get Middle.</h3>
</div>
<div class="modal-body">
<div class="form-inline">
<div class="input-prepend"> <span class="add-on">$</span>
<input class="span2" id="lowSide" type="text" />
</div>
to
<div class="input-prepend"> <span class="add-on">$</span>
<input class="span2" id="highSide" type="text" />
</div>
<button class="btn" onClick="enteredRange(lowSide.value,highSide.value)">Enter</button>
</div>
<br />
<div class="form-inline">
<label>middle:</label>
<input id="middle" type="text" />
</div>
</div>
</div>
<br />
<button id="btn">OPEN MODAL</button>
Here is the working code on jsFiddle.

Two things are happening here.
When clicking the submit button, the form is actually being submitted.
If no method is specified for a form it defaults to GET.
That's why you see the error.
You need to prevent the form submit. You could simply use onsubmit to do this:
<form class="form-inline" onsubmit="return false;">
I'm not advocating in-line JavaScript so here's a slighter nicer way; add an ID to the form and attach a click handler which prevents submit:
HTML:
<form class="form-inline" id="middle-calculator">
JS:
document.getElementById('middle-calculator').addEventListener('submit',function (e) {
e.preventDefault();
},false);
e here is for "event".
The working example (JSFiddle)
One other small thing... be careful when copying from the Bootstrap documentation. Always use HTML entities for special characters; the close modal icon should be × (or ×).