I have this code that when icon-edit span is clicked, it fires an action that opens a modal, however, at the same time, the click propagates to the view below it (personView). I want the action to execute and stop the propagation.
The only solution I can think of is to make the icon-edit its own view and stop the click propagation by returning false in method click. Is there any other way of doing this without making another view?
HBS:
{{#view Blocks.PersonView}}
<span class="inline pull-right icon-edit" {{action 'modalOpen' 'modifyPersonPopup' 'modifyPerson' this}}></span>
<p class="inline pull-left person-name">{{firstNameDelayed}}</p>
{{/view}}
Also you can add bubbles=false parameter to action tag. See the API documentation for how to configure event propagation.
Try to modify the action:
modalOpen: function {
//code of your action
return false;
}
This worked for me in a similar situation
The octane way of achieving this would be using the stop-propagation helper from the ember-event-helpers addon.
<span class="inline pull-right icon-edit" {{on "click" (stop-propagation (queue this.modalOpen this.modifyPersonPopup this.modifyPerson))}}></span>
Related
Is there any way to create a button inside html form that wouldn't call an action specified in "Html.BeginForm"? I want to use it only for adding some elements to form by javascript. I have a different button that should call an action.
#using (Html.BeginForm...
{
...
<button id="addRow" class="btn margin-top-10 margin-bottom-10">addRowt</button>
...
}
The "addRow" button I'd like not to call any action.
Yes. You can listen to the click event of this button and prevent the default behavior. Assuming you ave jQuery library loaded in this page, you may use jquery preventDefault method to do this.
$(function(){
$("#addRow").click(function(e){
e.preventDefault();
// do other things as needed (ex : add a row to ui)
});
});
You can use an anchor tag that looks like a button if you are using bootstrap Then you put your JavaScript inside the tag like below:
<a href="#" class="btn btn-default" onclick="YourMethod()" >New Button</a>
I am not sure what is going wrong here, so please help me SO God :)
I am setting up MagnificPopup within a Meteor's application, so it responds to clicks on the .popup_trigger classed links, as follows :
// POPUPS
L.P_CONT.magnificPopup({
delegate: 'a.popup_trigger',
type: 'inline',
prependTo: "#page_content",// That is where Meteor puts his
});
Here is an exemple of some template implementing a .popup_trigger link, which is working great, meaning that the popup triggers correctly :
<template name="booking">
<p>{{_ 'I have a '}}<a class="popup_trigger" href="#promocode">{{_ 'promocode'}}</a></p>
<div id="promocode" class="mfp-hide">
<h1>{{_ 'Voucher'}}</h1>
<form id="promocode_form">
<input type="text" name="promocode" placeholder="{{_ 'Promocode'}}"/>
<input id="cancel" type="submit" name="cancel" value="{{_ 'Cancel'}}"/>
<input type="submit" name="submit" value="{{_ 'Submit'}}"/>
</form>
</div>
</template>
You may have noticed the prependTo: "#page_content" option I am passing to magnificPopup. This tell him to prepend the popup element to #page_content, which is the enclosing element of my Meteor templates, the one on which view event listeners are set. Here is my layout, just so you believe me :
<template name="layout">
<div id="page_container">
<div id="page_content">
{{> yield}}
</div>
</div>
</template>
Finally, this is how I am trying to catch the click on the Cancel button, which sadly isn't called. Clicking on #cancel triggers the form as if the event wasn't caught by Meteor :
"click #cancel": function(event, tpl) {
event.preventDefault();
console.log("Canceled");
},
However, I am seeing this event listener on the #page_content element, and the popup content is correctly enclosed within #page_content.
Here are the relevant HTML screenshots and console output :
HTML before popup opens :
HTML after popup opens :
Event listeners set on the #page_content element
I see very well that the popup is moved when opened/closed, but I don't get why this is preventing the events from being caught up properly, as the event listener is set correctly on #page_content, and that the popup content remains within the scope of #page_content. My understanding is that events coming from the popup should still bubble up until reaching #page_content, and be caught by Meteor's event listeners.
I should add that if I don't enclose the form within a magnificPopup, the events are caught properly by Meteor. Any explanation as to why this is not happening? Any suggestion is most welcome, really.
In the meantime, I'll have to bypass Meteor's logic to set up popup's listeners.
EDIT
This is even more troubling but... if I add the class mfp-close to the clicked element, and I set my listener on the .mfp-close class, everything work as expected...
I have a button which when i click it i would like it to click a hidden action link.
The click on the action link is not doing anything. but if i click the action link my self it works, just not when i make jquery click it?
function myClickFunction() {
$('#CloseLink').click();
//$(document).on("CloseLink", "click", function())
}
<input id="btnClose" type="button" value=" Close " onclick="myClickFunction()"/>
<div style="visibility:hidden">
#Html.ActionLink("Close", "APClientIndex", "Home", null, new { id="CloseLink", #class = "btn btn-primary niceButton" })
</div>
Plain html:
<input id="btnClose" type="button" value=" Close " onclick="myClickFunction()">
<div style="visibility:hidden">
<a class="btn btn-primary niceButton" href="/Home/APClientIndex" id="CloseLink">Close</a>
</div>
If what you want is to simulate the user clicking an anchor tag, I don't think that is possible with javascript
What you can do is read the anchor tag's href attribute and change the window location manually:
function myClickFunction() {
var href = $('#CloseLink').attr("href");
window.location.href = href;
}
If I understand what you are trying to do is to fire the click action by javascript?
With $('#CloseLink').click(); you are not firing the click event, you are binding an action to the click, but you don't have any function inside like $('#CloseLink').click(function(){...});
So if you want to fire the click event you need to do $('#CloseLink').trigger('click');
$('#CloseLink')[0].click()
Is what i used as suggested by tewathia in the comments section.
The jQuery click method fires the onclick event of that element. In order to simulate a click on an anchor a tag, you need to run the click method of the DOM element itself.
I have this code :
<button type="button"
data-toggle="modal" id="testing"
class="btn btn-icon btn-primary glyphicons circle_ok"
data-target="#myModal"><i></i>
</button>
I'd like simulate a click via a function executed when the page is loaded.
How can I do this ?
Thanks,
Use the shorthand method .click()
$('your-button-selector').click()
or .trigger()
$('your-button-selector').trigger('click')
To simulate a click event, it will run all registered click event handlers, but may/may not trigger the default action
.trigger()
You can use .trigger('click');
You can add following code to your page
<script type="text/javascript">
$(function(){
$('button#testing').click()
});
</script>
Here is a working demo
<p>VERIFY</p>
I am using the above code which is a jQM button with the onClick() set. The onclick is called and doSomething() is executed but after that, jQM shows the "error loading page" message.
How can I supress the error? In this case I want the jQM button but don't want it to change page.
Thanks
Since you are using jQuery I would recommend to use jQuery to wire up your events as well. With that being said using e.preventDefault(); and e.stopImmediatePropagation(); should stop jQuery mobile from performing the default action on the <a/>.
$("#verify").click(function (e) {
e.stopImmediatePropagation();
e.preventDefault();
//Do important stuff....
});
Update
The better way to use your existing markup would be to simply add rel="external" to your <a/> And your onclick should behave correctly.
<p>
VERIFY
</p>
This will work since jQuery Mobile will treat the link as a normal <a/> tag and return false will simply stop the default action.
I think your problem is that you have multiple actions on your button and are using a anchor tag. When clicking the button you're invoking the page to transition to index.html and a onClick event.
<a
href="index.html" <-- go to index.html
data-role="button"
data-icon="arrow-r"
data-iconpos="right"
data-theme="a"
onclick="doSomething(); return false"> <-- Click event
VERIFY
</a>
Might try (might need to remove/add some other attributes)
<input
type="button"
name="verify"
id="verify"
data-icon="arrow-r"
data-iconpos="right"
data-theme="a"
value="VERIFY" />
and now add a click event
$('#verify').click(function() {
alert('Button has been clicked');
});
Live Example: http://jsfiddle.net/vRr82/2/
I think you should be append data-ajax="false" inside anchor tag..
because in jQuery mobile the page transition is done by AJAX, and for page transition
it must be false..
Use Jquery live Function. That is prety much useful for me