an iFrame is added to my page via javascript somewhere in my page, I want to be notified when it is loaded, but this doesn't work:
$("iframe").load(
function () {
alert(this.name + ": Im loaded!");
});
No alert is shown
Any idea why? any idea how can we achieve this?
With Latest Jquery jQuery 3.1.1, It is not working and JS error occur inderOf is not found as in latest JS lib. it is uses a normal paramter.
"load" method is deprecated since jQuery 1.8.
Use "on" method instead.
$("iframe").on("load", function () {
alert(this.name + ": Im loaded!");
});
Related
I'm trying to run a block of jQuery code that shows and hides a form, but can't find a way to get Meteor to run the code on the client side. Here's the code I'm attempting to use at the moment:
if (Meteor.isClient) {
Template.post.onRendered(function(){
$(document).ready(function(){
$('.replybtn').click(function(){
if( $(this).parent().next().css('display') === 'none' ){
$(this).parent().next().css('display', 'block');
} else {
$(this).parent().next().css('display', 'none');
}
});
});
});
}
I've also tried putting the code in a script tag, which did not work. Strangely, the jQuery portion of the code alone works fine when pasted into the browser console - meaning the bug is likely in how I'm running the code in Meteor, not the jQuery itself. Also, I've confirmed that the template name is correct and can't think of any other issues that could be causing this. Any ideas on why the jQuery code may not be running?
This is probably not the best solution, but it appears that this issue can be fixed by defining a function that creates the event listener and then setting a 2 second timeout to run the function with setTimeout().
You're trying to apply a traditional jQuery pattern when Meteor provides a simple facility to attach event handlers to templates. Here would be the meteoric way:
if (Meteor.isClient) {
Template.post.events({
'.replybtn click'(e){
const selector = e.target.parentElement.nextSibling;
selector.css('display', selector.css('display') === 'none'? 'block' : 'none');
}
});
});
I was using jQuery 1.8.3 and had this piece of script :
$("[src*=plus]").live("click", function () {
$(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
$(this).attr("src", "../Images/minus.gif");
});
$("[src*=minus]").live("click", function () {
$(this).attr("src", "../Images/plus-sign.png");
$(this).closest("tr").next().remove();
});
After upgrading to jQuery 2.1.4, this no longer works.
I get it that some functions like live is not supported anymore but I am unable to convert this piece to make it work.
When upgrading jQuery you should use jQuery migrate.
This is offically recommended way in finding out what has been deprecated in jQuery.
If you’re upgrading from a version before 1.9, we recommend that you
use the jQuery Migrate plugin and read the jQuery 1.9 Upgrade Guide,
since there have been a lot of changes. It’s easy to use the plugin,
just include it in your HTML file after jQuery and open your browser
console to see the messages it generates:
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.js"></script>
You should also look into the jQuery upgrade guide.
live is deprecated. Use on instead.
I am trying to develop a mobile application using Javascript. I would like to make a link that allows you to return to a specific page that is already visited without reloading this page.
I tried with this code:
$('#ajouter').live('click',function(e) {
window.localStorage.setItem("phrase", $("label[for='" + ($('input[name=opt1]:checked').attr('id') ) + "']").text());
//Id Rubrique
$.mobile.changePage('../z.html');
});
$("#z").live('pageshow', function() {
.....
}
But it makes me reload the page.
Use this:
$('body').on('click','#ajouter',function(e) {
e.preventDefault(); // stops default behaviour ie reloading
...
Also suggested change to on() function instead of live()
NOTE if you're using jQuery version prior to 1.8 then KEEP the live() handler as in the question, just add preventDefault:
$('#ajouter').live('click',function(e) {
e.preventDefault();
make the function return false to avoid the default behavior of reloading the page
I had a script for overlay popup box using jquery1.4.1 using modal, which returns some function in my page getting not working which are used by jquery1.6.1..
So, when I add jQuery 1.4.1 script for displaying pop up box.. the functions working through jQuery 1.6.1 got interrupted..
How can I get popup box using jQuery 1.6.1?
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://simplemodal.googlecode.com/files/jquery.simplemodal.1.4.min.js"></script>
<script type="text/javascript">
function modalTest() {
showModal();
setTimeout(function() {
hideModal();
},2000000);
}
function showModal() {
$("#downloadbox").modal();
}
function hideModal() {
$.modal.close();
}
</script>
Your problems may be
1) Certain functions in jquery 1.4.1 have been deprecated in 1.6.1
One solutions is , please upgrade the plugin to newer version , it may solve your problem
Otherwise you need to edit the plugin to accommodate the new functions ,its risky
jQuery latest is 1.7.1. Are you sure your page is loading 1.6.1? That's beside the point, though: what may be happening here is that your scripts are firing before the document is ready. No idea why it worked for 1.4.1 since that's so long ago (as duke mentions, deprecated functions?), but you should wrap this in a document ready function to see if it works:
$(document).ready( function() {
// your existing code
});
The code looks fine for versions 1.4+, so I don't think you've got a deprecation issue.
As Greg said, you haven't invoked the document ready method. You also haven't invoked the modalTest() function, so the simplemodal $('').modal method won't fire.
$(document).ready(function(){
function modalTest() {
showModal();
setTimeout(function() {
hideModal();
},2000000);
}
function showModal() {
$("#downloadbox").modal({ /* Pass simplemodal config here*/ });
}
function hideModal() {
$.modal.close();
}
modalTest();
});
I've got a simple form in a page that is loading Mootools and JQuery. JQuery is in no conflict mode, which seems like it ought to cause no problems.
There's a form element called "name"--
<input class="required" id="sendname" name="sendname" value="">
And I'm trying to attach a click event to it using Mootools to update something else when the name box is clicked:
$('sendname').addEvent('click', function(e){
// do stuff.
});
The problem is that the click event never gets added.
This error appears on load:
Uncaught TypeError: Cannot call method 'addEvent' of null
When I try to interact with the element in a js console, I get the following error:
> $('sendname').setProperty('value', 'test');
TypeError: Object sendname has no method 'setProperty'</strike>
EDIT: the previous was fixed by loading a newer Mootools. However, the click event still isn't functioning properly, though it throws no errors or warning.
This code works fine in almost any situation I've used it in. I assume there's some issue with jQuery conflicting, but the fact that the $ notation works seems to confirm that noConflict mode is operational. Any ideas?
You are targetting the element wrongly... I think this has nothing to do with a possible conflict.
In this case you need to add the hash for an id or a period for a class, like this:
$('#sendname').addEvent('click', function(e){
// do stuff.
});
Notice the # in #sendname
MooTools has Dollar Safe mode that automatically releases the $ to other libs as long as MooTools is loaded last.
If Dollar Safe mode is active, you need to use:
document.id('SomeElementID').someMethod()
What is happening in the example you are giving, is that you're using jQuery to select the element, and a MooTools method on the result. The thing is, jQuery returns the jQuery object which has no such 'addEvent' method on it. MooTools works on the actual elements so you need to select them with a MooTools query method first: $ == document.id or $$ == document.search
You can cache document.id to a var for convenience if you want:
var $M = document.id;
$M('sendname').addEvent(...)
As described in the comments to the OP, the issue was the load-order of the jQuery/Mootools scripts. The jQuery noConflict was being loaded too late, and causing problems. Please see jsfiddle -- http://jsfiddle.net/uSwzL/1/
Without any problem even loading jquery.js after other $ based library loaded:
<script>$=function(){alert('hell');}</script>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script>
$.noConflict();
$();
alert(jQuery.trim(' hello '));
</script>
Even in php framework html template:
<script>
function on_doc_ready()
{jQuery(function($)
{$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
}
);
}
function load_jquery_ui()
{var s2=document.createElement('scr'+'ipt');
s2.setAttribute('onload', 'on_doc_ready();');
s2.src='/app/idm/statics/jQuery/js/jquery-ui-1.10.0.custom.min.js';
document.getElementsByTagName('head')[0].appendChild(s2);
}
function load_jquery_after_mootools()
{var s1=document.createElement('scr'+'ipt');
s1.src='/app/idm/statics/jQuery/js/jquery-1.9.0.js';
s1.setAttribute('onload', '$.noConflict();load_jquery_ui();');
document.getElementsByTagName('head')[0].appendChild(s1);
}
load_jquery_after_mootools();
<script>