Web Analytics Made Easy -
StatCounter please ! Need help on that code - CodingForum

Announcement

Collapse
No announcement yet.

please ! Need help on that code

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • please ! Need help on that code

    Hi Guys,

    the files attached with this thread are used to popup Jquery datepicker.
    the sample4 .htm shows how to dynamicaly add the datepicket to a dynamic generated textbox and it works fine...

    i am trying to apply this on my dynamic generate one but it gives me error..

    i am using different syntax to generate dynaminc textbox..but it should not affect the datepicker function Call...

    below is my code :

    // here i am creating my textbox

    newStartDate = document.createElement( 'INPUT' );
    newStartDate.id = 'id1';
    newStartDate.setAttribute('name','StartDateName1');
    newStartDate.setAttribute('type', 'Date');
    newStartDate.size=8;
    newStartDate.style.backgroundColor= bgc;

    // here i am creating my img

    oImg=document.createElement("img");
    oImg.setAttribute('id', 'tcalico_myCalID');
    oImg.setAttribute('name', 'myCalname');
    oImg.setAttribute('src', 'calendar.png');
    oImg.setAttribute('alt', 'Open Calendar');
    oImg.setAttribute('title', 'Open Calendar');


    so far it works , i have my textbox and my img picture
    now i am going to call that function calendar_us.js
    oImg.onclick = f2;

    function f2()
    {
    new tcal
    (
    {
    // form name
    //'formname': 'FORM1',
    // input name
    'controlname': 'StartDateName1'
    }
    );

    }
    }


    it does not give anything



    and here is what is in the sample4.htm



    <script language="JavaScript">

    function f_createContent() {
    var e_div = f_getElement('container');
    e_div.innerHTML += '. <input type="text" name="testinput' + '" value="" />'
    + '<img title="Open Calendar" class="tcalIcon" onclick="A_TCALS[\'myCalID' + '\'].f_toggle()" id="tcalico_myCalID' + '" src="img/cal.gif"/><br />';

    new tcal ({
    // form name
    'formname': 'testform',
    // input name
    'controlname': 'testinput',
    // set unique ID to identify the elements
    'id': 'myCalID'
    });


    }
    function f_removeContent() {
    var e_div = f_getElement('container');
    e_div.innerHTML = '';
    window.A_TCALS = null;
    window.A_TCALSIDX = null;
    N_CALNUM = 1;
    }
    </script>


    any help or alternate solution how can i implement this will be more than appreciated !!


    thanks
    Attached Files

  • #2
    Code:
    newStartDate = document.createElement( 'INPUT' );
    newStartDate.id = 'id1';
    newStartDate.setAttribute('name','StartDateName1');
    newStartDate.setAttribute('type', 'Date');
    newStartDate.size=8;
    newStartDate.style.backgroundColor= bgc;
    After this code you have a textbox, but it's not visible anywhere. Is that really what you want to achieve? And type="Date" is only valid for HTML5, so did you set the DOCTYPE correctly?

    Comment


    • #3
      Hi devnull69,

      the textbox is visible .the code is in coldfusion and the part i am having issue with is how to popup datepicker with dynamic textbox is in javascript 100% sure.

      below is the entire code:


      <cfquery name="qITEM" datasource="emulators">
      SELECT
      *
      FROM TBLCPR_PROJECT_MASTER

      </cfquery>


      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Untitled Document</title>

      <!---<link href="file:///C|/Documents and Settings/layachmo/Desktop/tabs.css" rel="stylesheet" type="text/css" />--->

      <!---<script src="../component/js/addOnloadEvent.js" type="text/javascript" language="JavaScript"></script>
      <script src="../component/js/popcalendar.js" type="text/javascript" language="JavaScript"></script>--->

      <script language="JavaScript" src="calendar_us.js"></script>
      <link rel="stylesheet" href="calendar.css">
      </head>

      <body onload="addNew();">


      <cfoutput>


      <script type="text/javascript">

      // Declare element id for different dynamic generated controls
      var elementid = 1;



      function addNew()
      {
      var ColumnElement = 1;


      // Get the main Div in which all the other divs will be added
      var mainContainer = document.getElementById('mainContainer');

      // Create a new div for holding text and button input elements
      var newDiv = document.createElement('div');

      // Create a new drop down list -- for text box use 'input' instead of 'select'
      var newDDL = document.createElement('select');

      // size lenght of the DDL for both IE or Firefox
      newDDL.setAttribute("style","width:300px");
      //firefox
      newDDL.setAttribute("width","300px");
      newDDL.style.width = "300px";
      newDDL.id = 'id' + elementid + ColumnElement;
      newDDL.setAttribute('name','newDDL'+ elementid+ColumnElement);

      // filling the DDL by ITEM array Elements
      var i=0;
      for (i=0;i<=rec_count;i++)
      {
      objOption = document.createElement('option')
      objOption.text = ITEM[i];
      objOption.value=ITEM[i];
      newDDL.options.add(objOption);
      }

      counter++;
      //newDDL.onchange = show1;
      //newDDL.value = counter++;
      //newDDL.onchange = showDLL();

      var j =1;
      var bgc ="##E2E2E2"; //"##b2d47e";

      newStartDate = document.createElement( 'INPUT' );
      newStartDate.id = 'id1';
      newStartDate.setAttribute('name','StartDateName1');
      newStartDate.setAttribute('type', 'Date');
      newStartDate.size=8;
      newStartDate.style.backgroundColor= bgc;


      oImg=document.createElement("img");
      oImg.setAttribute('id', 'tcalico_myCalID');
      oImg.setAttribute('name', 'myCalname');
      oImg.setAttribute('src', 'calendar.png');
      oImg.setAttribute('alt', 'Open Calendar');
      oImg.setAttribute('title', 'Open Calendar');
      oImg.onclick =show2;



      function show2()
      {
      //alert('id=' + this.getAttribute('id') + ' name = ' + this.getAttribute('name'))

      new tcal
      (
      {
      // form name
      //'formname': 'FORM1',
      // input name
      'controlname': 'StartDateName1'
      }
      );

      }
      //'<img title="Open Calendar" class="tcalIcon" onclick="A_TCALS[\'myCalID' + N_CALNUM + '\'].f_toggle()" id="tcalico_myCalID' + N_CALNUM + '" src="img/cal.gif"/><br />';



      // to get number of element & columns if only one project applied
      //document.form1.NumberOfElementsName.value = parseInt(elementid);
      // Number of column should be fix for all elementids'
      //var numcol = 10; // always total -1 coz ColumnElement initiated at 1 at line 100
      //document.form1.NumberOfColumnName.value = parseInt(ColumnElement+numcol);

      // Create buttons for creating and removing inputs
      var newAddButton = document.createElement('input');
      newAddButton.type = "button";
      newAddButton.value = " + ";

      var newDelButton = document.createElement('input');
      newDelButton.type = "button";
      newDelButton.value = " - ";

      // Append new text input to the newDiv

      newDiv.appendChild(newDDL);
      newDiv.appendChild(newStartDate);
      newDiv.appendChild(oImg);


      // Append new button inputs to the newDiv
      newDiv.appendChild(newAddButton);
      newDiv.appendChild(newDelButton);

      // Append newDiv input to the mainContainer div
      mainContainer.appendChild(newDiv);

      // Add a handler to button for deleting the newDiv from the mainContainer
      //newAddButton.onclick = addNew;
      newAddButton.onclick = functionCaller;


      newDelButton.onclick = function() {mainContainer.removeChild(newDiv); document.form1.NumberOfElementsName.value = elementid;}
      //elementid=elementid-1;
      elementid++;
      //alert(elementid++);

      //}
      }


      function show()
      {

      alert( 'id=' + this.getAttribute('id') + "\n" + 'name=' + this.getAttribute('name') + "\n" + "value=" + this.value );
      // alert("value=" + this.value);

      }
      function show1()
      {

      alert('id=' + this.getAttribute('id') + ' name = ' + this.getAttribute('name') + ' value1= ' + this.value)


      }


      function handleChange()
      {
      alert("Changed, new value = " + this.checked);
      //alert("your cb has changed");
      }

      function showall()
      {

      //document.form1.Alloc1.value = "";
      // Reset my array and take the new values
      var jj=1;
      var sumalloc=0;
      for (jj=1;i<elementid;jj++)
      {
      L1[jj]=0;

      }



      var Totalloc = new Array();
      var i=1;
      for (j=1;j<7;j++)
      {
      // initiate sumalloc to calculate the sum of each column
      sumalloc = 0;

      for (i=1;i<elementid
      {
      if (document.getElementById('id'+i+(j+3)))
      {
      var xx = document.getElementById('id'+i+(j+3)).value;
      L1[i]=xx;

      sumalloc = parseFloat(sumalloc) + parseFloat(L1[i]);
      //alert("L[" + i + "]" + "=" + L1[i])
      // apend all values in the sametextfield
      //document.form1.Alloc1.value = document.form1.Alloc1.value + L1[i] + ','
      i++;

      }
      else
      {
      i++;
      //alert(i);
      }


      }
      Totalloc[j] = sumalloc;

      }

      //alert (sumalloc);

      //document.getElementById("totid").value = sumalloc;

      for (jj=1;jj<7;jj++)
      {
      var fn1 = "totid" + jj
      //alert (fn1);
      document.getElementById(fn1).value = Totalloc[jj];

      if (Totalloc[jj] > 100 )
      {
      alert("Your monthly allocation is greater than 100%, Pleased add comment");

      }
      //alert("value of totid is : " + document.getElementById('totid').value);
      //alert("value=" + this.value);
      }




      }


      //function showArray()
      //{
      //alert(elementid);
      //var ii = 1;
      //for (ii=1;ii<=elementid-1;ii++)
      // {
      // alert(L1[ii]);
      // }
      //}

      function functionCaller()
      {
      addNew();
      document.form1.NumberOfElementsName.value = parseInt(elementid);


      //alert(document.form1.NumberOfElementsName.value);
      //alert(document.form1.ProjectName.value);
      }

      function f2()
      {

      //var xx = document.getElementById('id11').value;
      // var xx = document.getElementsByName('newDDL11');
      //alert(xx);
      //document.form1.ProjectName.value = elementid;
      //var xx = document.getElementById('id12').selectedIndex;
      //document.form1.ProjectName.value = xx;
      //alert(document.form1.ProjectName.value);
      //document.form1.ProjectName.value = ColumnElement;

      }
      </script>


      </cfoutput>
      </form>
      <div align="left">
      <cfform name="form1" ACTION="insertalloc.cfm" METHOD="post">


      <div id="mainContainer">

      <div>
      <cfoutput>
      <!---<cfset usersession = "#session.userdata.displayname#">
      <cfset Session.tidsession = "#session.userdata.username#">--->

      </cfoutput>
      <cfset thedate = now()>
      <table cellspacing="0" cellpadding="0" border="0">
      <tr>
      <!---Project Allocation for <cfoutput> #usersession# </cfoutput> <br/><br/>--->
      <td>
      <input type="text" style="width:290px; text-align:center; background:#C8BBD0" value ="PROJECT NAME" readonly="readonly"/>
      </td>
      <td>
      <input type="text" value="StartDate" id="TITID1" name="TITNAME1" readonly="readonly" style="width:80px;text-align:center; background:#C8BBD0" />

      </td>

      <td>
      <input type="text" value="Comment" id="TITID8" name="TITNAME8" readonly="readonly" style="width:150px; text-align:center;background:#C8BBD0"/>
      </td>
      <td>
      <input type="text" value="Complete" id="TITID9" name="TITNAME9" readonly="readonly" style="width:62px; text-align:center;background:#C8BBD0"/>
      </td>
      </tr>
      <tr><td></td> </tr>
      </table>
      </div>
      </div>

      <div>
      <!---<input type="button" value=" Show " onclick="showArray();">--->
      <div>
      <!---<table cellspacing="0" cellpadding="0">
      <tr>
      <td width="100px">
      <input type="button" value="Check Monthly Allocation" onclick="showall();">
      </td>
      <td width="245px">
      </td>

      <td>
      <input name="totname1" type="text" id="totid1" readonly="readonly" style="width:42px; background:#b2d47e">
      </td>
      <td >
      <input name="totname2" type="text" id="totid2" readonly="readonly" style="width:42px;background:#b2d47e">
      </td>
      <td >
      <input name="totname3" type="text" id="totid3" readonly="readonly" style="width:42px;background:#b2d47e">
      </td>
      <td >
      <input name="totname4" type="text" id="totid4" readonly="readonly" style="width:42px;background:#b2d47e">
      </td>
      <td >
      <input name="totname5" type="text" id="totid5" readonly="readonly" style="width:42px;background:#b2d47e">
      </td>
      <td >
      <input name="totname6" type="text" id="totid6" readonly="readonly" style="width:42px;background:#b2d47e">
      </td>
      </tr>

      </table>--->
      </div>

      </div>
      <br/>
      <div>
      <!--Proj:<input type="text" id="ProjectName" name="ProjectName"> <input type="button" onclick="f2();">-->
      <br/>

      <input type="hidden" id="NumberOfElementsid" name="NumberOfElementsName">
      <input type="hidden" id="NumberOfColumnid" name="NumberOfColumnName">
      <input type="hidden" id="M1ID" name="M11" />
      <input type="hidden" id="M2ID" name="M22" />
      <input type="hidden" id="M3ID" name="M33" />
      <input type="hidden" id="M4ID" name="M44" />
      <input type="hidden" id="M5ID" name="M55" />
      <input type="hidden" id="M6ID" name="M66" />

      <cfinput type="Submit" name="SubmitForm" value="Submit">
      </div>
      <div>

      <!---<form name="testform">
      <!-- calendar attaches to existing form element -->
      <input type="text" name="testinput" />
      <script language="JavaScript">
      new tcal (
      {
      // form name
      //'formname': 'form1',
      // input name
      'controlname': 'testinput'
      }
      );

      </script>
      </form>
      --->

      </div>
      </cfform>
      </div>
      </body>
      </html>

      Comment

      Working...
      X