Custom Javascript/Jquery won't load unless I reload the page. [#1677350]

My custom javascrip on a does not load until I reload the page.
my js is attached to a form in a custom module. I can fix it in two ways:
1. Disable ajax
2. Sett Link Binding Enabled (linkBindingEnabled) to false

But both ways seem to change the smooth behaviors and I lost the 'loading" dialog box.
Please let me know if there is a proper way of adding custom js.

Comments

Comment #1

minoroffense commented 11 July 2012 at 17:51

Status:

Active

» Postponed (maintainer needs more info)

Can you give me more details on what/how you're adding the js?

Are you using the '#attached' FAPI option? http://api.drupal.org/api/drupal/developer!topics!forms_api_reference.ht...

When you refer to disable ajax, you mean in the jquery mobile settings correct?

Comment #2

Schoonzie commented 17 July 2012 at 22:25

Status:

Postponed (maintainer needs more info)

» Active

I think I'm having the same problem.

I'm using jQM with Ubercart. On the Ubercart /cart/checkout page it adds another javascript file to handle a few actions on the checkout form (change the Region options when the Country is changed).

Because jQueryMobile only loads the content from within the data-role="page" container when it changes pages, any new scripts or css files that are added on subsequent pages are ignored.

This page has a little more info on it:

Any unique assets referenced by pages in a jQuery Mobile-driven site should be placed inside the "page" element (the element with a data-role attribute of "page"). For example, links to styles and scripts that are specific to a particular page can be referenced inside that div. However, a better approach is to use jQuery Mobile's page events to trigger specific scripting when certain pages load. Note: you can return a page from the server with a data-url already specified in the markup, and jQuery Mobile will use that for the hash update. This allows you to ensure directory paths resolve with a trailing slash and will therefore be used in the base url path for future requests.

I'm not sure if this is within the scope of the module or not.

A dodgy way to get around this is to print all the scripts and styles in the body of the page. Eg

 <div data-role="page" class="<?php print $node_classes; ?>">
 
  <?php print $styles; ?>
  <?php print $scripts; ?>

A better way would be to try and remember what scripts were loaded in the first page load and then only print the additional ones to the body on subsequent pages.