nathanvda/cocoon — Issue #29: jQuery Mobile and AJAXily loading (add_fields) problem.
Author: dfischer
Created: 2011-11-18 00:35:14+00:00
State: open

I had an interesting issue while using jQuery Mobile and I've debugged it to being a problem with loading the page "ajaxily."

Here's the issue:

Let's say you're browsing a list of tasks.

You click task 1 on that list.

(AJAX load /tasks/1)

Now you see the "cocoon" form to add todos to this task.

There's no todo's yet, so you click "add todo"

It adds a new set of fields but it doesn't fire up anything in the `insertion-callback` hook. I tested this by trying to output anything in the console and nothing would output.

If I then try the same thing on a page that already has a `.nested-fields` then it works.

Now I don't mean to confuse this because of it being a jQuery mobile problem. It could be my complete stupidity but something is odd here when it's loaded ajaxily. It very well could be my error and some caching issue with jQuery mobile but I'd appreciate any insight to help educate me!

I originally found this issue because inputs are styled by jQuery when a page initially loads. They're styled to make them look "native." So when you dynamically add new elements (cocoon) they weren't styled natively. They had the ugly generic html input box style. So then I created a `.data("insertion-callback")` to `$(this).trigger("create");` which updates it to the jQuery mobile styling. This works... as an element from cocoon exists.