CODEWITHSUNDEEP
jqueryajaxloadreload
Sweepster
Sweepster

Reputation: 1949

jQuery inserting a page into div breaks javascript

My index.php has a jquery ajax call that inserts getposts.php into my #content div. This works fine.. The problem is that getposts.php has some javascript (more jQuery) in it and while Chrome does execute the code fine, Firefox doesn't.

If I include the javascript as a file (setchecked.js) firebug is looking for setchecked.js_=1322020697832

If I include the javascript directly into getposts.php, the javascript is completely ignored (it doesn't even show up in the source code)

Does anyone know why and how to fix it?

index.php

<script type="text/javascript" src="fetchposts.js"></script>
<div id="content"></div>

fetchposts.js

$(document).ready(function() {
$.ajax({
    url: 'getposts.php',
    type: 'POST',
    success: function (fetched) {
        $('#content').load('getposts.php');
    },
});
});

getposts.php (this makes firebug look for setchecked.js_=1322020697832 

<script type="text/javascript" src="setchecked.js"></script>

or getposts.php (the javascript is completely absent from the source code)

<script type="text/javascript">
$(document).ready(function() {
// set $checked values
$.ajax({
    url: 'query.php',
    type: 'POST',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    async: true,
    cache: false,
    success: function (msg) {
        ------ do some fun stuff that works --------
    },
});
});
</script>
         --------------- some php and html that DOES display -------------

Again, my problem isn't the content of my javascript, but how to get the javascript to work within the #content. Chrome does execute the code without problem. For some reason, it is firefox being picky. Firebug reports no errors, other than looking for the wrong file or completely ignoring it.

The rest of getposts.php (the html and php code) DOES display inside my #content in both Chrome and Firefox.

Upvotes: 1

Views: 1130

Answers (1)

natedavisolds
natedavisolds

Reputation: 4295

I know that the scripts are working, but I think that they need some refactoring. From the code I see that you are

  1. Loading content from getposts.php into the #content
  2. Once loaded, you want to get some JSON
  3. When JSON is loaded, you want to some fun stuff with it

The code can be improved by:

  • Not making so many ajax calls
  • Using specialized, ajax methods specifically for each task
  • Putting them within a single file

fetchposts.js

$(document).ready(function() {
    var someFunStuff = function(msg) {
        // do some fun stuff that works 
    };

    var setChecked = function() {
        $.getJSON('query.php', someFunStuff);
    };

    $('#content').load('getposts.php', setChecked);
});

If I've misunderstood something that you want to get done or you have some more specifications that need to be introduced, let me know and I will respond as needed.

Update

I see a comment that you've made about using a single javascript file. What is it that you are needing to get from the separate database?

Upvotes: 1

Related Questions