Loading inline scripts inside the external page loaded in a iframe in a accordion div

StackOverflow https://stackoverflow.com/questions/21154496

Question

I am using jQuery Accordion.

In the accordion i am trying to load an external page in iframe which is in accordion div. The page is loaded but the inline scripts are not executing only html contents are rendered in the iframe.

However if i am trying with jQuery tabs it is working properly.

Here is the code for accordion:

$(function(){
     var accordion = $("#accordion").accordion();      

     $("#newSection").on('click',function(){
        var iDiv = $('<div id="div' + counter + '"</div>'),
        frame = $('<iframe id="frame" src="/Common/NewPage"></iframe>'),
        h3 = $("<h3>New Section</h3>");

        iDiv.append(frame);
        accordion.append(h3 );
        accordion.append(iDiv);       
        counter += 1;
        accordion.accordion("refresh");        
        accordion.accordion( "option", "active", -1);
     });
});

Below is the code of the new page to be loaded in the frame

<script src="<%= Url.Content("~/Scripts/modernizr-2.5.3.js")%>"></script>
<script src="<%= Url.Content("~/Scripts/jquery-1.9.1.js")%>"></script>
<script src="<%= Url.Content("~/Scripts/jquery-ui.js")%>"></script> 

<!doctype html>   
   <html>
      <head runat="server">
         <title></title>
      </head>

      <script>  //this section is not executing
        $(document).on('ready', function () {       
          $.getScript("../Scripts/lookup.js");
          $.getScript("../Scripts/page.js");          
       });   
     </script>

    <body>

      //body elements

    </body>  
</html>

The script section is not executed when loading the page but with the jQuery tabs, its working properly.

What be the problem? Please help to solve this.

Was it helpful?

Solution

You have to include jquery in your iframe.

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

Ok, then check your path, if it is correct -

$.getScript("~/Scripts/lookup.js");
$.getScript("~/Scripts/page.js");

If this also doesn't work, make an Inspect element to find out errors.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top