Develop Reference

Unrelated javascript executes when submit button is clicked

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.

How can I reuse a cloned element?

I have a Bootstrap modal on my page. Basically, what happens is the user picks some options on the page, clicks a go button and that modal pops up and gets populated with the live output of the job they started.
After the job runs, I'd like for the user to be able to close the modal, choose more options, and run the job again. The problem is, I can't seem to get rid of the output from the previous job.
I tried this answer, which was to clone the div and use replaceWith() to restore the content to it's original state. This works for the first two times (job runs once, then when you start another the modal is back to it's original state), but for any time after that, the modal pops up with the content of the previous run until it's text gets overridden.
I have this at the beginning, to capture the contents before anything is done:
$(document).ready(function() {
modalHold = $("#postModal").clone();
});
And, this runs when the modal closes:
$('#postModal').on('hidden.bs.modal', function (){
$("#postModal").replaceWith(modalHold.clone());
})
I would've expected the replaceWith(modalHold.clone()) to replace it with a new clone of the original element, however it seems that I'm still modifying the original. Any help would be appreciated, or if there's a better way of doing this I'd be glad to hear it.

Bootstrap does some javascript magic with the Modal, so I guess you can't just clone whole the Modal's HTML. As a workaround you may try to play with class="modal-body" node only, clone and replace it.
But the truth is on another way. You need to implement a function which would reset your inputs and call it each time the Modal is being hidden.
var modalDefault = {
input1: '',
input2: 'Hello!'
};
var resetModal = function() {
$('#modalInput1').val(modalDefault.input1);
$('#modalInput2').val(modalDefault.input2);
}
// ...
$('#postModal').on('hidden.bs.modal', resetModal);

Not sure why I didn't think of this to begin with, but dhilt's answer helped point me in the right direction. The idea of creating defaults and just switching back to those could be helpful in some cases, but I had some content (including job info and a loading bar) inside the modal that I'd really like to be displayed each time a job starts, until it is done and the output can be displayed.
Instead of doing any fancy cloning, I placed that content into a div and just grabbed its innerHTML:
$(document).ready(function() {
modalHold = $('#jobOutputHolder').html();
});
When the .load () runs, it will update #jobOutputHolder with the output of the job. Then, on hide of the modal:
$('#postModal').on('hidden.bs.modal', function (){
$('#jobOutputHolder').html(modalHold);
})
With this method, I can run a job, see the loading screen, see the job output, close the modal, and repeat as many times as I need without ever seeing the output of previous jobs.

Show a Fixed DIV when Form is changed and hide it when Form is Saved

I have a page with an HTML FORM to add/edit/delete Project Task rows. They are saved to a Database.
As this page can be very long/tall, right now there is a SAVE button at the top and bottom of page that uses AJAX to save all changes.
To make things easier, for the user to make a SAVE I am wanting to show a FIXED DIV across the top of the screen with a SAVE button.
This FIXED DIV should only show up when there are Un-Saved changes. So when the page load you do not see this right away until you make a change on the page. At that point it comes into view.
Clicking the AJAX Save button saves the Task records to Database and then the Fixed DIV/SAVE Button will go hidden again until another Change is detected.
Right now I have this like 90% working.
I have JavaScript which has EVENTS which call my showTaskUnSavedChangesHeaderBar() Function which is shown below when:
Text Input is changed
Textarea changed
Selection dropdown changed
Button Clicked to Add a New Task Row
Button Clicked to Delete Task Row/record
So as you see I have the code in place to Detect a CHANGE on the page. This then Triggers my Function which makes my Fixed DIV with Save button come into view.
Now once you click the Save button I saved the Data using AJAX and then call my hideTaskUnSavedChangesHeaderBar() Function which is also shown below.
This makes the Fixed DIV with Save button go back to being Hidden with it's CSS display: none property set.
Up until this point everything described above works as expected, except in my showTaskUnSavedChangesHeaderBar() Function I added some code to make the Fixed DIV only show when you are scrolled down the screen at least 100px so that it is not shown at the very top of screen right now.
This scroll trigger part also works fine.
The problem is, once you make a save and hideTaskUnSavedChangesHeaderBar() is called, it Hides the Fixed DIV but as soon as you scroll at all again, it keeps showing back up, even though no new CHANGES have been made to the Data on screen.
Just looking at the code below, can someone tell me what I am missing? When my hideTaskUnSavedChangesHeaderBar() Function is called and the DIV is hidden, it should Re-set the process until another Change on page is made but I must be missing something because as soon as it goes hidden a single px scroll up or down triggers it back into view again
UPDATE
It seems like when my hideTaskUnSavedChangesHeaderBar() Function is Called, I need to somehow kill this Event $(window).scroll(function() until the showTaskUnSavedChangesHeaderBar() Function is called again, is that even possible though?
I realize a JSFiddle page might be helpful, I will work on setting one up if there isn't a simple solution posted soon. I held off as my page is really complex and i'll have to dumb it down a lot to get a Fiddle working for the demo
// When there are Un-Saved changes on the Task Edit view, show a Fixed Header DIV with a SAVE Button
function showTaskUnSavedChangesHeaderBar(){
if ($('#task-edit-unsaved-header-bar').length > 0) {
var unSavedChangesHeaderBar = $('#task-edit-unsaved-header-bar');
var fixmeTop = 100;
$(window).scroll(function() {
var currentScroll = $(window).scrollTop();
if (currentScroll >= fixmeTop) {
unSavedChangesHeaderBar.css({
display: 'block',
position: 'fixed',
top: '0',
left: '10'
});
}
});
}
}
// When there are Un-Saved changes on the Task Edit view, show a Fixed Header DIV with a SAVE Button
function hideTaskUnSavedChangesHeaderBar(){
if ($('#task-edit-unsaved-header-bar').length > 0) {
var unSavedChangesHeaderBar = $('#task-edit-unsaved-header-bar');
unSavedChangesHeaderBar.css({
display: 'none'
});
}
}

You bound an event in your function
$(window).scroll(function() {
So after that this code will always fire on scroll. If you call showTaskUnSavedChangesHeaderBar it will even bind the handler multiple times, making it fire multiple times.
Solution
You have to unbind this event handler when not needed anymore. Even better would be to put it somewhere outside and just switch a flag variable in your functions so that your scroll handler knows what to do.

.hide-me { display: none !important; }
For hideTaskUnSavedChangesHeaderBar method call addClass('hide-me') and in showTaskUnSavedChangesHeaderBar call removeClass('hide-me')
Now the scroll event won't override display to 'block'.

Element is Statement Combined With If Statment Not Responding Properly on Hover

Really need some JQuery help here. I'm about to launch my laptop out the window. I have come a long way with this piece of code an I think I am almost there but I am stuck on the last hurdle.
I am only going to include the pertinent pieces of code here because it is a very large piece.
I have a navigation menu for a mock solar system. Here is the link to the larger external piece if you want to see the whole thing. http://jsbin.com/zagiko/1/edit (please note this uses mostly CSS3).
I have a nav menu for the piece and when you click on the values in the nav menu the current script assigns a class of active. That all works perfectly. I built in a button to test the active state on click and the state changes are working. But I need it to respond to the state change on hover. I am not a JQuery person; I am learning. It almost seems like the hover isn't working because it is responding to the data loaded when the page loads instead of responding in real time. But I am just guessing.
What I need is an if statement that will respond to the live data (not on page load or when the document is ready). The if statement should basically say if this div is active then this other div can appear on hover. But if this div is not active then it cannot appear.
The current if statement I wrote is
if($("a.active").is('.uranus')){
$('#uranus .infos').hover(
function () {
$("#descriptionsp").fadeIn("2000");
})
};
The current script that runs when the site loads that sets up the menus is:
$(window).load(function(){
var e=$("body"),
t=$("#universe"),
n=$("#solar-system"),
r=function() {
e.removeClass("view-2D opening").addClass("view-3D").delay(2e3).queue(function() {
$(this).removeClass("hide-UI").addClass("set-speed");
$(this).dequeue()})
},
i=function(e){
t.removeClass().addClass(e)
};
$("#toggle-data").click(function(t){
e.toggleClass("data-open data-close");
t.preventDefault()
});
$("#toggle-controls").click(function(t){
e.toggleClass("controls-open controls-close");
t.preventDefault()
});
$("#data a").click(function(e){
var t=$(this).attr("class");
n.removeClass().addClass(t);
$(this).parent().find("a").removeClass("active");
$(this).addClass("active");
e.preventDefault()
});
Really need you help. Thanks in advance!

Right now, your block of code is only being checked when the javascript is loaded. At this time, the .uranus element is probably not active, so nothing will happen.
First of all, you want to move this block inside of document ready, otherwise your elements such as .uranus might not even exist yet.
Your logic is very close, but you need to move the if statement inside of the hover function like this:
$('#uranus .infos').hover(
function () {
if($("a.active").is('.uranus')){
$("#descriptionsp").fadeIn("2000");
}
});
This way, every time you hover on #uranus .infos, it will only execute the code if the .uranus is also .active

Page reload doesn't reset jQuery / CSS styles

I'm designing an HTML page which has one button. The user clicks the button and a simple jQuery script animates that div away, revealing lower page content. You can see it here.
I've noticed that it looks/works fine the first time, but if I refresh the page with the browser button, it doesn't fully reset. The initial container is only half on the page. If I enter the URL again and load the page, it resets as expected.
NOTE: This only happens if you scroll down a bit after clicking the initial button... which seems weird.
I had no idea that there was any difference between these two operations, but there clearly is. What is the difference and how can I fix this problem from happening?
Here's my jQuery code, in case it's relevant:
$(document).ready(function(){
var faqs = $("#FAQ");
$("#learnmore").click(
function(){
$("#home").animate({top:'-=1066px'},600);
$("#more").animate({top:'-=1066px'}, 600, function() {$("#background").hide();} );
$("body").css('overflow-y', 'scroll');
//$("#home").slideUp();
console.log("jquery loaded");
}
);
});

It happens because it is cached by the browser.
If you styles are regularly modiefied, then as easy fix is to attach a unique id on the end of the reference, like
<link href="style.css?time=168768234928" ..../>
What it does, it makes the browser think it is a new request everytime it loads.

It happens because browser trying to scroll to the same position, what was before page reload. To check it, try press button and don't scroll to bottom of page and then reload page.
Okey, the reason is clear.
Now we need solution. Try this:
#more {display:none}
in your css. And then use
$("#more").show().animate(...
in your $("#learnmore").click() function. I hope this will solve the problem.