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

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

i have page html form add/edit/delete project task rows. saved database.

as page can long/tall, right there save button @ top , bottom of page uses ajax save changes.

to create things easier, user create save wanting show fixed div across top of screen save button.

this fixed div should show when there un-saved changes. when page load not see right away until create alter on page. @ point comes view.

clicking ajax save button saves task records database , fixed div/save button go hidden 1 time again until alter detected.

right have 90% working.

i have javascript has events phone call showtaskunsavedchangesheaderbar() function shown below when:

text input changed textarea changed selection dropdown changed button clicked add together new task row button clicked delete task row/record

so see have code in place observe change on page. triggers function makes fixed div save button come view.

now 1 time click save button saved info using ajax , phone call hidetaskunsavedchangesheaderbar() function shown below.

this makes fixed div save button go beingness hidden it's css display: none property set.

up until point described above works expected, except in showtaskunsavedchangesheaderbar() function added code create fixed div show when scrolled downwards screen @ to the lowest degree 100px not shown @ top of screen right now.

this scroll trigger part works fine.

the problem is, 1 time create save , hidetaskunsavedchangesheaderbar() called, hides fixed div scroll @ again, keeps showing up, though no new changes have been made info on screen.

just looking @ code below, can tell me missing? when hidetaskunsavedchangesheaderbar() function called , div hidden, should re-set process until alter on page made must missing because goes hidden single px scroll or downwards triggers view again

update seems when hidetaskunsavedchangesheaderbar() function called, need somehow kill event $(window).scroll(function() until showtaskunsavedchangesheaderbar() function called again, possible though?

i realize jsfiddle page might helpful, work on setting 1 if there isn't simple solution posted soon. held off page complex , i'll have dumb downwards lot fiddle working demo

// when there un-saved changes on task edit view, show fixed header div 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 un-saved changes on task edit view, show fixed header div 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 event in function $(window).scroll(function() {

so after code fire on scroll. if phone call showtaskunsavedchangesheaderbar bind handler multiple times, making fire multiple times.

solution

you have unbind event handler when not needed anymore. improve set somewhere outside , switch flag variable in functions scroll handler knows do.

javascript jquery