0

I have a dialog like this

<div id="dialog">
  <iframe id="myIframe" src=""></iframe>
</div>
<button id="opener1">Open Dialog</button>
<button id="opener2">Open Dialog</button>

My script is as follows

$(function () {
  $("#dialog").dialog({
    autoOpen: false,
    show: "fade",
    hide: "fade",
    modal: true,
    height: 'auto',
    width: 'auto',
    resizable: true,
    title: 'Vessels'
  });

  $("#opener1").click(function () {
    $('#myIframe').src = 'http://www.w3schools.com';
    $("#dialog").dialog("open");
    return false;
  });

  $("#opener2").click(function () {
    $('#myIframe').src = 'http://www.google.com';
    $("#dialog").dialog("open");
    return false;
  });
});

I want to set the url of the iframe dynamically before the dialog is displayed. I tried the above code, but not working

Krishanu Dey
  • 6,326
  • 7
  • 51
  • 69
  • http://stackoverflow.com/questions/7551912/jquery-force-set-src-attribute-for-iframe – rynhe Jan 03 '14 at 04:47
  • yes.. I tried that.. That is working.. but see this..http://jsfiddle.net/krishanudey/94KUB/ when you click on a button and close the dialog and then click on other button, initially it's showing previous page. I dont that to happen... – Krishanu Dey Jan 03 '14 at 04:51

3 Answers3

2

You can Try this

$(function () {
    $("#dialog").dialog({
        autoOpen: false,
        show: "fade",
        hide: "fade",
        modal: true,
        height: 'auto',
        width: 'auto',
        resizable: true,
        title: 'Vessels',
        close: function( event, ui ) {
           $('#myIframe').attr('src', '');
         }
    });

    $("#opener1").click(function () {
        $('#myIframe').attr('src', 'http://www.w3schools.com');
        $("#dialog").dialog("open");
        return false;
    });

    $("#opener2").click(function () {
        $('#myIframe').attr('src', 'http://www.example.com/');
        $("#dialog").dialog("open");
        return false;
    });
});

While closing the dialog box just simply set the iframe src as empty

Demo : http://jsfiddle.net/94KUB/3/

rynhe
  • 2,509
  • 1
  • 21
  • 27
1

Try this,

$('#myIframe')[0].src = 'http://www.w3schools.com';

or use attr() like,

$('#myIframe').attr('src','http://www.google.com');

Demo

Rohan Kumar
  • 40,431
  • 11
  • 76
  • 106
0

You can't set the source directly. You have to change the iframe's src attribute like this: 

$('#myIframe').attr('src','http://www.w3schools.com');
Robbert
  • 6,481
  • 5
  • 35
  • 61
  • yes.. I tried that.. That is working.. but see this..http://jsfiddle.net/krishanudey/94KUB/ when you click on a button and close the dialog and then click on other button, initially it's showing previous page. I don't that to happen... – Krishanu Dey Jan 03 '14 at 04:53