I can't seem to find a solution to this problem I posted in the comments of this question
… I'm using the pace.js plugin and I would love to load/show parts of my page immediately without having to wait for the preloader to load all content.
I thought of doing this by simply calling the start event and show the selector immediately.
However I can't seem to find the cause why my done event is fired, but start is not. I also tried with hide which is also fired, but stop or restart is not.
$(window).load(function(){
Pace.on('start', function() {
alert('start') // not fired
});
Pace.on('done', function() {
alert('done') // fired!
});
});
Any ideas?
Call Pace.start(), right after event bindings. You then will be able to get the start event.
You will need to call
Pace.restart();
if the current page has already loaded with pace progress.
You have to put
Pace.on('start', function() {
alert('start');
});
outside $(window).load....
After that it will get start status, You are calling These methods after documentation is loaded so start must be already triggred.
after registering script and css, on your htlm section add this script
<script type="text/javascript">
window.onbeforeunload = renderLoading;
function renderLoading() {
Pace.stop();
//Pace.start();
Pace.bar.render();
}
Related
im trying to get a lil project going but im stuck on a very annoying thing.
$(document).ready(function() {
$("#search-button").click(console.log('hello'))
});
as you can see im targeting a search button with the id search-button and as soon as i click it something should happen. in this case i put a console.log in to test if it works but it doesn't. it always logs it as soon as i load the page , not when i click the button i target. ... what am i doing wrong
if you need more info on this pls tell me i tried to keep it as simple as i could
ty for your help
O.k
The click handler needs a function argument, not just the console.log by itself. Try this:
$(document).ready(function() {
$("#search-button").click(function() {
console.log('hello');
});
});
Inside of .click should be a handler .click(handler) and the handler should be a function. The browser is reading the code and when it hits console.log('hello'), it does it! It's seeing .click etc, but it doesn't matter; it next sees console.log and does it.
Try
$(document).ready(function() {
$("#search-button").click(function() {
console.log('hello');
});
});
As others have mentioned, the click function requires its own callback function. You can also use this, without requiring the use of document:
$("#search-button").on('click', function() {
console.log('hello')
})
I hope You're using jQuery version 3 or up. if you use 3 or up jquery version the good practice is you use Document binding Example:
jQuery(document).on('click', '#search-button', function(event) {
//your Code here...
console.log('hello');
});
I have an issue regarding the jQuery click event. The first time the page get loaded it does not work. After a refresh it works fine. I assume it has to do with the browser caching the files somehow.
This is the code:
$(window).ready(
function() {
$("#language-input").click(function() {
$("#language-dropdown").show();
});
Any ideas what I am missing?
Instead of
$("#language-input").click(function() {
You can use
$("#language-input").on('click', function() {.
This will ensure that the click event is fired even if the element is loaded dynamically.
You final code would be without $(window).ready(function() { :
$("#language-input").on('click', function() {
$("#language-dropdown").show();
});
The solution, which was mentioned in one of the comments, was to use:
$(document).on("click", "#element", function()
This seemed to work for dynamically added elements.
I have a DotNetNuke website. Baked into the DNN code is the following script
<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
dnn.controls.submitComp.onsubmit();
return true;
}
//]]>
</script>
The problem is, I put a form on a page on my website that performs a search, and I wired up a jquery listener that says if the enter key is pushed, fire my button click event. The problem is, the parent script above ALSO fires that WebForm_OnSubmit() function, and whatever that onsubmit() function\return true does is causing my page to just refresh.
So, if there anything i can do so "override" or "prevent" that WebForm_OnSubmit() function from also triggering?
Edit 1: In response to the question "how is your listener setup":
I have a function called canISearch:
function canISearch() {
if (event.keyCode == 13) {
event.stopPropagation();
$("#btnSearch").click();
}
}
and I fire this function using my onkeydown attribute:
<input type="text" id="txtblah" onkeydown="canISearch()" />
If WebForm_OnSubmit is in the global space, you can overwrite it and create an exception for your case. Sometime after the original function is defined, redefine it. Maybe something like this:
(NOTE: updated to incorporate information from Samy's answer below)
(function () {
var originalFn = dnn.controls.submitComp.onsubmit;
dnn.controls.submitComp.onsubmit = function() {
if ([your element is in focus]) {
... do your thing ...
} else {
originalFn();
}
};
})()
You could either monkey patch the dnn code in order for the method to do nothing when your function is present on the page:
dnn.controls.submitComp.onsubmit = function() {/*doing nothing, ladida*/};
Which may be a bit harsh since your modification can have an impact on other behaviors. You can instead add a method that checks that your control has focus before routing the code accordingly. This is most likely the simplest hack.
You could also prevent the event from bubbling up, as Brennan suggests; it really depends how events are attached. If I remember correctly DNN can intrude on your events in so many ways this may not be easy to do.
Or you could create your own skin in order to control all the components that are pushed onto the page and prevent the auto submit from the wrapping form.
How is your listener set up? You should be able to stop propagation of the event to keep it from moving up the event hierarchy:
$(".element").keyup(function(e){
e.stopPropagation();
});
I have a function which when the div is loaded it executes code:
$("#row").ready(function () {
When the page has first loaded, it fires fine, my data loads up without any problems.
How ever I would like to reload the div every time the value of a textbox is changed.
$("#startDatePicker").change(function () {
$("#row").load(document.URL);
});
Which is why I have that code there.
However when I change it, the .change event is fired, however it doesn't reload my div? Now I'm not sure if the div has been reloaded and it just doesn't fire the event or the event is not being loaded again at all.
EDIT
Thanks to the comment using an alert to check if the div is being called, I found out that is it not being called after I load it, so the next question is, how do I recall the (div).ready function again?
I think the issue is with jquery-cache.
Try it:
$("#startDatePicker").change(function () {
$("#row").load(document.URL+'?dt='+new Date().getTime(), function() {
alert( "Load was performed." ); // perform the operations here that
// that you wish to perform on .ready
});
});
See if it helps.
This is a button to close the click but it fail and not work. I would like to know what is the tab ID since i did not think i assign one when i create a tab.
Thank you.
This is my attempt
js
$("#closeTab").click(function() {
window.parent.$('#tt').tabs('close','Create List');
});
html
<input type="button" id="closeTab" value="Cancel" class="submit"/>
I found my js code is working but the button can not trigger it? Why? thank you
latest try:
<script>
$(document).ready(function(){
$("#addlist").validate();
});
$(function(){
$("#closeTab").click(function() {
window.parent.$('#tt').tabs('close','Create List');
});
});
</script>
It still doesn't work so i think it is because the upper function ? How to fix this?
================================================================================
Also, are there any ways to clear my session in using this jquery function (what should i add for instance)?**Thanks
With javascript, you have to delay the execution of certain functions (like event handlers) until the page loads fully. Otherwise, it is attempting to bind a function to an element that doesn't yet exist. With jQuery, you can pass a function to jQuery to be executed on page load very easily like this:
$(function(){ /* code goes here */ });
So to use this with your code, you would do this:
$(function(){
$("#closeTab").click(function() {
window.parent.$('#tt').tabs('close','Create List');
});
});
This way, when the jQuery attempts to bind the function to #closeTab, it happens after the page has loaded (and after #closeTab exists).
Do you have any errors in the console?
Do you include jQuery before that click binding?
Try changing the window.parent.... to alert('clicked!'); and make sure you're actually getting there.
Also, make sure the click binding is inside of a:
$(document).ready(function(){
// here
});
A script can close only the windows it creates. It cannot close the tab which it didn't create.
To rephrase, cannot close tab only if unless but when created tab by script which is same that close window.
I hope this makes sense.
Maybe the form is submitted and the browser navigates to another URL before the code could run? Try replacing function() with function(e) and adding e.preventDefault(); to the beginning of the event handler.