I am trying to do a postback when clicking on a link that opens a popup window modal. I have tried __doPostBack() with no luck. Once I remove the two attributes data-target="#Modal" data-toggle="modal" PostBack works but my popup window will not work of course.
link
How can I keep my modal and do a postback when opening it?
Please help this newbie
I think you can use an event when your modal is opened, like this:
$('#NotesModal').on('show.bs.modal', function (e) {
// do something...
});
Removing the attributes data-target="#Modal" data-toggle="modal" your anchor will not show anymore the modal. And this is normal.
In this case you can add a click event listener to your anchor so that after dopostback you can show your modal with:
$('#OpenNotes').on('click', function(e) {
do your postback....
$("#Modal").modal('show');
});
For details see the documentation
Related
In either Javascript or HTML, is there a way to disable all user input except for a selection of keyboard presses? For example, if I trigger an error that shows a popup error message, is there a way to block any other user input into the DOM in the backround until the user has dismissed the popup using the Enter key?
Thank you all in advance!
If I understand you correctly, you might want to disable keyboard and mouse activity beyond the modal when opening like with this related question. Here is the summary of the options included:
If you opening the modal by js use:
$('#myModal').modal({backdrop: 'static', keyboard: false})
If you are using data attributes, use:
<button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">
Launch demo modal
</button>`
I am having the following issue with click/touchstart event on Android (as far as I know only happening on Android),
1. the element triggers a modal window.
2. one of the buttons/links inside this modal gets triggered instantly without giving the user the option to make a choice.
It is of course required for the visitor/user to view the modal content before being redirected to a link to another page from one of those buttons.
I believe this is due to the 'touchstart' event bind to this div, which I am using since click events on divs for touch devices don't work.
I am using jQuery to make this work, and on iOS there doesn't seem to appear any issue.
$(document).on('click touchstart','.mydiv', function(e) {
e.preventDefault();
// open modal
});
Any suggestions please.
Try this:
$(.mydiv).on('touchstart', function(e) {
e.preventDefault();
// open modal
});
cheers
I'm implementing a plugin to load youtube videos in a modal (https://appleple.github.io/modal-video/). The problem is with the cross button in the modal.
If I do not refresh the page, click the cross button on the modal and then click on the video again, the click event fires twice instead of once ie. I get two modals.
My JS for running this is fairly simple:
HTML code:
<a id="runVideo" data-video-id='XXXXXXX' class="white">
<span class="glyphicon glyphicon-play-circle"></span> Want to know how we do that? Watch our video.
</a>
JS code:
$( "#runVideo" ).click(function(event) {
event.preventDefault();
event.stopPropagation();
console.log("mydick");
$("#runVideo").modalVideo({channel:'youtube'});
});
So, if you ever want some click event to happen only once, we gotta unbind the click handler everytime it is clicked. So, something like this worked out
$('#runVideo').bind('click', function() {
$(this).unbind('click');
alert('Clicked and unbound!');
$("#runVideo").modalVideo({channel:'youtube'});
});
I am working on an application and need to open a modal, have the user fill in some details and save them once they click the modal button i have designated. I have used jQuery on to bind a click event for the button. problem is the click event is triggered when the modal opens.
Relevant parts of modal:
<div class="modal-footer">
Close
Save Event
Where i bind the event:
$('#save-event').on(
'click',
function(evt)
{
console.log('triggered');
}
);
The console shows 'triggered' when i open the dialog. I open the dialog through:
{% trans "Event also occurs on" %}
Its a Django app so the curly braces. Any ideas what i could be doing wrong or is there another way to execute some logic once the user clicks the relevant button?
You might be having 2 elements with the same id in the html and you are getting the event triggered when you are clicking on the other element.
Try adding the following to your jQuery code:
evt.stopPropagation();
Sorry, should clarify, add this to the code triggering the modal opening.
Edit: since you don't have direct access to the modal code, try the following in your jQuery:
$('#add-event-modal').on('click', function(evt) {
evt.stopPropagation();
});
The title is a bit confusing but here's what I want to do -> There's a picture. When you click on it, a lightbox pops up (I already have that event). However, if you right click it and open in a new tab, I want a page to appear. Instagram has something similar to what I'm looking for. <a href=""> doesn't work - it executes both (launches the lightbox and redirects). How do I do that? Is there a way to cancel the href? Thanks.
EDIT: Here's a visual: http://jsfiddle.net/9VFGS/. In that case, I only want the alert() to be invoked when I click on it, but when I open it in a new tab, I want it to navigate to google.com.
Using event.preventDefault() (doc) in the event handler for triggering your lightbox will prevent the link from executing and changing your window location. Right-click context actions should still work, though, because they don't trigger click events.
$( '#my-link' ).on( 'click', function( event ) {
event.preventDefault();
// do my lightbox stuff here
}
Yes, set href="..." to href="#".