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.

Était-ce utile?

La 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.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top