Home/ Questions/Q 8932599
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T09:21:00+00:00

I have a page (test.html) with a link to a dialog (dialog.html), that then

  • 0

I have a page (test.html) with a link to a dialog (dialog.html), that then loads a listview (list.html). This works in all browsers except ie7 and ie8. If I then make the dialog a separate page (test2.html) it loads the list fine in ie7 and ie8.

I have tried to debug with console.log() to find out what gets executed, and when dialog.html is loaded from test.html in ie8, none of the javascript from dialog.html is executed.

Any suggestions how to solve this?

Two minimal/simplified examples that represents my problem:
https://zero3.dk/guru/testing/test.html
https://zero3.dk/guru/testing/test2.html

test.html

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" href="styles/jquery.mobile-1.2.0.min.css" type="text/css">  
<script type="text/javascript" src="scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<a href="dialog.html">Open dialog</a>
</body>
</html>

dialog.html

<div data-role="dialog">
<script>
$('#lp-list').load('list.html',function(){
$(this).trigger("create");
});
</script>
<div data-role="header" data-theme="b">
<h1>Lokationsvælger</h1>
</div>
<div data-role="content" id="lp-list">
</div>
</div>

list.html

<ul data-role="listview">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>

test2.html

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" href="styles/jquery.mobile-1.2.0.min.css" type="text/css">  
<script type="text/javascript" src="scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.mobile-1.2.0.min.js"></script>
<script>
console.log("1");
</script>
</head>
<body>
<div data-role="dialog">
<script>
$('#lp-list').load('list.html',function(){
$(this).trigger("create");
});
</script>
<div data-role="header" data-theme="b">
<h1>Lokationsvælger</h1>
</div>
<div data-role="content" id="lp-list">
</div>
</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Solved the problem by moving all JavaScript from dialog.html to test.html.

    <!DOCTYPE html>
<html>
 <head>
  <title>test</title>
  <link rel="stylesheet" href="../styles/jquery.mobile-1.2.0.min.css" type="text/css">  
  <script type="text/javascript" src="../scripts/jquery-1.8.2.min.js"></script>
  <script type="text/javascript" src="../scripts/jquery.mobile-1.2.0.min.js"></script>
  <script>
  $(document).on('pageinit', function() {
   $('#lp-list').load('list.html',function(){
    $(this).trigger("create");
   });
  });
 </script>
</head>
<body>
 <a href="dialog.html">Open dialog</a>
</body>
</html>
    • 0