Php Yii: Detecting changes in forms - php

Question

I am implementing an edit feature for 3 related models..
and to divide the work .. i implemented 3 tabs using bootstrap extensions...now each tab contains textfields, drop downs, etc., now the contents of the text and the dropdowns, radio buttons etc are pre-loaded for the user; since this is an edit feature, it would be convenient for them if their choices were retained, and that they only need to change specific fields that they want to change without really having to re-do the entire form.
Each form in a tab has its own independent "Save" button that saves the model and then switches to the next tab after refresh.
Here's what i'm trying to do, (and quite having a hard time )..
I'm sure everybody has a facebook account here.. remember when you try to write a status update, or when you are chatting with somebody and then you click a button that redirects to another page?
Then a dialog box (or modal?) will alert you that you haven't finished your post yet, and that it gives you an option whether to leave or to stay in the page?
Similar to what i'm trying to do; i'm trying to alert the user if he/she wants to save or discard his changes (if there are changes made) before he switches to another tab.. I really have no idea how to do this..
on how the widget works..is abstracted (or i haven't found it yet atleast), and unlike in java where i can easily search for "Events" onChange() or something..i'm new to php and yii.. any idea ,on how to do it, what to use, or a sample code will be really helpful guys.. Thanks a lot!

Answer 1

You could use a global var like var saved=false to check your form has been saved.
To catch the on change of your forms:
$('form :input').change(function(){saved=false;});
See: jquery get all form elements: input, textarea & select
When the user left the page you could fire a beforeunload:
$(window).on('beforeunload', function() {
if(!saved) return 'Leave page?';
});
See also:
Dialog box runs for 1 sec and disappears?
catching beforeunload confirmation canceled?
To catch the tab change you could use a default confirm (http://www.w3schools.com/js/js_popup.asp):
$('#myTab a').click(function (e)
{
e.preventDefault();
if(!saved)
{
if(confirm('Leave tab?'))
{
$(this).tab('show');
}
}
else
{
$(this).tab('show');
}
});
Or you could try to build your own confirm dialog:
Note it seems you can't catch the window beforeunload but for the tab change:
html:
<ul class="nav nav-tabs" id="myTab">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
<div class="tab-pane" id="profile"><form><input type="text"><input type="submit" class="btn btn-success"></form></div>
<div class="tab-pane" id="messages">...</div>
<div class="tab-pane" id="settings">...</div>
</div>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>Form not saved!</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button id="leavetab" class="btn btn-primary">Leave tab</button>
</div>
</div>
javascript:
var saved = true;
var confirmed = false;
var thistab = null;
function checksave()
{
return saved;
}
$(function () {
$('#myTab a:last').tab('show');
$('#myTab a').click(function (e)
{
e.preventDefault();
thistab = $(this);
if(!checksave()){ $('#myModal').modal(); return false;}
thistab = null;
if(saved || confirmed)
{
$(this).tab('show');
saved = false;
confirmed = false;
}
});
//see: https://stackoverflow.com/questions/12862601/jquery-get-all-form-elements-input-textarea-select
$('form :input').change(function(){saved=false; confirmed = false;});
$('#myModal').on('hidden', function () {
return false;
});
// modal click set confirmed to true
$('#leavetab').click(function()
{
{
$('#myModal').modal('hide');
thistab.tab('show');
saved = false;
confirmed = false;
}
});
});