Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jun 2011
    Posts
    148
    Thanks
    18
    Thanked 0 Times in 0 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 Attached Files

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    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?

  • #3
    Regular Coder
    Join Date
    Jun 2011
    Posts
    148
    Thanks
    18
    Thanked 0 Times in 0 Posts
    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>


  •  

    Posting Permissions

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