I have widgets/portlets similar to
<div id="100" class="portlets">
<iframe src="widgets/widget1_iframe.html"></iframe>
</div>
Within each iFrame is another iFrame. I can add multiple widgets/portlets and order them.
I have a script which (for each change) gets the SRC of the initial iFrame (so in this case widgets/widget1_iframe.html) and the SRC of the iFrame within the iFrame (in my testing version, it alerts the user).
So using the example before, let’s say I add a new one to have something similar to
<div id="200" class="portlets">
<iframe src="widgets/widget2_iframe.html"></iframe>
</div>
I then decide to move the second one above the first one. My script correctly shows widgets/widget2_iframe.html but then displays nothing for the iframe within the iframe. It then shows widgets/widget1_iframe.html correctly and also the iFrame within that iframe as well.
I did a check and the iFrame (within the iframe) within the widget/portlet is not available to the DOM.
So basically, if I had 100 portlets that I added and moved one, it would show me all the correct information apart from the iframe within the iframe of the widget/portlet that has been moved. Below is the stop event of my sortable function
stop: function (event, ui) {
var sortorder = '';
$('.' + opts.columnClass).each(function () {
var itemorder = $(this).sortable('toArray');
sortorder += itemorder.toString();
});
var substr = sortorder.split(',');
jQuery.each(substr, function () {
$.post("process.php", {
widget: $('div#' + this + ' div.widgetcontent iframe').attr("src"),
iframe: $('div#' + this + ' div.widgetcontent iframe').contents().find('iframe').attr("src")
}, function (data) {
alert("Data Loaded: " + data);
});
});
Essentially – the value for iFrame is not being passed for the widget/portlet that has been moved
I put a delay straight after
stop: function(event, ui) {of 1 second which seems to sort it