v-on Click not working for bootstrap modal button - javascript

Bootstrap modal is linked with a button. I want to get some data on click. But the bootstrap default event is not letting the v-on:click event to trigger. Any help will be appreciated.
<a data-id="{{ $order->id }}" data-toggle="modal" class="changeartwork" data-target="#uploadModal" #click="getData()">Upload</a>

Use: v-on:click.prevent.stop="getData()" instead. This will stop the on click bubbling up to Bootstrap and overriding it.
See here for more info: https://v2.vuejs.org/v2/guide/events.html#Event-Modifiers
Note: It's possible that .prevent would be enough but without a test case, I'm not sure so just give it a go and see which works.

Related

How to do a postback when using modal in a link

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

Marionette ItemView event handling conflict with Bootstrap dropdown

I have a Composite view creating a table, with the childView collection displaying each row. At the end of each row is a Bootstrap based button dropdown.
Clicking on the row will open a modal (working), but the event is still fired when clicking on the button dropdown, so the modal shows AND the dropdown shows underneath.
How do I prevent the clicks on the button from propagating down to the row click event, without preventing the Bootstrap hooks from also getting cut?
The standard method for handling these types of special click events (in my research and book reading), uses e.stopPropagation() on the jquery event that comes back, to prevent the event from going further, but this blocks the Bootstrap dropdown open event from triggering.
If I still call stopPropagation() when the buttongroup is clicked, then use the event object's currentTarget object and toggle the class manually, I can get the dropdown to open without conflict, but since the close button triggers are 4 layers down, I would have brute force & call .parent() 4x times to toggle the class, and that doesn't sound very sustainable or portable.
How can I have a row-click action AND open and close the dropdown using Bootstrap's built-in toggle?
ItemView
Show.Result = Marionette.ItemView.extend({
tagName:"tr",
template: "#row-template",
events:{
"click .js-delete-result": "editRow",
"click .js-edit-result": "deleteRow",
"click div.btn-group button": "openSettings"
"click": "rowClicked",
},
editRow: function(e){e.stopPropagation();alert("you trying to delete bro?!")},
deleteRow: function(e){e.stopPropagation();alert("you trying to edit bro?!")},
openSettings: function(e){
//e.stopPropagation()
//$(e.currentTarget).parent().toggleClass('open')
//e.currentTarget.button('toggle');
},
rowClicked:function(e){
e.preventDefault()
this.trigger("show:result",this)
},
}
Template
<script id="row-template">
<td class="vert-align"><%= value %></td>
<td class="vert-align"><%= notes %></td>
<td class="vert-align">
<div class="btn-group">
<button class="btn btn-xs btn-default dropdown-toggle" aria-haspopup="true" data-toggle="dropdown" aria-expanded="false">
<span class="glyphicon glyphicon-edit"/>
</button>
<ul class="dropdown-menu" role="menu">
<li>Edit</li>
<li> Delete <i class= "glyphicon glyphicon-trash"/></li>
</ul>
</div>
</td>
</script>
Random Idea: Maybe I'm thinking of the problem the wrong way, and should instead find a better CSS / jQuery selector that would cover all but the button-group; Is there a 'not' selector with CSS?
EDIT:
I tried changing the "click": "rowClicked", generic click handler to use the 'not' css selector; "click :not(div.btn-group *)": "rowClicked", but it did not have any effect; it still opens the model when the button is clicked. AFter more research, I realize that my not selector is not formatted / used correctly, but that might be largly because I'm trying to use it in a way it's not made for.
EDIT 2:
I was able to finally prevent the propagation (sort of), but in the process discovered that TWO separate clicks were being generated. I don't know why. It's because the event propagation is never stopped, and bubbles down to the root HTML element, in this case the TR.
Changing the generic click function to check what the target of the click is, and whether it's ancestors contain the .btn-group class, every time you click, but only on the button itself; if you click on just the row then it only fires once.
How can I prevent this propagation / set event listeners on the correct items?
rowClicked:function(e){
e.preventDefault()
console.log("I get called twice?!")
if($(e.target).parents('.btn-group').length > 0){
//do nothing
}
else{
e.stopPropagation()
this.trigger("show:result",this)
}
},
Just an idea, have not tested. What id you stop propagation at the button's parent? e.g. click div.btn-group ? It shouldn't interfere with default bootstrap behaviour yet it stops it from bubbling to the row itself.
try this;
rowClicked:function(e){
if($(e.currentTarget).is('td')){ //or e.target will also do
this.trigger("show:result",this);
}
},
After a ton of googling and testing my code, I think this may be the best approach for now. It does not really address the core of my question, but since a generic click event handler was inserting itself before bootstrap could get to it, changing the focus of the click to something more specific seems to have done the trick.
Thanks to #Pawan and #squall3d for some pointers in this direction, but I am still looking for an answer on how to better propagate / setup / control event listeners to prevent conflicts with other libraries in the future.
However, to get it working for now, I changed the generic click to "click td": "rowClicked". td is almost the base layer, but specific enough so it won't interfere with the button events. I no longer needed the button click handler, (we want bootstrap to do it), so that was removed: "click div.btn-group button": "openSettings"
Show.Result = Marionette.ItemView.extend({
tagName:"tr",
template: "#row-template",
events:{
"click .js-delete-result": "editRow",
"click .js-edit-result": "deleteRow",
"click td": "rowClicked",
},
editRow: function(e){e.stopPropagation();alert("you trying to delete bro?!")},
deleteRow: function(e){e.stopPropagation();alert("you trying to edit bro?!")},
rowClicked:function(e){
e.preventDefault()
this.trigger("show:result",this)
},
}
It is worth noting that I did add additional code to the rowClicked function, to prevent opening the modal if the button dropdown was being shown and you clicked on a row accidently when clicking outside the dropdown to close it. I found this to be a better user experience.
rowClicked:function(e){
if($("#edit-btn").hasClass("open")){
//also do nothing - the dropdown is open
}
else{
e.stopPropagation()
e.preventDefault()
this.trigger("show:result",this)
}
}
and added an id to the btn-group for jquery selection
<div class="btn-group" id="edit-btn">
this works because Bootstrap adds an .open css class to trigger showing the dropdown html.

Bootstrap modal dialog button click event triggering on modal open

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();
});

Bootstrap Modal buttons do not respond to click

I am having a mare with Bootstraps buttons in a modal popover. Whatever I do I cannot get the click event to fire. Latest Bootstrap, jQuery 1.7.1.
Inside the modal I have a footer with buttons
<div class="modal-footer">
Cancel
Don't Save
</div>
And my JS that is not working (click is never fired)
$("#navigate-away .cancelBtn").on("click", function(event){
console.log('Click.');
$('#navigate-away').modal('hide');
});
I can prove it works by using hover instead of click (hover fires ok)
$("#navigate-away .cancelBtn").on("hover", function(event){
console.log('Click.');
$('#navigate-away').modal('hide');
});
It seems the click event is being swallowed internally? I see all over SO people using this exact method with no problems. What simple thing am I missing?
This did indeed to turn out to be a conflict with another library. It was a shocker to debug, I ended up getting it relatively simply using Allan Jardine's Visual Event bookmarklet at http://www.sprymedia.co.uk/article/Visual+Event . Thanks Allan you saved my baconator.
Try adding preventDefault to your click event, and changing to use the delegate style of binding:
$("#navigate-away").on("click", ".cancelBtn", function(event){
event.preventDefault();
console.log('Click.');
$('#navigate-away').modal('hide');
});

How to close Bootstrap popovers (or any item in general) when a user clicks away from it?

I'm using the popover object from Twitter's Bootstrap library in manual mode and I was wondering how I should go about closing the tooltip when the user clicks away from it.
Here is my HTML:
<a id="stats-bar" rel="popover" data-placement="top" data-trigger="manual" data-title="Title here" data-content="Hello everyone.">Test</a>
and my JavaScript:
$('#stats-bar').click(function(e) {
$(this).popover('show');
});
How can I hide the popover when the user clicks anywhere but the popover itself? I thought of using a fixed transparent div behind the popover and set its click event but I'm not sure that's the best way.
I ended up wiring up to the document click event and hide any tooltips at that point
$(document).click(function (e)
{
// check the parents to see if we are inside of a tool tip. If the click came
// from outside the tooltip, then hide our tooltip
if ($(e.target).parents('.tooltip').length == 0) $('[data-original-title]').tooltip('hide');
});
If you are using a manual trigger option and wiring up to the click event to show the tooltip you will need to call e.stopPropagation() to prevent the document click event from firing when showing the tooltip.
I opted to use a fixed transparent div behind the popover and set its click event as this seems like the most robust and simple solution.
What about an generic click event listener that triggers where ever you click within the body? Check out this post, it looks similar to what you're trying to achieve.
https://stackoverflow.com/a/2125122/1013422
You would use this to close the actual popover
$('#stats-bar').popover('hide')
I would only define the function when the popup event is run and then remove it once you've closed the popup, that way you're not constantly listening for click events.

Categories

Resources