CODEWITHSUNDEEP
javascriptjqueryhtmlmodal-dialog
Ohhh
Ohhh

Reputation: 435

Load Local HTML Files Dynamically inside the jQuery UI Dialog

Load Local HTML Files Dynamically inside the jQuery UI Dialog

Here is my code below, I'm trying to load and display the content of wtf.html in the modal. But it doesn't show in Google Chrome 35, 36 nor IE, however, it works fine in Firefox 28 and 30..

We did I do wrong?

<div></div>

<script type="text/javascript">

$(function ()    {
    $('<div>').dialog({
        modal: true,
        open: function (){$(this).load('wtf.html');},         
        height: 400,
        width: 400,
        title: 'Dynamically Loaded Page'
    });
});

</script>

This is from Firefox

This is from Google Chrome

Upvotes: 0

Views: 1886

Answers (2)

Zaggy
Zaggy

Reputation: 74

Nothing wrong. It is a known issue with Chrome. See here for details: https://code.google.com/p/chromium/issues/detail?id=40787

The same must be for IE. The best way to fix this issue is to use a Development web server. For Windows I would suggest Mongoose. It is small fast and lightweight.

PS: You can go around this issue in Chrome by launching Chrome with --disable-web-security flag, but it is not encouraged. Better to use a web server.

Upvotes: 2

charlietfl
charlietfl

Reputation: 171679

I think the key is you state these are local files. Some browsers block use of ajax when file is opened from file: protocol.

You should be able to adjust security settings to allow for it. Alternatively install a localhost server on your computer

Upvotes: 0

Related Questions