Tracking Form Changes on URL Tabs

[Willem Rheeder]

Hi,

I am adding pages with $p = $tabs->addTabURL($this->api->url('AppPages'),'Pagename');

in the page I add a form and some fields based on a model.

Normally when your form looses focus you get warning that changes will be lost.

This works only if you navigate to another url and not a different tab.  I know jquery tabs doesnt have beforeunload event, is there another event I can bind to to warn me before I move to another tab?

Regards,

Willem

[Romans Malinovskis]

That's a very good question.

Agile Toolkit implements atk_loader which checks for modified text boxes and alerts user if those are to be destroyed. Unfortunately it can only do so if you destroy the box using atk_loader

https://github.com/atk4/atk4/blob/4.3/public/atk4/js/ui.atk4_loader.js#L276

Because all of Agile Toolkit is loaded through atk4_loader, that is really helpful. It works when you try to open pop-up or reload form.

The jQuery UI Tabs however implement loading using standard $.ajax 

https://github.com/atk4/atk4/blob/4.3/templates/tabs.html

http://jqueryui.com/tabs/#ajax

at one point i had managed to extend the Tabs UI class to use $.atk4_loader instead of default one (as they are compatible) and it worked well. It is tricky though.

Now many releases later, there could be a better way to solve that problem, but I haven't researched. 

http://blogs.burnsidedigital.com/2009/01/dirtyform-watching-for-form-changes-with-jquery/

http://stackoverflow.com/questions/12959814/jquery-tabs-showing-a-confirmation-before-activate

http://stackoverflow.com/questions/6490351/cancel-tab-selection-in-jquery

I did a bit of search, but still haven't found any GOOD solution. If there is a good and reliable way to do this, I'd love to integrate that into ATK.

[Willem Rheeder]

Hi Romans,

I have come up with following.

I trigger a function in my own js file

$tabs->js(true)->bind('tabsbeforeactivate',$this->js()->univ()->warn_tab_changes()->_enclose(null,false));

the function looks like this.

 $.each({

        warn_tab_changes: function() {

            var myList = document.getElementsByClassName("form_changed");

            if (myList.length) {

                if (!confirm('Changes on the form will be lost. Continue?')){

                    event.preventDefault();

                    return false;

                }

                else{

                    myList[0].className="";

                    return true;

                }

            } else

            {

                return true;

            }

            return false;

        },

.

.

.

It triggerrs whenever I switch between tabs and it pics up the form changes, but whn I click cancel instead of ok to proceed the tabs changes in anycase.

Any Idea what im doing wrong?

Regards,

Willem

[Willem Rheeder]

Hi,

managed to make below solution work.

replaced 

 warn_tab_changes: function() {

with 

 warn_tab_changes: function(event) {

Thanx for your help.

w