CODEWITHSUNDEEP
javascriptphpjqueryajaxjquery-mobile
Kramer Pola
Kramer Pola

Reputation: 35

Pass header script to AJAX loaded content

As I googled the information, the ajax load in jquerymobile (JQM) doesn't contain the header javascripts. Reference topics are as follow:

jQuery mobile tap event triggered for twice

http://demos.jquerymobile.com/1.1.1/docs/pages/page-scripting.html

I would like to know how the ajax content can include the header scripts.

My example scripts (not real script) is

In index.php

<header>
<script type="text/javascript" src="script-test.js"></script>
</header>

<div id="id<?php echo $product['product_id'] ?>">
    Content<?php echo $product['product_id'] ?>
</div>

<script type="text/javascript"><!--
 ajaxload content scripts
//--></script>

In index-ajax.php

<div id="id<?php echo $product['product_id'] ?>">
 Content<?php echo $product['product_id'] ?>
</div>

**I've tried to manually add to index-ajax.html. However, it will trigger the error (load 2 times of the js) to other contents which is not inside the ajax.

Upvotes: 2

Views: 296

Answers (1)

Magadanski_Uchen
Magadanski_Uchen

Reputation: 11

According to jQuery Mobile FAQ: Why aren't my scripts and styles loading?

The reason that the head of a page is ignored when requested via AJAX is that the potential of re-executing the same JavaScript is very high (it's common to reference the same scripts in every page of a site). Due to the complexity of attempting to work around that issue, we leave the task of executing page-specific scripts to the developer, and assume head scripts are only expected to execute once per browsing session.

You will either need to have the script tied in some way to the pageinit event or you could include that in the data-role="page" but this will execute each time the page is loaded.

I would definitely advise to re-factor your code and have this based on the pageinit event.

Upvotes: 1

Related Questions