How to load a remote content into a dialog box with jquery?
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.
This is not possible basically because ajax doesn't support cross-domain request and http to https will be regarded as one.
You will need server-side code on your same domain to perform the fetching for you.
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>
加载中,请稍侯......
精彩评论