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>
Try these changes:
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 page1First try the above and if that doesn't resolve the issue, perform this second step as well:
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..
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 ;)