0

I'm having issues with browsers reporting a javaScript error on my page. Although the page is fully functional, I prefer not having javaScript errors as it looks bad to users.

The error I'm getting in FF is:

Error: SyntaxError: missing } in XML expression
Source File: http://localhost/resources/adagiotips.php
Line: 14, Column: 4
Source Code:
 });

I'm using the getScript() function in jQuery to target a php page which renders code containing javascript and html. I then use the output from this page to populate the inner html of a div. This is what I have on page 1:

<script type="text/javascript">
    jQuery(document).ready(function(){

        jQuery.getScript('/includes/showmehow_videolist.php?sort=recent&type=desc', function(output){
            jQuery("#apple").html(output);
        });

    });
</script>

<div id="apple">content will populate here</div>

And on "showmehow_videolist.php" I have a php while loop which writes a list of jQuery functions and some html. The code looks something like this:

<script type="text/javascript">
jQuery(document).ready(function(){

<?PHP
$result4 = mysql_query("SELECT * FROM videos")or die(mysql_error());
while($row4 = mysql_fetch_array($result4)){
?>

        jQuery("#video_<?=$row4['vid_id']?>").fancybox({
            'width'             : <?=$new_width_parsed?>,
            'height'            : <?=$new_height_parsed?>,
            'autoScale'         : false,
            'transitionIn'      : 'elastic',
            'transitionOut'     : 'none',
            'type'              : 'iframe',
            'scrolling'         : 'no',
            'overlayColor'      : '#000',
            'overlayOpacity'    : 0.6
        });


    <?
    }//end while 
    ?>
}); //end document.ready function 


</script>


<div>some content</div>

When I remove the javascript portion from page 2 I get a different error in FF:

Error: SyntaxError: XML can't be the whole program
Source File: http://localhost/resources/adagiotips.php
Line: 1136, Column: 6
Source Code:
</div>

Any ideas? Is the problem because I'm populating the innerhtml of a div with javascript ... from javascript? Like I said, everything works fine, its just a matter of understanding why the browser is telling me there is an error.

Any help would be much appreciated, thanks.

output of /includes/showmehow_videolist.php:

<script type="text/javascript">
jQuery(document).ready(function(){


        jQuery("#video_82").fancybox({
            'width'             : 782,
            'height'            : 720,
            'autoScale'         : false,
            'transitionIn'      : 'elastic',
            'transitionOut'     : 'none',
            'type'              : 'iframe',
            'scrolling'         : 'no',
            'overlayColor'      : '#000',
            'overlayOpacity'    : 0.6
        });



        jQuery("#video_83").fancybox({
            'width'             : 782,
            'height'            : 720,
            'autoScale'         : false,
            'transitionIn'      : 'elastic',
            'transitionOut'     : 'none',
            'type'              : 'iframe',
            'scrolling'         : 'no',
            'overlayColor'      : '#000',
            'overlayOpacity'    : 0.6
        });



        jQuery("#video_84").fancybox({
            'width'             : 782,
            'height'            : 720,
            'autoScale'         : false,
            'transitionIn'      : 'elastic',
            'transitionOut'     : 'none',
            'type'              : 'iframe',
            'scrolling'         : 'no',
            'overlayColor'      : '#000',
            'overlayOpacity'    : 0.6
        });




    }); //end document.ready function 


</script>


<div style="overflow-x:hidden; overflow-y: auto; height:350px; width:725px;" id="main_div_of_video_links">







        <div class="tab1">
            <div class="tab2">
                <span class="h2_standard">5</span> <span class="sm">views</span>
            </div>
            <div class="tab3">
                 <img src="/images/icon_video_sm.gif" alt="History - Show Me How Video!" /> <a id="video_181" href="../video_pop.php?id=181" class="newAStyle">Adagio OrderEntry History</a> 

                 <!--<img src="/images/flame_sm.png" />--> <img src="/images/new_icon.png" />       


            </div>
            <div class="tab4">
                <span class="sm"><em>Added: </em>Jul 23 2012</span>
            </div>

            <div style="clear:both"></div>
        </div>







        <div class="tab1">
            <div class="tab2">
                <span class="h2_standard">5</span> <span class="sm">views</span>
            </div>
            <div class="tab3">
                 <img src="/images/icon_video_sm.gif" alt="Alternate Price Lists - Show Me How Video!" /> <a id="video_165" href="../video_pop.php?id=165" class="newAStyle">Adagio Inventory Alternate Price Lists</a> 

                 <!--<img src="/images/flame_sm.png" />--> <img src="/images/new_icon.png" />       


            </div>
            <div class="tab4">
                <span class="sm"><em>Added: </em>Jul 13 2012</span>
            </div>

            <div style="clear:both"></div>
        </div>







        <div class="tab1">
            <div class="tab2">
                <span class="h2_standard">1</span> <span class="sm">views</span>
            </div>
            <div class="tab3">
                 <img src="/images/icon_video_sm.gif" alt="Special Prices - Show Me How Video!" /> <a id="video_166" href="../video_pop.php?id=166" class="newAStyle">Adagio OrderEntry Special Prices</a> 

                 <!--<img src="/images/flame_sm.png" />--> <img src="/images/new_icon.png" />       


            </div>
            <div class="tab4">
                <span class="sm"><em>Added: </em>Jul 13 2012</span>
            </div>

            <div style="clear:both"></div>
        </div>






</div>
Jiminy Cricket
  • 908
  • 1
  • 9
  • 24
  • what is the output of jQuery.getScript('/include...');? – Kalpesh Aug 06 '12 at 16:53
  • The usual fix for this problem is to wrap your Javascript code in a CDATA section, so `` – DaveRandom Aug 06 '12 at 16:59
  • just added output of /includes/showmehow_videolist.php above. I don't think the problem is the output. I tried just outputting the word "hello" and I get: Error: ReferenceError: hello is not defined Source File: http://localhost/resources/adagiotips.php Line: 0 – Jiminy Cricket Aug 06 '12 at 17:07
  • Er, isn't `getScript()` for loading JS, rather than HTML that contains *some* JS? – Mitya Aug 06 '12 at 17:07

2 Answers2

0

Try these changes:

  1. In page 1, remove the line jQuery("#apple").html(output);. You do not need to embed the returned script into a div. The script from page2 will be parsed and run by jQuery without the need to embed it into page1

First try the above and if that doesn't resolve the issue, perform this second step as well:

  1. In page 2, remove the lines:

    < script type="text/java script"> jQuery(document).ready(function(){} < /script>

This is because, the JS that is being fetched using jQuery.getScript is already being run in the context of and within a jQuery.ready() fn, so there should not be the need to wrap your javascript in page2, with it again..

raidenace
  • 12,789
  • 1
  • 32
  • 35
  • no luck with either. I removed the jQuery.html() request on page 1 and just have it loading the script. I then changed the script on page 2 to just the word hello and I still get an error. Perhaps I'm not using getScript properly? – Jiminy Cricket Aug 06 '12 at 17:25
0

I got it, turns out using getScript and html() was not the way to go, instead I should have used the load() function:

jQuery('#apple').load('/includes/showmehow_videolist.php?sort=recent&type=desc');

no errors ;)

Jiminy Cricket
  • 908
  • 1
  • 9
  • 24
  • I didnt see that you had HTML code along with the JS being rendered. Yup, load is certainly the way to go in this case :) – raidenace Aug 07 '12 at 16:21