My project has a script on the landing page that repositions the footer when certain buttons are clicked and another script that positions it back to its original starting point when certain other buttons are clicked.
A script on a subordinate page (not the landing page) submits a file to upload, and on the click of that button, the code to position it back to its original starting point (RestoreFooter) is called.
I considered that the submit button click causes a page reload, and that may cause the footer to reposition to its starting point, but that's not the problem (as far as I could tell).
Here is the script to reposition the footer, and the script to set it back to its starting point:
<script>
function MoveFooter() {
document.getElementById("footer_x").style.visibility = "hidden";
document.getElementById("footer_y").style.visibility = "visible"; }
</script>
<script>
function RestoreFooter() {
console.log("here_RF");
document.getElementById("footer_y").style.visibility = "hidden";
document.getElementById("footer_x").style.visibility = "visible";}
</script>
Here is the button script:
It has no call to execute either of the two functions above, but it does call RestoreFooter -- I know because the console.log function does log "here_RF" when the submit button is clicked
<div class="upload_text" style="margin-left: 10%;">
<button class="btn" id="submit_btn" type="submit" value="Submit" onsubmit="submit_btn.disabled = true; return true;">Create extension</button></div>
I also tried making it an ordinary button, not a submit button, but still the same problem:
<div class="upload_text" style="margin-left: 10%;">
<button class="btn" id="submit_btn">Create extension</button></div>
What causes this strange performance?
This is a fairly large project, so I've posted enough code to understand the problem. If more code is needed, I'll post more.
Thanks very much.
EDIT: I made a comment below about the likely source of this problem. I'll post back later.
There are not enough informations about the code, and you should post more details.
Suggests that add debugger to Step into the handler function line by line.
I suppose some code elsewhere might override the handler.
As I mentioned in my edit above, the button is in a div, and the div has a handler that calls a function to make certain changes in the DOM when a user clicks anywhere within the div region. That propagates to children like my button. I solved it by eliminating the function that fires whenever the region (div) is clicked. If I needed that functionality in some situations and not others I would need to specify all places where that function should be called.
I hope that clarifies the problem. Thanks.
Related
I have a issue with adding a button that should become visible after a Java script function is completed.
Code source:
"https://codepen.io/arcs/pen/rYXrNQ"
Note: code is not mine obviously and I take no any credit for this
Elaboration:
I moved this code to a simple html page, everything went fine.
Once the registry form is finished, text message will display with a small time delay.
What I would like to have here is, a button with timeout function (a bit longer than text message) under the text message, from where I can navigate the user to the next page.
Once again, when the entire process of this code is finished, text message will load.
I need a button to load below that text.
I need button to move user to the next page, so it should contain a link and open in same tab could be also added.
Any help with this would be highly appreciated.
First off create an 'a' tag with the link to the next page. Make sure you give it an id for the javascript part.
<a id="button" href="path_to/nextpage.html">Text for the button</a>
Do add basic CSS to it like position, width, and height. Set the opacity to 0 and pointer-events to none.
//other properties
opacity:0;
pointer-events:none;
//other properties
Once you have done this, just get a variable to point to the tag and add another setTimeout function which sets the opacity to 1 and pointer-events to all
var nextbtn = document.getElementById("button"); //or whatever id you gave the <a> tag
setTimeout(function() {
nextbtn.style.opacity = "1";
nextbtn.style.pointerEvents="auto"
}, 500);// you can change the delay to suit your requirements
I hope this clears your issue. Have a good day!
This might be very basic but I couldnt really find a solution to this. I am creating my own website. I have written a javascript file, simply called "main.js".
I can call my entire script in my HTML file like so:
<script src="main.js">
</script>
And I see in the console that everything works as it should. However, this is not what I want. What I want is the code in the JS script to be fired upon a click on my button. This is what I tried:
<input class="button" onclick="main()" type="submit"
value="Submit" name="">
</div>
So I want the script that I have referenced somewhere else in the HTML file to fire the "main" function when my button is clicked. But what happens currently is that the click onto the button simply reloads the page.
So, to get this all into one question:
I want to click my html button and then fire a single function from another script that is called "main.js".
How can I achieve that?
Thank you
I think this might be because of your type: submit.
Try changing it to type="button".
Hope this helps!
You are trying to call a function called main, but you need to run a script that creates a function. The browser won't go looking in a JS file with the same name as the function automatically.
Edit main.js so the code appears inside a function.
function main () {
// Your code here
}
If you don't want the form to be submitted after the JS function is called, then don't use a submit button to trigger it. Use a type="button".
A submit button triggers a reload as it submits the formto the server, unless your main function returns false.
Adding
return false;
at the end of main should do the trick.
I apologize if this question is answered somewhere, but I couldn't find it.
I am working on editable javascript grid for MS Dynamics CRM and I am trying to display loading screen when user clicks "Save" button on the grid (the loading spinner should only be covering my grid - which is actually a HTML web resource displayed inside the CRM window). It takes about 2-5 seconds until CRM system saves the data and reloads my grid. So I want to display the loading screen during that time.
I found spin.js http://spin.js.org/ and it seems that it can be easily implemented but I am failing to realize on what event should I display the loading screen?
Basically, I have a table and when user clicks "Save" or "Delete" button, I wish to show that there is something going on under the hood.
Thank you very much for you time and help!
It sounds like you know what you want to call from spin.js, you're just trying to figure out where to call it from. You can try adding this to your javascript, where "#saveButton" and "#deleteButton" are the css identifiers for the buttons you want to fire the script off of.
$("#saveButton").click(function(){
displayLoadingPage();
});
$("#deleteButton").click(function(){
displayLoadingPage();
});
function displayLoadingPage() {
//call your spin.js code here.
}
Let me know if this answers what you were getting at.
I know you have got your answer but I think you can do it using vanilla JS code rather than using a library like spin.js
All you need is :
1) A div which is hidden on page load covering your table with spinner aligned center in it
2) On Save/Delete button click you can just make the div visible.
3) Hide the div again once you receive response from the rest api that saves or delete the data.
Below is the HTML:
<div class="container">
<div id="loading" class="loading" onClick="hideSpinner()">
Loading…
</div>
<input type="button" value="save" / id="saveBtn" onClick="showSpinner()">
</div>
JS Code:
var loadingDiv = document.getElementById('loading');
function showSpinner() {
loadingDiv.style.visibility = 'visible';
}
function hideSpinner() {
loadingDiv.style.visibility = 'hidden';
}
Here is a demo : http://codepen.io/AshutoshD/pen/dMEGqM
Click anywhere on the overlay to close it.
I have used the overlay that #MattIn4D has created here
I know there're a lot of duplicate questions out there, I checked almost all of them, but I just couldn't find a solution in my case. So, here's my problem:
I have a banner which will show on every page of the project, inside the banner there's a close button to close the banner, and a download button which leads user to the app store to download the app. My banner works perfect only except I have to refresh the page to get these two buttons works. Here's my code:
$(document).on("pageinit", function () {
$("#close").on("click", CloseBanner);
$("#download").on("click", SetAppStorePath);
//alert("pageinit");
});
function SetAppStorePath() {
if (isIOS) {
window.location = "https://itunes.apple.com/us/app/myapp/id.....";
}
else if (isAndroid) {
window.location = "https://play.google.com/store/apps/details?id=.....";
}
}
function CloseBanner() {
$('.banner').hide();
}
Here's the simplified html:
<div class="banner">
<div class="container">
<a id="close">×</a>
<a id="download">Download</a>
</div>
</div>
I did a little test, and found something tricky: I added that alert inside pageinit, I noticed that the alert is always executed(means my button on click events are always registered) when I jump from page A to page B. But when the button works, I see page A is gone, blank page shows, alert shows, then page B shows, the buttons work. When it doesn't work, the order is different, I still can see page A, then I see alert(I still can see page A now), then it changes to page B, the buttons don't work.
So seems that when pageinit executed after page jumped, it works,but sometimes pageinit executed before page jumped, then it doesn't work.
I think your elements are dynamically created. You may need event delegation.
$(document).on("pagecreate", function () {
$("body").on("click", "#close", CloseBanner);
$("body").on("click", "#download", SetAppStorePath);
});
Move following outside of the init and change it like following
$(document).on("click","#close", CloseBanner);
$(document).on("click","#download", SetAppStorePath);
when page init executes, DOM is not ready. that is the reason it is not binding to close or download elements. and this is the way to overcome that. you dont need pageinit event here
I have a javascript method that creates a bunch of elements on click. When I call it from a button, it only stays on the screen for the duration of that click. when I enter the exact same code into the console, however, it stays on the page until I reload or navigate away (which is exactly what I want).
JavaScript code: (it's the only method in the js file)
function post() {
var postTitle = document.createElement('h3');
var nodeTitle = document.createTextNode('Immigration is good.');
postTitle.appendChild(nodeTitle);
etc....
Where I'm calling it in the html:
<input type="submit" id="post-button" value="Post" onclick="post()">
The script tag is in the header of the html page.
How do I get it to stay on the page past the duration of the click? Any ideas why it's being immediately obliterated?
You still need to cancel the form's submission. A return false; from post, if it exists, won't work because the onclick attribute is calling post() but not returning anything.
You could change it to onclick="return post();", but it would be better to attach the handler directly, and to the submit event of the form and not the click event of the button (people do use Enter sometimes!):
document.getElementById('some-form').onclick = post;
Look at what the button does. It is posting!
When you click the button it is redirecting you back to the page you are currently on! It seems like it is showing up and disappearing what is actually happening though is that the page is refreshing.
There are a couple of options to do what you want. Submitting via Ajax or having your server respond with a hashbang/cookie set to direct the page to do as you wish.