Problem with dialog on form, form data is lost

[josemite]

Hi!

I have a form with a dialog on it. My problem is reproduced by these steps:

1. I enter a value in a form textbox.
2. then I open a JQM dialog which is placed on the same form
3. when I close the dialog the form data is gone

This error occurs only the first time the form page is loaded. If I refresh the page after it has loaded the dialog and the form works as I want (and expect), i.e. the form data is preserved after I close the dialog.

The workaround is to disable data-ajax for the page transition to the form page.

Maybe this developer got the same problem #3478.

Best regards

[agcolom]

@josemite I have tried to reproduce, but all works fine for me. Can you try the link below and let us know whether are you still seeing this issue?
http://fiddle.jshell.net/agcolom/H6Xfn/10/show/

If you do, please specify the device and browser you are using so that we can test as well.

Thanks,

Anne

[agcolom]

Hi, I have gone further, in case the issue was when trying to open a dialog in a different file but on the same server, so here you are:
Try the links below, and click the 2 first dialogs (page with id page2, and dialog.html)

http://users.cscs.wmin.ac.uk/~coloma/testJQM/testDialogWithForm2.html (uses latest)
http://users.cscs.wmin.ac.uk/~coloma/testJQM/testDialogWithForm.html (uses 1.0.1)

I cannot reproduce with either on them. Can you?

Thanks,

Anne

[toddparker]

It's also worth noting that in the default config, domcache is off so the original page could be getting culled from the DOM in some edge cases. I'd also suggest playing with turning this on.

[agcolom]

Right, thanks to @querywilly I have been able to see how to reproduce this issue. I've updated my test (links above)

I can confirm that I can reproduce with 1.0.1 and with latest. To reproduce, go to one of the pages from another page.
To prevent from happening, add data-ajax="false" to the a tag that opens the page with the form.

for example, go to http://users.cscs.wmin.ac.uk/~coloma/testJQM/testDialogWithForm.html then click on the link to go to testDialogWithForm2.html, add something in the form, press the dialog.html popup, close it, the data entered is lost.
Do the same but now use the link that has data-ajax="false", all works fine.

Anne

[digant]

Sometimes it works for me with data-ajax="false" and sometimes it doesn't. IS this a legitimate bug or is there a better way to display a modal dialog without losing the page with the form?

[josemite]

@agcolom Yes, that is the scenario that leads to the bug. Without the ajax-link the dialog works. But if I navigate to the page with data-ajax=true the page do not preserve form data after showing a dialog. Thank you for your time on this!

[josemite]

@digant For a full workaround you have to have data-ajax=false on the form as well (apart from data-ajax=false on the page transition).

So in the form tag set data-ajax="false".

[toddparker]

My guess is that the page with the form is being destroyed when we run the DOM cleanup. Can you try adding the page to the DOM cache? To cache just a particular page, you can add the data-dom-cache="true" attribute to the page's container:

<div data-role="page" id="cacheMe" data-dom-cache="true">

You can also cache a page programmatically like this:

pageContainerElement.page({ domCache: true });

http://jquerymobile.com/test/docs/pages/page-cache.html

[toddparker]

I'm pretty sure this is working as designed. If you open a form from another page, the form is being pulled in via AJAX so it's eligible for removal from the DOM when you leave the page. Opening a dialog via AJAX is a new page so it makes sense that the form would be destroyed, then re-built when you close the dialog (which is essentially a back button event). If you want to use AJAX here, turn on the DOM cache feature to keep all the AJAX-loaded pages in the DOM or use the data-ajax="false" as @josemite suggests. Closing because this isn't an issue, at least not within the way it's designed.