jQuery iframe Select Source DOM Element

Question

I need to create a jQuery dialog with an iframe that points to a page under the same domain. I just want a specific ID of that page, not the whole thing. I can't use .load() because there are links on the source page and if someone clicks on them then the page with the dialog box refreshes and I can't have that. I hope there's a way around this. This is what I tried:

$('<iframe src="'+frameurl+'" id="dialogframe" frameBorder="0" />').contents().find("#idthatiwant").dialog({attributes});

Answer 1

This may not be exactly what you're looking for, and if not, I appologize, but it worked for me when I was under the same crunch.

The idea is to set the href of a div, normal ajax, but to override click and submit events to use ajax instead. Thus working much like an iframe, but not actually being an iframe.

I had a div named externalContainer, and here's the js:

$('#externalContainer form').live("submit", function(event) { 
    $(this).ajaxSubmit({target: '#externalContainer'});
    return false;
});

$('#externalContainer a').live('click', function(event){
    var jthis = $(this);
    if (jthis.attr('href') != "#"){
    event.preventDefault();
        $('#externalContainer').load(jthis.attr('href'));
    }
});

I would then simply call $('#externalContainer').load("file.php"); to load the new html in.

This doesn't have all the "features" of a normal iframe, but may be able to work for what you need.

It should be noted that I found this technique I believe on another question on stackoverflow :).

Edit: It should be noted that this also allows ajax stuff from within the "iframe" which is why I verify that the href doesn't equal '#'. Also this depends on the ajaxForm jquery plugin if you are planning on using the form submit stuff.