提交表单时角度事件成功打开弹​​出窗口 [英] angular event success when submit form it opens popup

查看:110
本文介绍了提交表单时角度事件成功打开弹​​出窗口的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个页面,通过角$ http.post(..)
将数据发布到ASPNET MVC页面,当调用完成时我必须提交表单。

I have a page which post data to a ASPNET MVC page by angular $http.post(..) and when the calling finish I have to submit a form.

基本上我会做以下事情:

Basically I do the following:

<html ng-app>
<body data-ng-controller="testController">
    <form id="Checkpay" name="Checkpay" style="margin: 0" method="post" action="https://www.sandbox.paypal.com/cgi-bin/webscr" target="_blank" class="ng-pristine ng-valid">
        <input type="hidden" name="quantita" id="qtytext" value="0">
        <input type="hidden" name="cmd" value="_xclick">
        <input type="hidden" name="item_name" value="Le Spose di Nika">
        <input type="hidden" name="business" value="TEST@TEST.it">
        <input type="hidden" name="currency_code" value="EUR">
        <input type="hidden" name="cancel_return" id="cancel_return" value="">
        <input type="hidden" name="return" id="return" value="">
        <input type="hidden" name="no_shipping" value="1">

        <input type="hidden" id="H_amount" name="amount" value="719.80">
        <input type="hidden" id="H_first_name" name="first_name">
        <input type="hidden" id="H_address1" name="address1">
        <input type="hidden" id="H_city" name="city">
        <input type="hidden" id="H_state" name="state">
        <input type="hidden" id="H_zip" name="zip">
        <input type="hidden" id="H_email" name="email">
        <input type="hidden" id="Country" name="country">
        <input type="hidden" id="charset" name="charset" value="utf8">
        <input type="hidden" id="rm" name="rm" value="2">
        <input type="hidden" id="notify_url" name="notify_url" value="">

        <input id="Submit1" type="submit" value="submit_post" />
    </form>
    <input id="Submit2" type="button" data-ng-click='pay()' value="js_post" />

</body>



</html>

<script src="http://localhost:27433/Scripts/jquery-1.7.1.min.js"></script>
<script src="http://localhost:27433/Scripts/jquery-ui-1.8.20.min.js"></script>
<script src="http://localhost:27433/Scripts/angular.js"></script>
<script>

    function test() {

    }

    function testController($scope, $http) {
        var URL = "http://backend.MYSITE.com/";

        $scope.payTest = function () {


            var PAYPAL_URL_RELEASE = "https://www.paypal.com/cgi-bin/webscr";
            var PAYPAL_URL_SANDBOX = "https://www.sandbox.paypal.com/cgi-bin/webscr";

            $('#cancel_return').val(URL + '/ErrorPay');
            $('#return').val(URL + '/Success');
            $('#notify_url').val(URL + '/PayPalReceiverIPN.ashx?idOrder=');
            document.forms["Checkpay"].action = PAYPAL_URL_RELEASE;
            document.forms["Checkpay"].submit();

            console.log('paytest is executed!');
        }

        $scope.pay = function () {

            ////$.post(  URL + "/Order/Create", JSON.stringify({ newOrder: 1 }))
            ////    .success(function (datdata, status, headers, configa) {
            ////        console.log(' $.post success');
            ////        $scope.payTest();
            ////    }).error(function (data, status, headers, config) {
            ////        console.log(' $.post failure');
            ////    });


            $http.post(
               URL + "/Order/Create", JSON.stringify({ newOrder: 1 })
                 ).success(function (datdata, status, headers, configa) {
                     console.log('http success');
                     $scope.payTest();
                 }).error(function (data, status, headers, config) {
                     console.log('http failure');
                 });
        }
    }
</script>

当我做document.forms [Checkpay]。submit();我方面有一个重定向
到页面进入我的表单的属性操作,而不是我得到一个页面的弹出窗口,我将重定向。

When I do document.forms["Checkpay"].submit(); I aspect to have a redirect to the page which is into the attribute action of my form instead I get a popup of the page which I would redirect.

我试图把函数payTest()从成功中取出然后它起作用然后我认为问题是
对象$ http(或ajax)如何处理成功委托。

I have tried to put the function payTest() out of "success" and it works then I supposed that the problem is how the object $http (or ajax) handle the "success" delegate.

问题是:当$ http.post(....)完成调用时,无论如何都要对页面进行重定向?

the question is: there is anyway to make a redirect of the page when $http.post(....) finish is calling?

谢谢

推荐答案

好的,问题的答案和解释在这里
在没有弹出窗口阻止的情况下在新窗口中打开页面

Ok, the answer and the explanation to the problem is here Open page in new window without popup blocking

问题:当我执行form.submit()时,我得到一个弹出窗口而不是在浏览器上获得一个新选项卡

PROBLEM: when I perform form.submit() I get a popup window instead to get a new tab on browser

原因:我已经执行了将ajax成功委托给ajax调用,这意味着用户d id无法启动esplicitilly提交,因此浏览器会弹出响应并且如果BLOCK为ON则会弹出
阻止弹出窗口

REASON: I have performed that submiut into a success delegate of ajax calling, that means the user did not start esplicitilly the submit so the browser respond with a popup and with blocked popup if BLOCK IS ON

解决方案:我们可以通过两种方式解决问题
1)设置target =_ self但我们将获得提交到父页面的响应
2)在ajax调用上使用aa synchrone标志。注意似乎角度$ http使用硬编码标志的异步请求

SOLUTION: we can solve the situation in two way 1) set target ="_self" but we will get the respond of submit into the parent page 2) use a a synchrone flag on ajax calling. Pay attention it seems the angular $http use async requests by hard coded flag

thnak所有答案

这篇关于提交表单时角度事件成功打开弹​​出窗口的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆