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>