jQuery-フォームのアクションを動的に変更し、ajaxform()の成功イベント内でそれを送信することができません
質問
これは、World -Pay Payment Gatewayに投稿される支払いフォームです。 WorldPayドキュメントに従ってすべてのパラメーターがあり、直接投稿した場合は正常に機能します。
しかし、今、私はしようとしています
- ajaxは最初に私のサイトにフォームを投稿します(jquery.formを使用し、その部分は正常に動作しています)。
- 次に、JavaScriptを使用してアクション属性を変更し、WorldPayに投稿します。しかし、WorldPay Postは機能しておらず、後に何も警告されています
$("form#wpftuf").submit();
次のコードの行も警告していません。
支払いフォーム
<form name="wpftuf" id="wpftuf" method="post" action="http://url/of/ajax/file/add_credit">
<input type="hidden" name="operation" value="add_credit" id="operation" /> <?php // for ajax validation ?>
<input type="hidden" name="worldpayUrl" value="<?php echo WPurl?>" id="worldpayUrl" />
...
..
...other necessary fields
</form>
ここで私はパラメーターとしてworldpay URLを渡しています
ajax結合
$(document).ready(function()
{
var options = {
dataType: 'json',
beforeSubmit: function()
{
//alert("submitting");
},
success: function(data)
{
if(data)
{
if(data.success)
{
var worldpayUrl = $("input[id=worldpayUrl]").val();
$("form#wpftuf").attr("action",worldpayUrl);
alert("this works");
$("form#wpftuf").submit();
//This alert does not work
alert("this alert does not work "+$("form#wpftuf").attr("action"));
}
}
}
,
error:function()
{
alert("validation failed");
}
};
$("form#wpftuf").ajaxForm(options);
});
アクションを変更し、Ajaxフォームの成功イベント内で提出しようとしているので、フォームはまだ発生しているため、エラーが発生していると思います。 binded
. 。それで、私は盲目的にパッティングを試みました $("form#wpftuf").unbind(options);
, $("form#wpftuf").unbind();
$("form#wpftuf").unbind(ajaxForm);
後に $("form#wpftuf").attr("action",worldpayUrl);
ライン(1つずつ)が、すべての場合において、このエラーが発生します uncaught exception: Permission denied to call method XMLHttpRequest.open
Ajaxフォームの処理の成功後、フォームをWorldPayに動的に送信するにはどうすればよいですか。フォームはそうする必要がありますか unbinded
最初?助けてください。これには簡単な解決策があるかもしれませんが、私はそれを手に入れることができません。たくさん検索しました。
ご注意ください
WorldPay Payment Gatewayは、投稿後にユーザーがそこにいくつかのフォームを埋める必要があるため、Ajaxの提出物を再度使用してください ajaxSubmit()
うまくいきません。そこに通常のフォームの提出が必要です。
ありがとう、
サンディパン
解決
私はMalsupプラグインを使用していませんが、私が正しい場合、あなたの問題は .submit();
フォームでajaxリクエストを使用すると、通常、アクションを実行しないように設定されます return false;
あなたがそれを提出するとき、それはまだです ブロックされています!
あなたのコードは次のようなものでなければなりません:
更新しました
$("#wpftuf").submit(function(e) {
e.preventDefault(); // prevent normal form submission, same as return false;
$form = $(this);
var worldpayUrl = $("#worldpayUrl").val(); //get the World Pay php url
var mySiteFirstUrl = $("#mySiteFirstUrl").val(); //get Your Site First php url
// if ( valid ) { // make a validation here...
var posts = $(this).serialize(); // get all form fields in form like: name=value
//start the first ajax request...
$.ajax({
type: "POST",
url: mySiteFirstUrl,
data: posts,
success: function(data) { // send back a json formatted response ?
var result = $.parseJSON(data); //prepare json
// if ( result ) { //make another validation here...
// start making the changes to the form here
// fill all the form fields with the returned json data...
$form.attr('action' , worldpayUrl ); //give it the action url );
$form.unbind('submit').submit(); //submit it...
//}
}
});
//}
});
物質でこれを使用します $("#wpftuf").unbind('submit').submit(); //submit it...
他のヒント
フォームのアクションを変更し、Ajaxの成功ではなく再提出しようとした場合はどうなりますか?たとえば、使用できます setTimeout
の success
コールバックと1秒と言ってコードを実行しますか?
なぜあなたがそれをしているのかをやりたい理由がわかりませんが、スクリプトはリクエストを発信するサーバーにしか戻すことができないため、xmlhttprequestが失敗しているように見えます。
XMLHTTPREQUESTオブジェクトは、クロスドメイン、クロスプロトコル、またはクロスポートリクエストを作成することはできません。この制限を回避する方法はありますが、それをお勧めするかどうかはわかりません。
私がやることは、サーバーをWorldPayに投稿するためのプロキシとして使用することです。すなわち。ユーザーは、Ajaxを介してフォームをサーバーに投稿します。サーバーはすべてのネクタリー操作を行い、フォームをWorldPayに再提出し、結果を解析し、Ajaxを介して結果をクライアントに返します。
- なぜクライアントからajaxを介してそれを送信する必要があるのですか?
- なぜ最初にサーバーに送信する必要があるのですか?
あらゆる種類のドメインとサンドボックスの特定の問題があります。私はそれが不可能だと思います。