0

Hey im having a hard time trying to fix this: I got a php calendar made and each day has an ordered id by setting it to "day+month" value (f.e, jan 5th is #0501). What im trying to do here is to use javascript (and Jquery to detect that id, and if mouse hovers on that square, display event of that day. But when i hover on the square it displays "undefined"
Javascript:

var day = ["01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31"];
var month = ["01","02","03","04","05","06","07","08","09","10","11","12"];

for (var j=0;j<=month.length;j++){
    for (var i=0;i<=day.length;i++){
        $("#" + day[i] + month[j]).hover(function(){
            $(this).css({'background-color':'#416E86'});
            $(".day-number-big").css({"background-color":"#EEE"});
            $(".day-number-big").html("<h4>" + day[i] + month[j] + "</h4>");
        },
        function(){
            $(this).css({'background-color':'#FFF'});
        });
    }
}

HTML & CSS:

<div class="day-number-big" style="position:absolute;right:0px;width:75px;height:75px;background-color:#204F88;">
                    <div class="day-number-wrapper" style="position:static;width:23px;height:20px;margin:22px auto auto auto;color:#FFF;">

                    </div>
                </div>

PHP:

if ($list_day<10){
        $list_day="0".$list_day;
    }
    $sql = "SELECT * FROM cal_cma ORDER BY fec_cal";
    $query = mysql_query($sql,$conn);
    $checkdate= $list_day."".$month."".$year;
    while ($row = mysql_fetch_array($query)){
        $checkdate2 = date_adjust($row['fec_cal']);
          if ($checkdate == $checkdate2){
              $calendar.= '<td class="calendar-day" id="'.substr($checkdate2,0,4).'">';
              $calendar.= '<div class="day-number-db">'.$list_day.'</div>';
              $calendar.= "<p></p>";
              $calendar.= '</td>';
              break;
          }
    }
        if ($checkdate != $checkdate2){
              $calendar.= '<td class="calendar-day" id="'.substr($checkdate,0,4).'">';
              $calendar.= '<div class="day-number">'.$list_day.'</div>';
              $calendar.= "<p></p>";
              $calendar.= '</td>';
        }

Note: The "date_adjust" function applies changes to format YYYY-MM-DD to DDMMYYYY.

Zhephard
  • 360
  • 1
  • 13
  • could you post the relevant html & css code? –  Feb 05 '14 at 13:03
  • possible duplicate of [Javascript closure inside loops - simple practical example](http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example). In your case, you should use *event delegation* and parse day and month out of the id: `var day=this.id.slice(0,2), month=this.id.slice(2);` – Bergi Feb 05 '14 at 13:10
  • Look your loops, you have a problem : http://jsfiddle.net/w7sH7/. You have undefined lines, just loop over all your items. – Vincent Decaux Feb 05 '14 at 13:11
  • I'm pretty sure that an _id_ "should" begin with `a-zA-Z`.. (HTML5 draft permits more but you may have problems with selectors) – Paul S. Feb 05 '14 at 13:14
  • you should debug your js code in FF firebug – Altaf Hussain Feb 05 '14 at 13:21
  • Ill take that in mind, thanks for the tip. – Zhephard Feb 05 '14 at 13:23

1 Answers1

1

day[i] and month[j] will always be day[day.length+1] and month[month.length+1] in your "hover" event, after initialization.

You should recompute these values inside you "hover" callback from the "id" attribute of the HTML element.

An other way is to store these data into the jQuery object of the HTML element:

    $("#" + day[i] + month[j]).data( "month", month[j] );
    $("#" + day[i] + month[j]).data( "day", day[i] );

    $("#" + day[i] + month[j]).hover(function(){
                $(this).css({'background-color':'#416E86'});
                $(".day-number-big").css({"background-color":"#EEE"});
                $(".day-number-big").html("<h4>" + $(this).data( "day" ) + $(this).data( "month" ) + "</h4>");
            },
            function(){
                $(this).css({'background-color':'#FFF'});
            });
Julien Vaslet
  • 1,804
  • 1
  • 14
  • 17
  • Can alternatively use a closure to correctly scope those values, which saves having to interact with jQuery's data cache. – Anthony Grist Feb 05 '14 at 13:41