CODEWITHSUNDEEP
javascriptjquery
vinylDeveloper
vinylDeveloper

Reputation: 707

Why does this JavaScript event not get triggered?

Basically if have this that works. It opens a query dialog box

$("#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
    });
});​

I want to call it from a

onClick="callMyFuncion(withDetails);

and basically send an ajax get request with myDetails.. heres what I'm trying 

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

and calling it from here 

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

I'm new to Javascript/ Jquery.. Thanks for any help

Upvotes: 0

Views: 97

Answers (5)

Alexander
Alexander

Reputation: 23537

I believe you opted to use inline JavaScript since there was no way at hand for you to make it dynamic.

An alternative could be to use data-* attributes to hold the date values. As shown below:

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

And keep using the .click() function instead of inlining JavaScript [as told] which should be better avoided.

$("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");
    }
  });
});​

Passing data to $.ajax as an object has the advantage that jQuery will automatically encode the parameters.

Finally, you can move the .dialog() initialization to a .ready() function.

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

Upvotes: 2

Sushanth --
Sushanth --

Reputation: 55740

Ajax is asynchronous .. So it won't work this way ..

Try this

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

Upvotes: 2

AlexPsi
AlexPsi

Reputation: 76

A better way to do it, in order to avoid using all this weird onClick spaggeti code, is to encompass your parameters in the DOM by using data attributes. For example your td could become: 

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

So then you can grab you parameters like these: 

$('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, 

});

Lastly, since ajax is asynchronous, you will have to put the dialog code inside the success callback.

Have fun.

Upvotes: 0

Marcus
Marcus

Reputation: 5447

If I understand your question correctly, it's because the data param isn't correct.
It should look like:

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

Upvotes: 0

leonvv
leonvv

Reputation: 180

The result paramater made by PHP is a string. So you should wrap it in quotes too.

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

Upvotes: 0

Related Questions