Trouble Displaying an iFrame

[verticon]

Hello.

I am developing an application that uses Square to process user payments. In order to accomplish the payment processing my app displays a UI that my app obtains from the Square server, This Square UI takes the form of an iframe that allows the user to interact directly with the Square server in order to provide credit card information.

If I display the Square UI directly on my page then all is good. See the "SquarePaymentProcessing" screen shot.

However, if I display the Square UI in a jquery-modal popup then it does not render, even though the other elements that my application adds to the jquery-modal popup (such as the Submit Payment button) do appear properly. See the "SquarePaymentProcessingJqueryModal" screen shot wherein significant information is being displayed in the JavaScript Console (I added a red border to the Square UI).

If you folks cannot offer me any other help then at least please tell me this: Should I have an expectation that jquery-modal is capable of displaying an iframe?

Thank you for your consideration.

[verticon]

Hello again.

I'm circling back around to say that I am doing some experimenting with jquery-modal and iframes. I find that I can indeed display an iframe in the popup. Great! So, there must be something about that iframe being obtained from Square. Sigh. I will muddle on.

I'm gonna leave this issue open for a bit in the hope that someone will choose to throw some wisdom my way (I'm a bit of a nob, actually).

[verticon]

One more time, y'all.

I'm making some progress on figuring out what the problem is by digging into the Square sample code that I am using. I am concluding that it is not a jquery-modal issue. Sorry to have troubled you needlessly.

[verticon]

Well folks, I'm back. It turns out that I was premature in closing the issue. Here is where I currently am with it:

Below you will see two, Safari screen shots wherein the developer tools are showing - Before and After

In the Before screenshot you can see the following:
1) The Sources pane shows that execution has broken upon the line of code that causes the jquery-modal popup to be presented.
2) The console pane shows an examination of the element that will be displayed by jquery-modal. You can see that it has been expanded to the point where the underlying iframe's document can be seen. Please observe that the document's body is not empty.

In the Afte screenshot you can see the following:
1) The Sources pane shows that execution has broken at the next line of code in response to my having performed a single step.
2) The console pane shows a reexamination of the element that is being displayed by jquery-modal. Again you can see that it has been expanded to the point where the underlying iframe's document can be seen. Please observe that the document's body is now empty.

Huh? I will continue to dig. Any remarks form you all will be much appreciated.

Before:

After:

[verticon]

Back with another Before and After, y'all.

Before: I've broken execution at a line of code in jquery.modal.min.js. In the console I am examining this.$elm. Note that the iframe's document's body is populated.

After: I've single stepped over the jquery.modal.min.js. line of code and reexamined this.$elm. Note that iframe's document's body is now empty.

[verticon]

It seems that jquery's append() method is the culprit. I've tried to step into the code and figure out what is happening but I'm just not smart enough. And, it seems that jquery-modal is no longer getting any love and attention. Shucks! Guess I'll have to go elsewhere.

[verticon]

Hey. Check. out my hard coded, that ain't the way to do it, modification of jquery's append method and then check out that beautiful popup! What? Huh? The hell with it. I'll take it.

append: function() {

	if (arguments[0].attr('id') === 'cardPayment') { return }

	return domManip( this, arguments, function( elem ) {
		if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
			var target = manipulationTarget( this, elem );
			target.appendChild( elem );
		}
	} );
},