Question

基本上如果这有效。它会打开一个查询对话框

$("#opener").click(function() {
    $.ajax({
        url: "hello.php",
        success: function(data) {
            $("#dialog").html(data).dialog("open");
        }
    });

    $("#dialog").dialog({
        bgiframe: true,
        autoOpen: false,
        height: 400,
        width: 400,
        modal: true
    });
});

我想从

中调用它

onClick="callMyFuncion(withDetails);

并且基本上用myDetails发送ajax get请求..继承人我正在尝试

function getDayDetails(details) {
    $.ajax({
        type: "GET",
        data: details,
        url: "hello.php",
        success: function(data) {
            $("#dialog").html(data).dialog("open");
        }
    });

    $("#dialog").dialog({
        bgiframe: true,
        autoOpen: false,
        height: 400,
        width: 400,
        modal: true
    });
};

并从此处调用

<td class="everyday" onClick="getDayDetails(monthID=<?php echo $month; ?>&dayID=<?php echo $day_num; ?>&yearID=<?php echo $year; ?>);">

我是Javascript / Jquery的新手..感谢您的帮助

Answer 1

Ajax是异步 ..因此它不会以这种方式工作..

试试这个

$(function(){ // In the DOM ready
              // define the code for the dialog
    $("#dialog").dialog({
        bgiframe: true,
        autoOpen: false,
        height: 400,
        width: 400,
        modal: true
    });
});

function getDayDetails(details) {
    $.ajax({
        type: "GET",
        data: details,
        url: "hello.php",
        success: function(data) {
            $("#dialog").html(data).dialog("open");
            // Add the new HTMl to the dialog and then open..
        }
    });
}

Answer 2

我相信你选择使用内联JavaScript，因为你无法让它变得动态。

另一种方法是使用data-*属性来保存日期值。如下图所示：

<td class="everyday"
    data-month="<?php echo $month; ?>"
    data-day="<?php echo $day_num; ?>"
    data-year="<?php echo $year; ?>">
  ...
</td>

并继续使用.click()函数，而不是内联JavaScript [如告诉]，应该更好地避免使用。

$("td.selector").click(function() {
  var data = $(this).data();
  $.ajax({
    type: "GET",
    url: "hello.php",
    data: { monthID: data.month, dayID: data.day, yearID: data.year },
    success: function(data) {
      $("#dialog").html(data).dialog("open");
    }
  });
});

将data作为对象传递给$.ajax的优点是jQuery会自动对参数进行编码。

最后，您可以将.dialog()初始化移至.ready()函数。

$(document).ready(function() {
  $("#dialog").dialog({
    bgiframe: true,
    autoOpen: false,
    height: 400,
    width: 400,
    modal: true
  });
});

Answer 3

PHP生成的结果参数是一个字符串。所以你也应该用引号括起来。

<td class="everyday" onClick="getDayDetails('monthID=<?php echo $month; ?>&dayID=<?php echo $day_num; ?>&yearID=<?php echo $year; ?>');">

Answer 4

如果我理解你的问题，那是因为data参数不正确它应该看起来像：

data: { monthID:monthValue, dayID:dayValue, yearID:yearhValue }

Answer 5

为了避免使用所有这些奇怪的onClick spaggeti代码，更好的方法是使用数据属性包含DOM中的参数。例如，您的td可能变为：

<td data-day="Mon" data-month="june">

那么你可以抓住这些参数：

$('td').on('click', function() {
     var day = $(this).attr('data-day');
     //And so on 
     //Add them to a data object 
     var data = {}; 
     data.day = day; 
     //Fire your ajax submitting the data object, 

});

最后，由于ajax是异步的，因此您必须将对话框代码放在成功回调中。

玩得开心。

为什么不会触发此JavaScript事件？

5 个答案: