...

View Full Version : please ! Need help on that code



korssane
08-22-2011, 10:15 PM
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

devnull69
08-22-2011, 10:33 PM
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?

korssane
08-22-2011, 11:06 PM
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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum