jQueryMobile add click event to a button instead of changing page - javascript

<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

Related

Creating button not calling any action inside form

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>

Meteor / Magnific Popup : Catching popup DOM events

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...

Stop click propagation from Ember action?

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>

Unable to Simulate Click using JQuery

I have a link for downloading Audio Files. I wish to keep it hidden and allow the user to call it using a button. But somehow I am unable to trigger the click event.
Here is HTML:
<a class="APopupDown" data-icon="home" id="DownloadFile" href="http://yahoo.com/abc.mp3" download="My File Name">Download File</a>
<button data-icon="home" href="#" onclick="DlMsg()">Download</button>
And here is the trigger.
function DlMsg()
{
alert("I am here");
$('#DownloadFile').trigger('click');
}
A Jfiddle example is here
As you can see the diredct link works but the button doesn't. Any idea what I am doing wrong?
Thanks
----- UPDATE -------
I have made the change as per Jai's suggestion. However, it now starts playing the Audio instead of downloading, whereas what I want is to use HTML5's download functionality. Here is the jsfiddle link
Got the answer. Just see this fiddle http://jsfiddle.net/EWQ6n/512/
Source:
<a class="APopupDown" class="test" data-icon="home" id="DownloadFile" href="http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3" download="My File Name">Download File</a>
<button data-icon="home" id="btnDownload">Download</button>
Script:
$("#btnDownload").click(function(e){
$("#DownloadFile").get(0).click();
});
I just used like this
$("#DownloadFile").get(0).click();
to trigger the anchor click event.
You need to have a click event bound to that element first:
$('#DownloadFile').click(function(e){
e.preventDefault();
window.location.href = this.href;
});
then your trigger will work:
$('#DownloadFile').trigger('click');
Demo # Fiddle 506

How to show a hidden div with javascript when submitting a form?

I'm not really familiar with jquery, but am trying to get a simple animated gif to show when a form is submitted. When clicking 'submit' to upload an image I want to show gif so that users know that image is being uploaded. The submit button has an id="submit" and also an onClick="return confirm('message')"
I have the div code containing the gif:
<div id="loading" style="display:none">
<img src="images/hand_timer2.gif" alt="loading" />
</div>
which is hidden. And it does show if I remove the style. Fair enough. But when I try to show it with the following javascript it doesn't show:
<script type="text/javascript">
$(function(){
$('#submit').click(function(){
$('#loading').show();
});
});
I have
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"
type="text/javascript"></script>
in a separate PHP header file. As far as I can see it's the only reference to jquery library, but I do have other javascript codes that all work. I just can't get this one to work. Can anyone point out what I'm doing wrong and why I can't get the div to show gif when clicking submit?
I believe the problem could be that your inline onClick="return confirm('message')" prevent the click-event from reaching your click-event listener attached with jQuery - not sure though. Anyhow, instead of listening for a click-event on the submit-button, I would listen for the submit event on the form, that will fire when the form is actually submitted (a form can usually be posted by other means than clicking the submit button as well - through the Enter key for instance).
$('#idOfYourForm').on("submit", function () {
$('#loading').show();
});
Side note:
You don't close the style attribute properly on your loading div (notice that the > is blue):
<div id="loading" style="display:none>

Categories