I am trying to detect when the bootstrap confirmation is opened and closed but I am having no luck with detecting this. I am using an <a> tag to trigger the confirmation (code down below), and trying to detect this is jquery.
<a class="delete" data-toggle="confirmation" title="" data-original-title="Delete Row?">
<i class="fa fa-trash-o"></i>
</a>
I originally tried to detect the button click but failed in doing so. It would be better if the confirmation is able to trigger a function once opened and closed.
You may you "data-on-confirm" and "data-on-cancel" attributes to register your callbacks for those particular events.These are given in the documentation provided by the bootstrap confirmation plugin.
Eg
<button class="btn btn-default" data-toggle="confirmation" data-singleton="true" data-on-confirm="myAcceptFunction" data-on-cancel="myRejectFunction">Confirmation 1</button>
Use events, e.g.:
var modalIsShown = false;
$('#myModal').on('shown.bs.modal', function () {
modalIsShown = true;
});
$('#myModal').on('hidden.bs.modal', function () {
modalIsShown = false;
});
http://getbootstrap.com/javascript/#modals-events
I ended up finding my answer thanks to the other answers getting me there. The code simply looks at the trigger button which in my case has a class name of delete and then looks for a <div> with the class name popover to see if it is visible or not.
if ($(".delete").next('div.popover:visible').length){
//do something
}
Related
I try to make a confirm box to inform user if they really want to show password field in table. But it not working when click Confirm.
Here's my code:
HTML
<span onclick="myFunction()" class="fa fa-fw fa-eye fa-eye-slash field-icon toggle-password"></span>
<span style="display:none;" id="password-field">123456</span>
JS:
function myFunction() {
if (confirm("Are you sure you want to show your password on the screen?)) {
$(".toggle-password-<?=$model->id?>").click(function() {
$(this).toggleClass("fa-eye-slash");
});
$(document).ready(function(){
$(".toggle-password-<?=$model->id?>").click(function(){
$("#password-field-<?=$model->id?>").toggle();
});
});
} else {
//do nothing
}
}
Please help me with this.
Thank you!
here's an example for fixed code:
https://codepen.io/mitni455/pen/YzwJwNL?editors=1010
I have removed the PHP specific stuff.
function myFunction() {
if (confirm("Are you sure you want to show your password on the screen?")) {
$('#password-field').show();
} else {
$('#password-field').hide();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="myFunction()">
My Function
</button>
<span style="display:none;" id="password-field">
123456
</span>
OK a few things here:
When you click confirm you are simply adding 2 more click handlers and a document onload handler (it's also a memory leak).
The code $(".toggle-password-<?=$model->id?>").click adds another (redundant) click handler to the .toggle-password-123 button
You never made any call to show/hide or change the display value for the span#password-field... this is resolved in the refactored code above
You missed the closing quotation in the confirm("Are you sure you want to show your password on the screen?")
$(document).ready won't fire and is redundant because the document will have already loaded by the time you click the button. So you can remove that.
Here's what you did: on confirm:
add a click handler to .toggle-password-{id} (which is the
button you just clicked);
add a document onload event handler (to a document already loaded);
once the document has loaded (will never fire), add another click handler to .toggle-password-{id};
Finally, when that is clicked THEN toggle the password field
<button onclick="myFunction()" class="fa fa-fw fa-eye fa-eye-slash field-icon toggle-password">Click me</button>
<span style="display:none;" id="password-field">123456</span>
<script type="text/javascript">
function toggledisplay(elementID)
{
(function(style) {
style.display = style.display === 'none' ? '' : 'none';
})(document.getElementById(elementID).style);
}
function myFunction() {
if (confirm("Are you sure you want to show your password on the screen?")) {
toggledisplay("password-field");
}
}
I used the button tag to be able to see where to click, when replicating your code.
Then, added the function toggledisplay(elementID) to toggle the display style whenever the confirm is True.
I have a button on my page that when clicked should redirect to another view based on an Action in my controller, but when clicked it does not do anything... I have the same html syntax with another button on another view and it works.... so here is the broken button:
<input type="button" class="btn btn-info btnArchive clearButton" value="Clear Search" onclick="location.href='#Url.Action("ClearArchiveFilter","ApplicantRecords", new { area = "" })'" />
Here is the same button but with a different action on another view of mine that works:
<input type="button" class="btn btn-info indexBtns" value="Clear Search" onclick="location.href='#Url.Action("ClearFilter","ApplicantRecords", new { area = "" })'" />
However, if instead of using inline onclick events for the broken button I used JS as a workaround and it works fine:
<script type="text/javascript">
$(document).ready(function (e) {
$('.clearButton').click(function (e) {
location.href = '#Url.Action("ClearArchiveFilter","ApplicantRecords")';
});
});
</script>
Here is the ClearArchiveFilter method in my ApplicantRecords Controller:
public ActionResult ClearArchiveFilter()
{
Session.Clear();
return RedirectToAction("Archive");
}
Just a quick method to clear a session.
So my question, is that why doesn't my button work? Am I missing something really small? It is just striking me as weird that one button with the same syntax works and the other doesn't... I will stick with the JavaScript method if this can't be explained/resolved.
I have checked spelling multiple times so that is not the issue (at least I hope not and I overlooked a spelling mistake multiple times)
Thanks in advance.
I want to use bootstrap modal in my page. At the same time, when modal trigger button is clicked, I want to do something in javascript also. It's not working.
<button type="button" class="btn btn-primary center-block" id="start_quiz" data-toggle="modal" data-target="#myModal">
Start Quiz
</button>
The button on clicking lauches modal but unable to call:
$('#start_quiz').click(function(){
alert("hello from javascript");
});
How can I achieve both results at the same time? Please help me.
Remove the data-toggle="modal" data-target="#myModal" attributes from the button, so that it doesn't open the modal.
Then check that the "hello from javascript" displays - it should do.
Then open the modal from javascript code instead, add this line below your alert:
$('#myModal').modal('show')
This should now make the alert, then show the modal. You can always reverse the two if you want the modal shown first.
Second option, hook into the shown method and write your javascript there:
$('#myModal').on('shown.bs.modal', function () {
// alert here
})
I'm using Ladda UI for bootstrap.
Using jquery I try to disable a button after the user clicks on it.
I tried to use ajax OnComplete / OnSuccess / OnBegin , but no avail - the button remains enabled.
If I change the markup manually on firebug - I can disable it. Also note the js fires for sure.
Here's the markup:
<a id="icalSync" href="/iCal/iCalCreatedLinks" data-ajax-method="GET" data-ajax-complete="AjaxOnCompleteDisableButton" data-ajax="true" data-style="expand-left" class="btn ladda-button">
<span class="ladda-label">Sync iCal</span>
<span class="ladda-spinner"></span>
</a>
Here's the js function:
function AjaxOnCompleteDisableButton() {
$("#icalSync").attr("disabled", true);
}
I'd appreciate any help on this.
disable is not valid with anchor tags, so you could try this:
function AjaxOnCompleteDisableButton() {
event.preventDefault();
}
or change your could your a#icalSync to a button and use your code
<button id="icalSync" href="/iCal/iCalCreatedLinks" data-ajax-method="GET" data-ajax-complete="AjaxOnCompleteDisableButton" data-ajax="true" data-style="expand-left" class="btn ladda-button">
<span class="ladda-label">Sync iCal</span>
<span class="ladda-spinner"></span>
</button>
or you could add the class disabled, used in bootstrap:
function AjaxOnCompleteDisableButton() { $("#icalSync").addClass("disabled"); }
Your "button" is not truly a button. You need to approach it differently. Either make it a <button> or in AjaxOnCompleteDisableButton assign it a class that will make it look like it's disabled (say opacity: 0.5) and ignore the triggering events on it.
I have a modal window but I want to set up a close function so that when the user clicks on the "button", it will close the modal window. Does anyone know how this can be achieved?
I have a link to the application so you can view it here
Below is the javascript code where it shows the function of opening the modal window and the setup function of where I want to place the code to close the modal window:
function plusbutton() {
$(".previouslink").modal();
return false;
}
function closewindow() {
return false;
}
Below is the form code where user clicks on the plus button and it displays the content within the "previouslink" div tag:
<form id="QandA" action="imageupload.php" method="post">
<h1>CREATING QUESTIONS AND ANSWERS</h1>
<table id="plus" align="center">
<tr>
<th><a onclick="return plusbutton();">
<image src="Images/plussign.jpg" width="30" height="30" alt="Look Up Previous Question" class="plusimage"/>
</a><span id="plussignmsg">(Click Plus Sign to look <br />
up Previous Questions)</span> </th>
</tr>
</table>
<div class="previouslink">
<h1>PREVIOUS QUESTIONS</h1>
<button type="button" id="close" onclick="return closewindow();">Close
</button></div>
</form>
Your Live-Example shows me, that you seem to be using SimpleModal
From the documentation:
CLOSING THE DIALOG
SimpleModal will automatically bind the close
function (using the onclick event) to any element inside the dialog
with the simplemodal-close class. In addition, you can
programmatically close the currently opened dialog by calling
$.modal.close();
Means: In your closeWindow()-Function, you could simply enter the line:
$.modal.close();
and be done.
I've used this jQuery reveal modal plugin on several sites and it has worked great for me.
Alternatively, you should check out jQuery Impromptu. I love the tour feature myself, but the modals are more likely what you are trying to accomplish.
The code from both examples will probably lead you to what you are specifically looking for :)