I apologize if this has been discussed elsewhere. I have searched for many hours but couldn't find anything about it. I even started a question on stackoverflow but haven't gotten any answers.
I am echo'ing through PHP a ui-dialog:
- echo "<!-- JS: ui-dialog for: $divname -->
- <script type=\"text/javascript\">
- $(\"".$element."\").click(function(e){
- $(\"#".$divname."\").load('".$url."').dialog({
- title: '".$title."',
- modal:".$modal.",
- width:'".$width."',
- height:'".$height."',
- stack: true,
- minimize: '#toolbar'
- });
- });
- </script>
- <div id=\"".$divname."\"></div>";
The script works fine, when the divname is clicked, a ui-dialog opens. The $url points to another PHP page, which in turn echo'es out a jquery accordion and some HTML content amongst other things:
- /// jQuery accordion script
- echo "<!-- JS: ui-accordion -->
- <script type=\"text/javascript\">
- $(function() { $( \"#accordion\" ).accordion({collapsible: true, active: false}); });
- </script>";
- echo "</head><body>";
- /// HTML Content
- echo "<!-- Start of accordion HTML Content -->";
- echo "<div id=\"accordion\">";
- /// Demonstration
- echo "<!-- Demonstration Header ui-accordion -->";
- echo "<h3>Demonstrate</h3>";
- echo "<!-- Demonstration HTML Content -->";
- echo "<div><p><center><form id=\"example_form\" method=\"post\">";
This is the output in Chrome and Firefox, when using web development tools:
- <!-- JS: ui-accordion -->
- <!-- Start of accordion HTML Content -->
- <div id="accordion" class="ui-accordion ui-widget ui-helper-reset" role="tablist"><!-- Demonstration Header ui-accordion --><h3 data-hasqtip="true" class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-accordion-header-active ui-state-active ui-corner-top" role="tab" id="ui-accordion-accordion-header-0" aria-controls="ui-accordion-accordion-panel-0" aria-selected="true" tabindex="0"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span>Demonstrate</h3><!-- Demonstration HTML Content --><div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" style="display: block; height: 440.8125px;" id="ui-accordion-accordion-panel-0" aria-labelledby="ui-accordion-accordion-header-0" role="tabpanel" aria-expanded="true" aria-hidden="false">
- ...
- ...
The jQuery/Javascript obviously executes, because the accordion is there and it works !
However, where is the script ? When inspecting the actual code, all I can see is the HTML code, not the Javascript code.
Is this expected or normal behaviour?
Why is the javscript not visible yet executing?
Am I missing something, or does this have to do with PHP and not jquery/javascript ?