I'm using jQuery at WordPress (#the HOME page) and the ready function doesn't work for me. I have a index.php which is including (php) a header, footer and a sidebar. I tested this code:
<script type="text/javascript" src="path_to_jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert ("test text");
});
</script>
The alert (with the text "test text") is just not popping up immediately! It's only popping up after my sidebar has been loaded. This means while I'm seeing the index page (sidebar is not loaded yet) I have to wait a few seconds until the sidebar has finished loading, and only then the jQuery code is executed: the alert is popping up. So the ready function just wont work.
Can anybody tell me why and how I can solve this problem? Thanks.
within the WordPress environment, use this:
jQuery(function($){
// now you can use jQuery code here with $ shortcut formatting
// this executes immediately - before the page is finished loading
});
jQuery(document).ready(function($){
// now you can use jQuery code here with $ shortcut formatting
// this will execute after the document is fully loaded
// anything that interacts with your html should go here
});
The alert is popping up after the sidebar is loaded because ready() is supposed to be executed AFTER the whole page is done loading.
The alert (with the text "test text") is just not popping up immediately! It's only popping up after my sitebar has been loaded.
That's exactly the advantage of using ready. When you want it to popup right away, simply do
<script type="text/javascript">
alert ("test text");
</script>
Related
I want to create a confirm delete popup with Bootstrap 3. Is there any good comprehensive examples how to build one. I am very new to Meteor.
Use whatever example from Codrops, etc, just remember put the JSCode inside a
Template.nameTemplate.rendered = function() {}
So thats telling meteor to load that jscode, when the template has beed rendered and it can load any modal, etc...
So just follow whatever example you want, and just put whatever jQuery plugin etc, inside Rendered function
Also in some case the rendered its not enough, you need to use too,you can see timer docs here, anyways if you are having bad time, feel free to upload, some meteorPad, free nitrous box o repo on github and i can help you (i have a bad time with those modals on meteor to, they are a little trickys =p)
update answer
try to add meteor add iron:router, and on the client /app.js
Router.route('/', function () {
this.render('leaderboard');
});
And keep the same rendered like this.
Template.deleteBtn.rendered = function(){
$('.open-modal').on('click', function(e){
$('#confirm').modal()
.on('click', '#delete', function (e) {
// Remove selected player
Players.remove(Session.get("selectedPlayer"));
});
});
}
UPDATE
So using the peppelg:bootstrap-3-modalPackage, you can easy do the follow
First Create a template with the modal content
<template name="modal">
<!-- Modal Stuff -->
</template>
and easy call it on a Event handler.
Template.example.events({
'click #exampleButton':function(){
Modal.show('modal')
}
})
Now back to this example check this meteorpad from line 1-23 on app.'s and 41-62 on main.html
I am using javascript and I need to display an alert only once when the user click anywhere in the site. But make sure it will not pop up everytime the user click anywhere.
Im not professional but I need this code to embed in my e-commerce site. I have tried a regular onload alert. but it will show once the page is loaded. then i tried this automatic code:
</html>
<head>
<script language="JavaScript">
<!--
document.onclick = myClickHandler;
function myClickHandler() {
alert("All orders require minimum two weeks notice due to the nature of event and wedding products");
}
-->
</script>
</head>
<body>
</html>
and works, but every time I click appear and that is annoying. I need a onclick event, anywhere in the page... to display an alert only once. to advise the user about important info.
Desperatly need some solution. Thanks
$(function () {
$(document).on('click.once', function () {
alert("Alerted once");
$(document).off('click.once');
})
});
This makes use of the .off() and named event feature in jQuery.
.off feature
event namespaces
I recently started playing around with the infinite scroll feature of the wordpress jetpack plugin. It seems to work ok, but I'm trying to integrate with Masonry, so I need to use the post-load event that's supposed to fire when Jetpack loads more posts.
But I can't seem to catch that event.
I have a very minimal set up (with a supported, default theme - twentyfourteen) and I added this small script to footer.php to try and catch the event:
<script type='text/javascript'>
document.body.addEventListener("post-load", function() {
alert('posts loaded');
});
</script>
But I never get my alert even though the new posts are loaded.
Any ideas?
Thanks in advance.
This is an old question and I was looking for an answer too. The reason it doesn't work is because the infinity.js script used by Jetpack fires the 'post-load' event using the jQuery .trigger().
.trigger() is not a native event so it doesn't get picked up using addEventListener.
Use:
jQuery(document.body).on("post-load", function(e) {
// your code
})
I have this script in the tag that's making the header row in the grid frozen.
It's working good, but after I add a row to the grid with Ajax, the row goes back to regular mode, and it's not frozen anymore.
What am I missing?
<script type = "text/javascript">
$(document).ready(function () {
$('#<%=gvPayments.ClientID %>').Scrollable({
ScrollHeight: 500
});
});
</script>
Thanks.
Actually I believe the problem is $(document).ready() isn’t called after an asynchronous postback, so I suggest you have a look at this page:
http://web.archive.org/web/20101109152029/http://blog.dreamlabsolutions.com/post/2009/02/24/jQuery-document-ready-and-ASP-NET-Ajax-asynchronous-postback.aspx
Using jQuery 1.4.2 from Google hosted Code.
Is there a reason why the following javascript does not fire all 3 document.ready functions when the document is ready?
The first $(document).ready() function, which renders headers, and the second, which gives a 'Foo' alert box triggered, but subsequent ones in new <script> blocks aren't triggered,
<script type="text/javascript">
$(document).ready(function () {
Cufon.replace('h1'); // Works without a selector engine
Cufon.replace('h2'); // Works without a selector engine
Cufon.replace('h3'); // Works without a selector engine
Cufon.now();
});
$(document).ready(function () { alert("Number Foo"); });
</script>
// html tags
<script type="text/javascript">
$(document).ready(function () { alert("Number One"); });
$(document).ready(function () { alert("Number Two"); });
</script>
These are in seperate web parts, hosted on the same page in Sharepoint2010
I can think of three forensic things to try, right off:
try it with non-google-hosted
libraries.
comment out the Cufon
calls -- I believe Cufon does some
crazy stuff to download additional
resources, yes? That may be
interfering.
sub in
$(window).load() for one or more
of your $(document).ready()
callback defs. They have different
firing criteria --
$(window).load() waits for
everything to load up, allegedly --
but the substitution may be
revealing.
Of course, console.log() and alert() will be your in-leu-of-debugger-breakpoint best friends in this case.
you're missing a closing curly bracket and parenthesis in the second script tag
You are missing a }); in the end of the last $(document).ready
Once you correct this it should work
EDIT:
Since you say now that each script tag is in a separate web part I believe the problem itself is not in the scripts. Something else in your page is messing up your code.