I have seen numerous advice on stackexchange and all over the web suggesting that I not use jquery's live function. And at this point, it is deprecated, so I'd like to get rid of it. Also I am trying to keep my javascript in one place(unobtrusive)--so I'm not putting it at the bottom of the page. I am unclear though on how to rewrite the code to avoid live for elements that don't yet exist on the page.
Within the javascript file for my site I have something like this:
$(function() {
$('button.test').live('click', function(){
alert('test');
});
});
.on( doesn't work since the element doesn't exist yet.
The button is in a page I load in a colorbox pop-up modal window. I'm not sure exactly where that colorbox window sits in the DOM but I think it is near the top.
I could use delegate and attach this to the document--but isn't the whole point of not using live to avoid this?
What is the best way to get rid of live in this case?
You can use .on() - http://api.jquery.com/on/
$(document).on("click", "button.test", function() {
alert('test');
});
If you use live() you can use die().
You can also use on() and off().
They do about the same thing but its recomended to use on.
I ended up avoiding both live and an on attached at the document level. Here's how:
Wrap all of the jquery code specific to objects in a page which loads in the colorbox window in the function like so:
function cboxready(){
...
}
The code wrapped in this function can attach directly to the objects (instead of attaching at the document level) since it will only get run once the colorbox window is open.
Then just call this function using colorbox's callback when you attach the colorbox, like so:
$('a.cbox').colorbox({
onComplete:function(){ cboxready(); }
});
Related
I'd like to call close on a mouseleave event on an md-menu component. I'm using version 0.7.4 of the vue-materiallibrary, and using this documentation it says that there is a close method.
How do I call this method? I've tried the following:
<md-menu md-size="1" ref="aRef" id="aRef">
<div #mouseleave="this.$refs['aRef'].close()">
...other stuff...
</md-menu>
When I run this I get an error saying:
Uncaught TypeError: Cannot read property 'aRef' of undefined
I'm guessing this is something to do with the component not being available at creation time. What's the correct way of doing this?
I should say that the md-menu is actually nested inside another md-menu (which seems to work ok from a functional perspective). Not sure if that screws up the event hierarchy.
I stumbled across the solution for this one while I was trying to solve a different problem (how to close any other menus before opening another).
Your problem is that you can't use this inline in the html template. You need to send the event to a method and then call it...
<md-menu
ref="aRef"
#mouseleave="closeMenu"
>
// menu contents
</md-menu>
Then in your script section:
methods: {
closeMenu() {
this.$refs['aRef'].close();
}
}
I used the plugin to open up an internal page, which works fine with iframe but the preloader does not show up. I just want to display a preloader image or a "loading..." text. This is what I tried:
$(document).ready(function() {
$('.link').magnificPopup({type:'iframe', preload: true});
});
Is there something else I need to do?
If you look at the Javascript source of jquery.magnific-popup.js, the mfp.updateStatus('loading'); is never called in the iFrame code block. So what I did was simply add mfp.updateStatus('loading'); to the initIframe function and remove mfp.updateStatus('ready'); from the getIframe function. It may be better to add a setTimeout to call the mfp.updateStatus('ready') but it seems to work okay without that.
Is there a way to pass messages from the popover to global page using the dispatchMethod() instead of calling the global page's functions using safari.extension.globalPage.contentWindow.
Currently i use a dynamically created iframe inside the web page to simulate a popover. This communicates with the global page using Safari's message passing. So i want to support this as well as the new popover in the later Safari versions.
Message passing between the popover and the global page will help me reuse the code.
Thanks
It doesn't look like there is a way for a popover to dispatch a message to the global page, or vice versa, using dispatchMessage. However, you could use the HTML5 standard window.postMessage to do the equivalent, although then you could not reuse your existing code without some modification.
To use postMessage from the popover, you would do something like this:
var gw = safari.extension.globalPage.contentWindow;
gw.postMessage("hello there", window.location.origin);
And to receive it in the global page:
window.addEventListener('message', function (msg) {
if (msg.origin == window.location.origin) {
msg.source.postMessage("got your message", window.location.origin);
doSomethingWithMessageData(msg.data);
}
}, false);
This messaging protocol is similar enough to the extension-specific one that you could probably reuse most of your existing code, with just a thin abstraction layer added.
I am getting an error message as element.dispatchEvent is not a function. I am using jQuery with prototype in rails 3 application. In my layout file, I have added the js files as below
javascript_include_tag 'jquery','jquery_ujs','prototype','shadowbox/shadowbox.js'
<script type="text/javascript">jQuery.noConflict();</script>
I have also added jQuery.noConflict as above and used jQuery instead of $ in jQuery functions. Any idea how to resolve this.?
In my another controller page action I have also mentioned the same thing as there are some js files which needs to be reloaded only for that particular page.
I am a newbie in js as well as rails also.
you should use jQuery.noConflict right after src to the jQuery library
Using jQuery.noConflict(); should be enough. Please check the code of the page in your browser so you can see when prototype is actually added.
You should have jQuery, then the .noConflict call, then prototype.
Besides adding the 'no conflict' method, I do this instead (though both would probably be best):
I'll 'preset' my custom script page. Let's say my prediction is that I will use maybe 5 blocks of code in a page - this is how I preset my page:
jQuery(document).ready(function($) {
// use $ in here like normal!
});
jQuery(document).ready(function($) {
});
jQuery(document).ready(function($) {
});
jQuery(document).ready(function($) {
});
etc. etc.
Notice this uses the jQuery object itself to pass as the callback function to the .ready method so you can once again use the $ identifier within the functions. I can rename it so their will never be a conflict, and I can use the $ identifier within the function like I normally would. Hope that helps.
I am using an .aspx page as cluetip bound to an anchor tag. I need to pass a parameter from anchor to this page and then call a WCF service to populate my template with returned JSON. I tried putting body onload function but that doesnt seems to work.
Thanks
Koby.
response to comment
You want to use the .mouseenter() event. This new event in 1.4 is better than .blur() which is what you will see in most examples (and probably why you can find it, a search of blur jquery popup should give you lots of examples). But mouseenter is better in the lastest jQuery
Docs: (very nice example code at the bottom of the page.)
http://api.jquery.com/mouseenter/
old version
just add the function to the onclick handler. You can do this in jquery with something like this
$(selector).click(function () {
code to do stuff (call wcf and populate)
you can use $(this) to see what was clicked on. ("passed" as you put it)
});
see fab new jQuery docs http://api.jquery.com/click/