CODEWITHSUNDEEP
jquerycoldfusion-10
Chris Pilie
Chris Pilie

Reputation: 451

variable undefined using jquery; possible format conflict

Need a little help with this. Seems pretty simple but I must be missing something. I am trying to retrieve some id values when clicking an anchor tag. For some reason I am not getting all the values. I am thinking there is a conflict with the format of the data. Here is the code

jquery

EDITED to reflect Jai's recomendation - same results

$j(document).ready(function() { 

  // find value of id and name
  $j(".dig").on("click", function(e) {
        var scheduleID = ($j(this).attr('id'));
            console.log(scheduleID);
        var scheduleTime = ($j(this).closest("div").attr('id'));
            console.log(scheduleTime);
        var scheduleDay = ($j(this).closest("li").attr('id'));
            console.log(scheduleDay);
        var day, times;
      $j( "#show-form" ).dialog( "open" );
        $j("#scheduleID").val(scheduleID);   
        $j("#scheduleTime").val(scheduleTime);        
        $j("#scheduleDay").val(scheduleDay);   
            day     =  $j("#scheduleDay").val();
            times   =  $j("#scheduleTime").val();
        $j('#scheduleWarning').html('<p>NOTE: if you upload an MP3 file for your episode below, it will be put into the ' + day + ' ' + times + ' programming slot. Be sure to select ' + day + ' ' + times + ' to sync this episode with your audio file</p>');
     });

html

<li id="Monday">
    <div id="#x#:00" class="time">
        <a id="#ID#" class="icon icon-primary material-icons-backup icon-sm icon-backup dig" style="cursor:pointer" title="upload show"></a>&nbsp;&nbsp;&nbsp;Monday #x#:00
    </div>
</li>

So... the console is showing all three id's from the html but the #scheduleWarning html output is not showing the "times" var value. It is saying it is undefined.

The variable #x# is an index value produced by Coldfusion from a database query. An example of what is produced is as follows.

 <div id="21:00" class="time">

Any idea why the "times" var is showing up undefined?

Just a little tidbit of my debugging results. IF I change 

$j("#scheduleDay").val(scheduleDay);

to

$j("#scheduleDay").val(scheduleTime);

the "day" var shows the correct value of the 

var scheduleTime = ($j(this).closest("div").attr('id'));

I hope I didn't confuse anyone.

Upvotes: 2

Views: 69

Answers (1)

Jai
Jai

Reputation: 74738

That happens to be called variable hoisting. When you declare any variable it is hoisted at the top by the javascript compiler. So, at that point of time the value is undefined due to its not set. Instead you can do this: 

$j(document).ready(function() {
  // find value of id and name
  $j(".dig").on("click", function(e) {
    var scheduleID = ($j(this).attr('id'));
    var scheduleTime = ($j(this).closest("div").attr('id'));
    var scheduleDay = ($j(this).closest("li").attr('id'));
    var day, times; // <--------------------------------declare it here.

    $j("#show-form").dialog("open");
    $j("#scheduleID").val(scheduleID);
    $j("#scheduleTime").val(scheduleTime);
    $j("#scheduleDay").val(scheduleDay);
    day = $j("#scheduleDay").val();
    times = $j("#scheduleTime").val();
    $j('#scheduleWarning').html('<p>NOTE: if you upload an MP3 file for your episode below, it will be put into the ' + day + ' ' + times + ' programming slot. Be sure to select ' + day + ' ' + times + ' to sync this episode with your audio file</p>');
  });
});

Upvotes: 2

Related Questions