SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Oct 2004
    Location
    naperville
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Works in FF, but not IE - Ajax updating of a table

    Hello,

    I am extremely confused and somewhat frustrated with this issue. I am using prototype to send ajax requests back and forth. The scripts work properly in firefox, but only partially in IE. It seems to update the header portion of my HTML, but not the table.

    I am very confused and any help would be extremely appreciated.

    I will post the portions of my javascript that (i think!) are relevant. It messes up on both these functions at pretty much the same spot. I'll link to the rest though as I might be wrong. I tried to make it neat, so I hope its legible.

    [ http://schmooze.pbrodeur.com/output/html/js/Calender.js ]
    Here is the page in question:
    http://schmooze.pbrodeur.com/calender/

    Code:
    Calender.prototype.loadCalenderByMonth = function(selMonth, selYear)
    {
    	this.updateCurrent(selMonth, this.currentDate, selYear);
    	
    	new Ajax.Updater(this.periodHeader, '/calender_ajax.php', {
    		method: 'get',
    		 parameters: {
    			 action: 'getLiteralMonth', 
    			 month: selMonth,
    			 year: selYear
    		}
      	});
      	var that = this;
      	
    	new Ajax.Request('/calender_ajax.php', {
    		method: 'get',
    		 parameters: {
    			 action: 'getHtmlMonth', 
    			 month: selMonth,
    			 year: selYear,
    			 tbl: this.table.id
    		},
    		onFailure: function() { alert("uh oh"); },
    		onComplete: function() {
    			for(i=0; i<6; i++)
    			{
    				if(!(document.getElementById("pickWeek" + i)  == null))
    				{
    					document.getElementById("pickWeek" + i).rdate = [
    						document.getElementById("pickWeek" + i).month,
    						document.getElementById("pickWeek" + i).day,
    						document.getElementById("pickWeek" + i).year];
    					document.getElementById("pickWeek" + i).onclick = function() {
    						date = this.rdate;
    						that.updateCurrent(date[0], date[1], date[2]);
    						that.selectView("week");
    					}	
    					
    				}
    			}
    		}
      	});
    
    
      	
    }
    
    Calender.prototype.loadCalenderByWeek = function(selMonth, selDate, selYear)
    {
    
    	this.updateCurrent(selMonth, selDate, selYear);
    	
    	new Ajax.Updater(this.periodHeader, '/calender_ajax.php', {
    		method: 'get',
    		 parameters: {
    			 action: 'getLiteralWeek', 
    			 month: selMonth,
    			 date: selDate,
    			 year: selYear
    		}
      	});
    
    	new Ajax.Updater(this.table.id, '/calender_ajax.php', {
    		method: 'get',
    		 parameters: {
    			 action: 'getHtmlWeek', 
    			 month: selMonth,
    			 date: selDate,
    			 year: selYear
    		}
      	});
    }
    The first updater works, but the second one does not. Nothing happens in internet explorer.

    Here is relevant HTML:
    Code:
    <div id="calender">
    		<?php 
    		$i = date('n');
    		$view = 'byMonth';
    		$weeks = $Calender->getMonth($i, 2007); ?>
    		<div class="month">
    			<div class="monthHeader">
    				<h3 class="whenAmI" id="calenderPeriodHeader"><?php echo $Calender->getMonthLiteral($i); ?></h3>
    				<ol class="whenAmI">
    					<li class="previous" id="calenderLastPeriod">&laquo;<span>Previous</span></li>
    					<li class=" next" id="calenderNextPeriod">&raquo;<span>Next</span></li>
    				</ol>
    				<ol id="view">
    					<li id="viewday">Day</li>
    					<li id="viewweek">Week</li>
    					<li id="viewmonth">Month</li>
    				</ol>
    				<br style="clear: both;" /><p></p>
    			</div>
    			<table cellspacing="0" padding="0" id="calenderTable">
    			</table>
    		</div>
    
    </div>
    	</div>
    <script language="javascript">
    var Calender = new Calender(<?php echo date('n', time()); ?>, <?php echo date('j', time()); ?>, <?php echo date('Y', time()); ?>);
    Calender.registerPeriodHeader("calenderPeriodHeader");
    Calender.registerPreviousPeriod("calenderLastPeriod");
    Calender.registerNextPeriod("calenderNextPeriod");
    Calender.registerCalenderTable("calenderTable");
    Calender.registerViewSelectors("viewday","viewweek","viewmonth");
    Calender.selectView("month");
    </script>
    Pretty simple

    Finally, relevant PHP code:
    PHP Code:
        case 'getHtmlWeek':
            $week = $Calender->getWeek(mktime(11,11,11,$_GET['month'],$_GET['date'],$_GET['year']));
            $i = $_GET['month'];
            ?>
                    <tr class="header">
                        <th>Sunday</th>
                        <th>Monday</th>
                        <th>Tuesday</th>
                        <th>Wednesday</th>
                        <th>Thursday</th>
                        <th>Friday</th>
                        <th>Saturday</th>
                    </tr>
                        <tr class="dayrow">
                            <?php foreach($week['days'] as $day): ?>
                                <td <?php if($day['month'] != $i) echo 'class="otherMonth"'?> <?php if($day['date'] == date('j'time()) && $day['month'] == date('n'time())) echo 'class="today"'?>><span class="date"><?php if($day['month'] != $i) echo $day['month'] . '/'?><?php echo $day['date']; ?></span></td>
                            <?php endforeach; ?>
                        </tr>
            <?php
        
    break;
        case 
    'getHtmlMonth':
            
    $weeks $Calender->getMonth($_GET['month'], $_GET['year']);
            
    $i $_GET['month'];
            
    header("Content-Type: application/x-javascript");
            
    ?>
                    
                    table = document.getElementById("<?php echo $_GET['tbl']; ?>");
                    
                    removeChildrenFromNode(table);
                    header = document.createElement("tr");
                    header.className = "header";
                    days = ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
                    monday = document.createElement("th");
                    monday.setAttribute("colspan", 2);
                    header.appendChild(monday);
                    for(i = 0; i < 6; i++)
                    {
                        
                        headerCell = document.createElement("th");
                        
                        headerCell.appendChild(document.createTextNode(days[i]));
                        header.appendChild(headerCell);
                    }
                    table.appendChild(header);
                    <?php foreach($weeks as $wid => $week): ?>
                        week = document.createElement("tr");
                        week.className = "dayrow";
                        weekSelector = document.createElement("td");
                        weekSelector.className="selectWeek";
                        weekSelector.id = "pickWeek<?php echo $wid?>";
                        weekSelector.appendChild(document.createTextNode(entity("&raquo;")));
                        weekSelector.month = <?php echo $week['days'][0]['month']; ?>;
                        weekSelector.day = <?php echo $week['days'][0]['date']; ?>;
                        weekSelector.year = <?php echo $week['startYear']; ?>;
                        
                        span = document.createElement("span");
                        span.style.display = "none";
                        span.appendChild(document.createTextNode("Zoom week <?php echo $week['startDate']; ?> through <?php echo $week['endDate']; ?>"));
                        weekSelector.appendChild(span);
                        week.appendChild(weekSelector);
                            <?php foreach($week['days'] as $day): ?>
                                day =  document.createElement("td");
                                <?php if($day['month'] != $i) echo 'day.className="otherMonth";'?>
                                <?php if($day['date'] == date('j'time()) && $day['month'] == date('n'time())) echo 'day.className="today";'?>
                                day.innerHTML = "<span class=\"date\"><?php if($day['month'] != $i) echo $day['month'] . '/'?><?php echo $day['date']; ?></span>";
                                week.appendChild(day);
                            <?php endforeach; ?>
                            table.appendChild(week);
                    <?php endforeach; ?>
                    

            <?php
        
    break;
    Thank you so much! I really appreciate it.

  2. #2
    SitePoint Zealot
    Join Date
    Oct 2004
    Location
    naperville
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    is there something I can supplement this to clarify the problem? I am still stuck - when I add an onFailure, nothing happens either. The first request goes through fine so I know its not a prototype problem. Any ideas at all?

    thanks!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •