I want to show a JQuery dialog conditionally on click event of an hyperlink .

我有一个类似于条件1的要求,打开一个JQuery对话框,如果条件1不满足,导航到由‘href’标记引用的页面,该页面的单击事件有问题.

I am able to call a function on link's click event. This function now checks the said condition by executing another URL (that executes my Spring controller and returns response).

所有的工作都很完美,只有window.open被弹出窗口拦截器阻止.

$('a[href*=/viewpage?number]').live('click', function(e) {
    e.preventDefault();
    redirectionURL = this.href;
    pageId= getUrlVars(redirectionURL)["number"];
    $.getJSON("redirect/" + pageId, {}, function(status) {
        if (status == null) {
            alert("Error in verifying the status.");
        } else if(!status) {
            $("#agreement").dialog("open");
        } else {
            window.open(redirectionURL);
        }
    });
});

如果我从代码中删除e.preventDefault();,Popop blocker不会阻止页面,但是对于条件1,它会打开对话框并打开"href"页面.

如果我解决了一个问题,就会给另一个带来问题.我不能同时给这两个条件以正义.

你能帮我解决这个问题吗?

Once this is solved I have another issue to solve i.e. navigation on dialogue's OK event :)

推荐答案

Popup blockers will typically only allow window.open if used during the processing of a user event (like a click). In your case, you're calling window.open later, not during the event, because $.getJSON is asynchronous.

You have two options:

  1. Do something else, rather than window.open.

  2. 使Ajax调用同步,这通常是您应该避免的,因为它锁定了浏览器的UI.$.getJSON相当于:

    $.ajax({
      url: url,
      dataType: 'json',
      data: data,
      success: callback
    });
    

    ...and so you can make your $.getJSON call synchronous by mapping your params to the above and adding async: false:

    $.ajax({
        url:      "redirect/" + pageId,
        async:    false,
        dataType: "json",
        data:     {},
        success:  function(status) {
            if (status == null) {
                alert("Error in verifying the status.");
            } else if(!status) {
                $("#agreement").dialog("open");
            } else {
                window.open(redirectionURL);
            }
        }
    });
    

    Again, I don't advocate synchronous ajax calls if you can find any other way to achieve your goal. But if you can't, there you go.

    以下是由于异步调用而导致测试失败的代码示例:

    Live example | Live source (The live links no longer work because of changes to JSBin)

    jQuery(function($) {
      // This version doesn't work, because the window.open is
      // not during the event processing
      $("#theButton").click(function(e) {
        e.preventDefault();
        $.getJSON("http://jsbin.com/uriyip", function() {
          window.open("http://jsbin.com/ubiqev");
        });
      });
    });
    

    下面是一个使用同步调用确实有效的示例:

    Live example | Live source (The live links no longer work because of changes to JSBin)

    jQuery(function($) {
      // This version does work, because the window.open is
      // during the event processing. But it uses a synchronous
      // ajax call, locking up the browser UI while the call is
      // in progress.
      $("#theButton").click(function(e) {
        e.preventDefault();
        $.ajax({
          url:      "http://jsbin.com/uriyip",
          async:    false,
          dataType: "json",
          success:  function() {
            window.open("http://jsbin.com/ubiqev");
          }
        });
      });
    });
    

Jquery相关问答推荐

Django BaseDataTableView-Filter_queryset方法不起作用

如何限制select2中的字符?

Ajax 替换而不是追加

如何在 jquery 中包含 !important

将一个类动态添加到 Bootstrap 的popover容器中

jQuery - 向下滚动时缩小的粘性标题

纯css关闭按钮

获取单选按钮组的值

window.onbeforeunload 和 window.onunload 在 Firefox、Safari、Opera 中不起作用?

jQuery.parseJSON 与 JSON.parse

jQuery UI 滑块(以编程方式设置)

jquery变量语法

如何使用 jQuery 停止默认链接点击行为

使用 JavaScript 获取用户代理

IE8 和 JQuery 的 trim()

为什么要定义一个匿名函数并将 jQuery 作为参数传递给它?

jQuery clone() 不克隆事件绑定,即使使用 on()

Chrome 中的 AJAX 发送选项而不是 GET/POST/PUT/DELETE?

将变量的值复制到另一个

小于 10 给数字加 0