Search jQuery

jQuery Forum

jQuery Mobile

renefourn..

List editor -- CRUD (create, update, delete) best practices

in jQuery Mobile • 11 years ago

For my first jQuery Mobile app, I'm writing list editor:

Main page:

List of items, each with an edit button

Edit page:

(After clicking the edit button in main page), new form view slides in with content of item, editable.

Cancel (slide view back to main page) and Save button (does validation, if good, returns to main page)

The problem/question I have is, after editing an item, and sliding the view back to the main list, how would I update that list item with the updated content? At first I started using the multi-page template with dynamically injected code (for the edit form)... What I think I might have to do instead is, on the main page, have no content, then an event fire when the page is loaded, to load the items... This same event would fire each time the main list slides into view (say, after a cancel or update operation). Is this what you guys are doing? I realize there are a number of ways to do things, but I'm trying to wrap my head around the best practice in view of the way jQuery Mobile is architected.

Thanks!

...Rene

Attachments

Screen Shot 2011-12-05 at 9.02.29 AM.png
Size : 153.56 KB Downloads : 2278 Download

Replies(6)

watusiware

Re: List editor -- CRUD (create, update, delete) best practices

11 years ago

You haven't said whether the data is on the server or this is some kind of a "web app" with local data. I will assume the former.

Normally, when you slide back to the list page, the page will be refreshed from the server. (Which will happen prior to the page transition). So, assuming you have sent the data to the server and it has been updated, your list will be up to date.

It only avoids fetching from the server if you have specified data-dom-cache="true" for that page. In that case, it will use the page that is in the cache, and will not get it from the server again. In that case, assuming you have updated data on the server, you can use an AJAX technique to refresh the list. This might be appropriate if the page has a great deal of complexity in addition to the list itself, and you want to avoid refreshing the entire page.

renefourn..

Re: List editor -- CRUD (create, update, delete) best practices

11 years ago

Hi,

Yes, the data is from the server.

I've seen code examples where forms and other HTML snippets are fetched via Ajax and rendered without full-page HTTP requests... This makes sense to me because the browser doesn't need to make HTTP requests for the CSS and JS resources each time a user clicks Edit (or Save or Cancel). That is, doing this list editor in a multi-page template would appear to be faster and more efficient.

But from what you're saying it sounds like the common practice is actually to link to-and-from complete HTML documents. The advantage of doing it this way is, as you say, the main list is automatically refreshed when the use clicks Cancel or Save, since the HREF points back to the previous URL and that gets refreshed. Am I right? Or to put it another way, is the way you would do it?

I can't say the main list page has a great deal of complexity. I just hate latency and figured that avoiding complete page loads would be a good thing. But maybe it's not worth the effort of parsing JSON and injecting HTML fragments into a multi-page template.

It appears this is what the IBM tutorial is doing:

http://www.elijahmanor.com/2011/02/dynamically-appending-elements-to.html

...Rene

watusiware

Re: List editor -- CRUD (create, update, delete) best practices

11 years ago

If you use data-rel="back" on your link back to the main page, it doesn't load the entire document, though. It only loads the page content.

When loading a page - (as opposed to a DOCUMENT), JQM by default ignores the content of the page header. Your JS and CSS are not being re-loaded.

It's useful to watch a server log.

renefourn..

Re: List editor -- CRUD (create, update, delete) best practices

11 years ago

OK, this sounds pretty good. I didn't realize JQM was that smart.

So if I understand you correctly, if I have a data-rel="back" on edit.php, and click Save/Cancel (which links to home.php, JQM will fetch home.php (entire document), and parse it intelligent, not [re-]fetching the JS and CSS resources. Is that right?

And if this is case, then each unique view needs to be its own complete HTML file (home.php, edit.php, view.php, etc.), with all the JS and CSS resources linked (but which will not be loaded repeatedly. Is that right?

watusiware

Re: List editor -- CRUD (create, update, delete) best practices

11 years ago

Almost.

The data-rel="back" goes on your links back to home.php.

JQM "click-jacks" the page, so when the user click on a link, it intercepts the click. It then uses AJAX to load the page.

In fact, you have to go through some gyrations to do your OWN AJAX as a result. Counter-intuitively, you have to add data-ajax="false" to a form, for example, in order to use AJAX to submit the form. (you also have to have your own event function return false). Otherwise, JQM uses AJAX to submit the form and load the resulting page.

JQM is using Ajax at the PAGE level (and, remember, there's no such thing as a "page" in HTML! HTML has documents. "page" - of which there may be many loaded into a document - is strictly a JQM concept.)

The resources are normally linked on every page. And JQM will ignore the header content unless necessary. (Example, you might use data-rel="external"). So, it might be good to try to minimize the size of the header content (strip comments, etc.)

renefourn..

Re: List editor -- CRUD (create, update, delete) best practices

11 years ago

Hmm, I'm having a problem with getting the main page not to cache, e.g.:

INDEX

</ul>

</div>

(Note the microtime stamp on the count bubble.)

(I click Item 1, page slides into view)

<h1>Trips</h1>

</div>

</div>

(I click back button, main page slide back into view... but the micro time stamp is not refreshed... So the main page is cached in the DOM instead of being reloaded -- which is what I need.)

So... child links do not cache, but pages that I click Back to, they are cached. How can I force JQM to reload?

...Rene

Top Reply

Response title

Attachments

jQuery Forum

List editor -- CRUD (create, update, delete) best practices

Attachments

Replies(6)

Re: List editor -- CRUD (create, update, delete) best practices

Re: List editor -- CRUD (create, update, delete) best practices

Re: List editor -- CRUD (create, update, delete) best practices

Re: List editor -- CRUD (create, update, delete) best practices

Re: List editor -- CRUD (create, update, delete) best practices

Re: List editor -- CRUD (create, update, delete) best practices

Statistics

Tags

Actions