How to load a remote content into a dialog box with jquery?

Question

I'm trying to load a remote content of my site with jquery, but I constantly get an error:

XMLHttpRequest cannot load 'anylink_here' Origin null is not allowed by Access-Control-Allow-Origin.

Here is my code:

jQuery(function(){ $('#checkout').submit(function(e){ //prevent default behavior and hide possibly existing pop-up e.preventDefault(); //process request var form = this; var url = form.action; var dialog = $('<div id="lightbox_dialog"></div>').appendTo('body'); // load remote content dialog.load( url, function (response, status, xhr){ dialog.html(response); }); dialog.dialog(); //prevent the browser to follow the link return false; }); });

And a form code:

<form id="checkout" action='http://me.me/' method='get'> <input type="image" class="class1" onclick="this.form.action='http://en.wikipedia.org/wiki/Sample'" title="Title" value="" src="http://4cornersautoloan.com/images/SmallButton.gif"> </form>

I also need to do it for the same domain but from http to https.

see this thread, I believe: stackoverflow.com/questions/4106993/… — Gregg B
– Gregg B, Commented Nov 18, 2010 at 16:27

Denys S. · Accepted Answer · 2010-11-18 16:45:10Z

1

This is not possible basically because ajax doesn't support cross-domain request and http to https will be regarded as one.

answered Nov 18, 2010 at 16:45

Denys S.

6,56313 gold badges45 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Phrogz · Accepted Answer · 2010-11-18 16:49:34Z

1

You will need server-side code on your same domain to perform the fetching for you.

answered Nov 18, 2010 at 16:49

Phrogz

304k115 gold badges669 silver badges758 bronze badges

2 Comments

Denys S. Over a year ago

What I have for this task is JS, nothing more.

Phrogz Over a year ago

@den-javamaniac Then sadly (or happily, if your intent was nefarious :) you are out of luck. (Unless the server supports JSONP.)

Caroline · Accepted Answer · 2013-03-09 17:02:03Z

How about iframing it in?

<body> <p id="open">Click to open</p> <div id="dialog" title="window title"> <p><iframe src="popup.html" ></iframe></p> </div> <script> $('div#dialog').dialog({ autoOpen : false, show : "scale", hide : "scale", }); $('#open').click (function (event) { if ($("#dialog").dialog("isOpen")); else $("#dialog").dialog("open"); }); </script> </body> </html>

Collectives™ on Stack Overflow

How to load a remote content into a dialog box with jquery?

3 Answers 3

Comments

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Linked

Related