Meteor / Magnific Popup : Catching popup DOM events - javascript

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

Related

Problems with event binding on dynamically created elements

I have code that is behaving one way on jsfiddle, one way on localhost, and another when uploaded to my website. I've been wrestling with the problem for a few days now. I don't know what tests or trial and errors I can run at this point.
This jsfiddle is working exactly as I want it to work.
http://jsfiddle.net/2ZLse/10/
When I insert this code into my project, and run it on localhost with WAMP, the javascript for the page does not work. The javascript is valid when run through jslint.
Stranger still, when I upload the exactly same files to my website, the javascript is functional, and I can even click on the watch button and render the form, but the nevermind button does not return me to the original state. I'm not receiving any errors on my cPanel.
When I replace
$(document).on('click', '.nevermind', function() {
$('#imagebox').html(imagebox);
});
with
$('.nevermind').click(function(){
$('#imagebox').html(imagebox);
});
The localhost will function the same as the website functions, with functioning javascript, but without a functioning nevermind button.
Below is the code, but let me tell you more about the rest of the page incase it's relevant. I'm using php. It's a .php file, bootstrap is loaded and working, jquery is loaded, and the javascript is run at the bottom of the page, not the header. There is ajax running elsewhere on the page, which works on the website but not the localhost, and I have the correct connect.php file for each. My best guess is that ajax has something to do with it.
What is the problem, or what tests can I run?
Here is the HTML
<div id="inputbox">
<form><button type="button" id="watchcontrol" class="btn btn-default">Watch</button>
</form>
<br>
</div>
<!-- images and continued input extension-->
<!-- imagebox also acts as control panel -->
<div id="imagebox">
ORIGINAL STATE
</div>
Here is the javascript.
var imagebox = 'ORIGINAL STATE';
var watchform = '<form action="post/watchpost.php" method="post">' +
'<input type="text" name="watchid" /><br>' +
'<input type="submit" class="btn btn-default" value="Contribute" />' +
'</form>' +
'<br><br><button type="button" class="btn btn-default nevermind">nevermind</button>';
$(document).ready(function(){
//control functionality
$(document).on('click', '.nevermind', function() {
$('#imagebox').html(imagebox);
});
$('#watchcontrol').click(function(){
$('#imagebox').html(watchform);
});
});
Event binding on dynamically created elements?
This question, while helpful, did not solve my issue. I believe my issue is separate from that one.
The following only binds event handler to the EXISTING DOM element:
$('.nevermind').click(function(){
$('#imagebox').html(imagebox);
});
which does not include what you append after clicking on #watchcontrol.
The following would work though, binding the event everytime when you create the dynamic element (even though I suggest that you free the element before removing it from the DOM):
$('#watchcontrol').click(function(){
$('#imagebox').html(watchform);
$('.nevermind').click(function(){
$('#imagebox').html(imagebox);
});
});
http://jsfiddle.net/2ZLse/11/

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>

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>

Firefox HTTP Form Action doesn't fire

In Chrome and IE, the following code, when the Anchor tag is clicked, pops up the form (modal box ID of "modalContent", form ID of "DL") and adds an "OnSubmit" to the Form. When the Form is submitted, it will navigate to the requested PDF via Javascript, and run some ASP to send an email with their details attached.
<script language="javascript">
function downloadAnyway(link) {
$('#DL')[0].setAttribute('ONSUBMIT', 'return checkform("' + link + '")');
$('#modalContent').modal();
}
function checkform(navName) {
window.open(navName);
$.modal.close();
}
</script>
<!-- link to download a product guide -->
Product Guide
<div id="modalContent">
<form id="DL" action="contactusprocessNew2.asp" method="post" name="contact" >
<div align="center">
<input type="image" src="templates/default/images/submit_download.gif" class="imagebutton" value="submit" />
</div>
</form>
</div>
This works fine in IE and Chrome, in Firefox, the Javascript onsubmit works, but the action of the asp never fires. If I remove the javascript, the asp fires as expected.
So, the final form in FireFox, after the "onsubmit" has been dynamically added looks as below:
<form id="DL" action="contactusprocessNew2.asp" method="post" name="contact" onsubmit="return checkform("downloads/ProductGuide.pdf")">
The onsubmit fires, opening the product guide in another tab, however, the ASP Action never fires. There is more that goes on here, like we write a cookie making sure we don't ask the client for a download every time they use our downloads, however, I've trimmed off anything I think is outside the problem domain.
In the asp, I have gotten rid of all code and put a simple response.redirect to see if it fires and make sure nothing is going on in the ASP.
Any idea how I can get this to function in FireFox?
UPDATE:
I have replaced the onsubmit event wireup with a 'proper' jquery submit wireup replacing the first line below, with the second. The asp on the form still does not function.
//$('#DL')[0].setAttribute('ONSUBMIT', 'return checkform(\'' + link + '\')');
$('#DL').submit(function checkform() {
$.modal.close();
window.open(link);
return true;
});
UPDATE 2
Right, it is because to modal popup CLOSES before the ASP fires. If we comment out the line $.modal.close(); then the asp fires as expected. In Chrome and IE the javascript and the ASP must fire at the same time, in Firefox, the javascript fires which "hides" the div with the "modelContent" and the asp can no longer fire. So this is the real problem... now how to sort it out...

jQueryMobile add click event to a button instead of changing page

<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

Categories