php ajax issue:  date text file is populated for some report while others are not

Posted on 2012-08-23
Last Modified: 2013-09-12
I have been spending hours on this and I can not seem to troubleshoot what could be causing this issue.

I have a web page in which you can select the frequency of a report: monthly or quarterly in a select box.  Depending on what is selected, it will call an ajax process to create another select box that is populated with the report name.  Now, depending on what report is selected, it will unhide a div container with the text fields for the date.   There is a calendar icon next to each textfield that allow user to pick a day from a calendar.

In addition, I have a click "add date" that will also call the ajax process to allow user to enter date for different report as the same time.

Here is the main page:
<select id="myselect" onchange="addDateGroup();" name="reporting">
<option value="1">monthly</option>
<option value="2">quarterly</option>

<div id="process-date-container"></div>
<xml_input type="hidden" name="dateGroupCount" value="0" />
<div class="div2add" onClick="addDateGroup(); return false;">add date</div>

Javascript for calling ajax (assume that the ajax connection is working)
function addDateGroup(group_count)
      var process_id = document.getElementById('reporting').value;
      var dateGroupCount = document.getElementById('dateGroupCount').value;
      var nextDateGroup = ++dateGroupCount;

      document.getElementById('dateGroupCount').value = nextDateGroup;
      var parentDiv = 'process-date-container';
      var targetDiv = document.getElementById(parentDiv);
      var newdiv = document.createElement('div');
      var divIdName = 'date_group_'+nextDateGroup;
      var req = ajaxConnect();      
      req.onreadystatechange = function()
            if ( req.readyState == 4 )
                  if ( req.status == 200 )                               
                        document.getElementById(divIdName).innerHTML= req.responseText;                              
                        alert("ERROR: addDateGroup");

ajax page:
$group_id = $_GET['id'];

<select id="reportName.<?php echo $group_id; ?>" onchange="showDateContainer(,<?php echo $group_id; ?>');" name="reportName.<?php echo $group_id; ?>">
<option value="1">timesheet report</option>
<option value=2">accounting report</option>

foreach ($report as $key => $value)
      //select the date for this report
      $data = [result from the sql statement to get only the date for the report]
      <div id="<?php echo $value['report_name']; ?>-container-<?php echo $group_id; ?>" style="display: none;">
            <?php for ($i=0; $i < count($data); $i++) { ?>
                  <input type="text" maxlength="10" size="10" value="" name="<?php echo $data['report_name'][$i]['date_type']; ?>"><img class="cal_icon" align="absmiddle" src="icon_cal.gif" onclick="displayDatePicker(;" onmouseout="'default'" onmouseover="'pointer'" style="cursor: default;">
            <?php } ?>

Javascript for showDateContainer()
function showDateContainer(selectName,groupID)
      var sIndex=document.getElementById(selectName).selectedIndex;
      var sOption=document.getElementById(selectName).options;
      var optionValue = sOption[sIndex].text;
      var optionlower = optionValue.toLowerCase();      
      var container = optionlower.replace(' ','-');
      var divID = container+'-container-'+groupID;
      document.getElementById(divID).style.display = "block";

Trial 1:

I would select "timesheet report" and it will display 3 date: received date, due date, sent date.  When I click on the calendar icon, it would work perfectly.  It would display the calendar underneath the text field and I am able to select each date and it will populate in each text field.

When I just on "add date" to allow me to select another report and its corresponding date.  This works.
I select "account report" and it too will display 2 textfield date: due date and sent date.  However, when I click on the calendar icon, it would display it on the top left of the screen instead of beneath the text field.  When I select the date, it does not populate the text field.

Trial 2:
I modified the query to select the different report.  This time the query is ordering the report name ascending (accounting then timesheet).
So I go through the process in which I would select timesheet report.  The date would work for the received date, but it would not work for the due date or sent date.  The accounting report date will still not work.

Help!! What is going on?  I even clear my cache and history.  
And here is some of the report result:

Trial 3:
report 1: timesheet
      received date: yes
      due date: yes
      sent date: yes

report 2: account
      due date: no
      sent date: no

report 3: report3name
      due date: no
      sent date: no

report 4: report4name
      due date: no
      sent date: no

report 8: report8name
      due date: yes
      sent date: yes

I don't understand why it work for certain reports and it doesn't work for other and why if i re-order them (ascending vs descending) ... the same report does not work.

Please help!

Attached is the datepicker.js that I used before and got from the internet.
Question by:lgduong
    LVL 9

    Accepted Solution

    if you are familiar with jquery i suggest you to use this datepicker. The one you use is very old fashioned and may have bugs like that.

    Author Comment

    That look very simple.  I am not that familiar with jquery.  How do I incorporate multiple date text fields.  The jquery (javascript) is so specific to that div.  How do I call that function and passed variable div to it?

          $(function() {
                $( "#datepicker" ).datepicker();

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Threat Intelligence Starter Resources

    Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

    This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
    These days socially coordinated efforts have turned into a critical requirement for enterprises.
    Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

    761 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    6 Experts available now in Live!

    Get 1:1 Help Now