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

时间:2012-12-06 21:07:20

标签: javascript jquery

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

$("#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的新手..感谢您的帮助

5 个答案:

答案 0 :(得分:2)

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..
        }
    });
}

答案 1 :(得分: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
  });
});

答案 2 :(得分:0)

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

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

答案 3 :(得分:0)

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

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

答案 4 :(得分:0)

为了避免使用所有这些奇怪的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是异步的,因此您必须将对话框代码放在成功回调中。

玩得开心。