Incorporate JavaScript Calendar with Loop - Coldfusion Code

Hi,
To preface, I have most of this working...

I have a form with a few text inputs and associated calendar popups (which populate the input fields).  If a user wants another row of these inputs, the click the "add another line" button.  That fires the jScript and another line appears with the inputs and the calander buttons, but NOT the calendar scripts that need to follow each of their repective inputs.  I'm using this calendar js script:  Dynarch Calendar Widget jscalendar-1.0.  I've posted the working code below.

Any help will be greatly appreciated.  The repeat row javaScript thread is here (for reference):  
http://www.experts-exchange.com/Software/Server_Software/Web_Servers/ColdFusion/Q_22580824.html
<head>
<script type="text/javascript" language="Javascript">
    var counter = 0;
    function addnew(){
        counter += 1;
        document.getElementById("data").innerHTML = document.getElementById("data").innerHTML + 
            "<input type=text name=option" + counter +" value=option" + counter + ">" + 
            "<input type=text name=value" + counter + " value=value" + counter + "><br>";
    }
    </script>
 
<!--- form page ---->
<script type="text/javascript" language="Javascript">
    function addnew(){
            var newNode;
            //** note the field ID's are case sensitive **
            var outerDiv = document.getElementById('data');
            var rowsField = document.getElementById('NumberOfRows');
 
            //increment the number of rows
            var counter = parseInt(rowsField.value) + 1;
 
            //add the "composername" textbox
            newNode = document.createElement('input');
            newNode.setAttribute('type', 'text');
            newNode.setAttribute('name', 'ComposerName'+ counter);
            newNode.setAttribute('value', 'ComposerName'+ counter);
            outerDiv.appendChild(newNode);
			
			//add the "composername" button
            newNode = document.createElement('button');
            newNode.setAttribute('id', 'ComposerName'+ counter);
			newNode.setAttribute('value', '...');
            outerDiv.appendChild(newNode);
            
            //add the "compositionname" textbox
            newNode = document.createElement('input');
            newNode.setAttribute('type', 'text');
            newNode.setAttribute('name', 'CompositionName'+ counter);
            newNode.setAttribute('value', 'CompositionName'+ counter);
            outerDiv.appendChild(newNode);
			
			//add the "composername" button
            newNode = document.createElement('button');
            newNode.setAttribute('id', 'ComposerName'+ counter);
			newNode.setAttribute('value', '...');
            outerDiv.appendChild(newNode);
 
            //add a line break
            newNode = document.createElement('br');
            outerDiv.appendChild(newNode);
            
            //increment the hidden field value 
            rowsField.value = counter;
    }
 </script>
 
<style type="text/css">@import url(jscalendar-1.0/calendar-win2k-1.css);</style>
<script type="text/javascript" src="jscalendar-1.0/_js/calendar.js"></script>
<script type="text/javascript" src="jscalendar-1.0/lang/calendar-en.js"></script>
<script type="text/javascript" src="jscalendar-1.0/_js/calendar-setup.js"></script>
</head>
 
<!--- The starting counter value is "1" --->
<cfset Counter = 1>
<form name="calendarUpdate" action="calendar2.cfm" method="post">
   <cfoutput>
   <div id="data">
       <!--- append row number to first set of fields --->
     <input type="text" name="ComposerName#Counter#" value="1" id="Start_f_date_c" /><button id="f_trigger_c">...</button>
     <script type="text/javascript">
    Calendar.setup({
        inputField     :    "ComposerName#Counter#",     // id of the input field
        ifFormat       :    "%B %e, %Y",      // format of the input field
        button         :    "f_trigger_c",  // trigger for the calendar (button ID)
        singleClick    :    true
    });
</script>
     <input type="text" name="CompositionName#Counter#" value="2" id="Start_f_date_d" /><button id="f_trigger_d">...</button>
     <script type="text/javascript">
    Calendar.setup({
        inputField     :    "CompositionName#Counter#",     // id of the input field
        ifFormat       :    "%B %e, %Y",      // format of the input field
        button         :    "f_trigger_d",  // trigger for the calendar (button ID)
        singleClick    :    true
    });
</script><br />
   </div>
   <!--- store the number of rows in a hidden field --->
   <input type="hidden" name="NumberOfRows" id="NumberOfRows" value="#val(Counter)#">
   <input type="hidden" name="ProgramID" value="3" />
   </cfoutput>
   <div style="clear:both;">
     <input type="submit" name="submitCalendarUpdate" value="Next >">
     <input id="addAnother" type="button" name="addAnother" value="Add Another Line"  onclick="javascript:addnew();">
   </div>
</form>
 
<!--- calendar2.cfm --->
<cfparam name="form.NumberOfRows" default="0" />
 
<cfloop from="1" to="#val(form.NumberOfRows)#" index="kk">
   <cfif IsDefined("form.CompositionName#kk#") >
       <cfset variables.CompositionName = form["CompositionName"& kk]>
        <cfquery name="insComposition" datasource="#APPLICATION.datasource#">
           INSERT INTO compositions 
               (
                       CompID
                ,ProgramID
                ,CompositionName
            )
            VALUES (
                  '#CreateUUID()#'
                ,'#FORM.ProgramID#'
                ,'#variables.CompositionName#'
            )
            </cfquery>
      </cfif>
</cfloop>

Open in new window

wkolasaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

azadisaryevCommented:
you can write another js function that will setup the calendar for your newly added field, and call this functions at the end of your addnew() function (or just add the code into your addnew() function).

(btw, it looks like you have 2 addnew() functions defined in your page - not the best thing to do by far...
AND in your second addnew() function you are creating 2 ComposerName buttons - i believe one of them should instead be CompositionName button...)

this js function should look something like this:

var setupCalendar = function(counter) {
    Calendar.setup({
        inputField     :    "ComposerName"+counter,
        ifFormat       :    "%B %e, %Y",
        button         :    "ComposerName"+counter,
        singleClick    :    true
    });
    Calendar.setup({
        inputField     :    "CompositionName"+counter,
        ifFormat       :    "%B %e, %Y",
        button         :    "CompositionName"+counter,
        singleClick    :    true
    });
}

then add this line as last line in your second addnew() function:
setupCalendar(counter);

non of this is tested, as i do not use the same calendar script as you do - i prefer jQueryUI datepicker, but theoretically it should work :)

Azadi
0
wkolasaAuthor Commented:
It's nearly working (code posted below), but there's one problem.  Instead of the calendar date populating into the text input field, it's populating into the button (screenshot also below).
<head>
<script type="text/javascript" language="Javascript">
    var counter = 0;
    function addnew(){
        counter += 1;
        document.getElementById("data").innerHTML = document.getElementById("data").innerHTML + 
            "<input type=text name=option" + counter +" value=option" + counter + ">" + 
            "<input type=text name=value" + counter + " value=value" + counter + "><br>";
    }
    </script>
    
<script type="text/javascript" language="Javascript">  
var setupCalendar = function(counter) {
    Calendar.setup({
        inputField     :    "ComposerName"+counter,
        ifFormat       :    "%B %e, %Y",
        button         :    "f_trigger_e",
        singleClick    :    true
    });
}
 </script>
<!--- form page ---->
<script type="text/javascript" language="Javascript">
    function addnew(){
            var newNode;
            //** note the field ID's are case sensitive **
            var outerDiv = document.getElementById('data');
            var rowsField = document.getElementById('NumberOfRows');
 
            //increment the number of rows
            var counter = parseInt(rowsField.value) + 1;
 
            //add the "composername" textbox
            newNode = document.createElement('input');
            newNode.setAttribute('type', 'text');
            newNode.setAttribute('name', 'ComposerName'+ counter);
            newNode.setAttribute('value', 'ComposerName'+ counter);
            outerDiv.appendChild(newNode);
			
			//add the "composername" button
            newNode = document.createElement('button');
            newNode.setAttribute('id', 'ComposerName'+ counter);
			newNode.setAttribute('value', '...');
            outerDiv.appendChild(newNode);
            
			setupCalendar(counter);
			
            //add a line break
            newNode = document.createElement('br');
            outerDiv.appendChild(newNode);
            
            //increment the hidden field value 
            rowsField.value = counter;
    }
 </script>
 
<style type="text/css">@import url(jscalendar-1.0/calendar-win2k-1.css);</style>
<script type="text/javascript" src="jscalendar-1.0/_js/calendar.js"></script>
<script type="text/javascript" src="jscalendar-1.0/lang/calendar-en.js"></script>
<script type="text/javascript" src="jscalendar-1.0/_js/calendar-setup.js"></script>
</head>
 
<!--- The starting counter value is "1" --->
<cfset Counter = 1>
<form name="calendarUpdate" action="calendar2.cfm" method="post">
   <cfoutput>
   <div id="data">
       <!--- append row number to first set of fields --->
     <input type="text" name="ComposerName#Counter#" value="1" id="Start_f_date_c" /><button id="f_trigger_c">...</button>
     <script type="text/javascript">
    Calendar.setup({
        inputField     :    "ComposerName#Counter#",     // id of the input field
        ifFormat       :    "%B %e, %Y",      // format of the input field
        button         :    "f_trigger_c",  // trigger for the calendar (button ID)
        singleClick    :    true
    });
</script><br />
   </div>
   <!--- store the number of rows in a hidden field --->
   <input type="hidden" name="NumberOfRows" id="NumberOfRows" value="#val(Counter)#">
   <input type="hidden" name="ProgramID" value="3" />
   </cfoutput>
   <div style="clear:both;">
     <input type="submit" name="submitCalendarUpdate" value="Next >">
     <input id="addAnother" type="button" name="addAnother" value="Add Another Line"  onclick="javascript:addnew();">
   </div>
</form>

Open in new window

scnshot-js.gif
0
wkolasaAuthor Commented:
i am willing to try a different calendar
0
azadisaryevCommented:
several problems with your code:

1) you still have TWO (2) js functions with same name - addnew(). this is NOT a good thing to do in your code. give each function a UNIQUE name.

2) you (currenlt second) addnew() function add a text input filed with NAME = ComposeeName+counter and then adds a new button with ID = ComposerName+counter. while it is possible that some browsers may distinguish the two and recognize them as 2 separate form controls, other browsers will probably treat them as one and the same form control. thus a browser may treat the inputField parameter in setupCalendar() function as referring to the LAST form control with name OR id = ComposerName+counter - thus changing the value of your button (which is the last form control with name or id  = ComposerName+counter) instead of your textbox field.

you should give the forl controls you add some UNIQUE name/id attributes.

try changing the ID of the button you add to something different, i.e. ComposerNameButton+counter and see if it works.

FURTHERMORE:
your setupCalendar() function sets up a calendar for a button with ID "f_trigger_e" - but you DO NOT HAVE OR CREATE a button with that id. the button you create when a user click 'add new' button has ID = "ComposerName"+counter, NOT "f_trigger_e"...

try the attched code (based on your last posted code) and see if it works.
[NOTE: there are still 2 addnew() functions in the attached code - i leave it up to you to change the name of one of them]

Azadi
<head>
<script type="text/javascript" language="Javascript">
    var counter = 0;
    function addnew(){
        counter += 1;
        document.getElementById("data").innerHTML = document.getElementById("data").innerHTML + 
            "<input type=text name=option" + counter +" value=option" + counter + ">" + 
            "<input type=text name=value" + counter + " value=value" + counter + "><br>";
    }
    </script>
    
<script type="text/javascript" language="Javascript">  
var setupCalendar = function(counter) {
    Calendar.setup({
        inputField     :    "ComposerName"+counter,
        ifFormat       :    "%B %e, %Y",
        button         :    "NewComposerNameBtn"+counter,
        singleClick    :    true
    });
}
 </script>
<!--- form page ---->
<script type="text/javascript" language="Javascript">
    function addnew(){
            var newNode;
            //** note the field ID's are case sensitive **
            var outerDiv = document.getElementById('data');
            var rowsField = document.getElementById('NumberOfRows');
 
            //increment the number of rows
            var counter = parseInt(rowsField.value) + 1;
 
            //add the "composername" textbox
            newNode = document.createElement('input');
            newNode.setAttribute('type', 'text');
            newNode.setAttribute('name', 'ComposerName'+ counter);
            newNode.setAttribute('value', 'ComposerName'+ counter);
            outerDiv.appendChild(newNode);
                        
                        //add the "composername" button
            newNode = document.createElement('button');
            newNode.setAttribute('id', 'NewComposerNameBtn'+ counter);
                        newNode.setAttribute('value', '...');
            outerDiv.appendChild(newNode);
            
                        setupCalendar(counter);
                        
            //add a line break
            newNode = document.createElement('br');
            outerDiv.appendChild(newNode);
            
            //increment the hidden field value 
            rowsField.value = counter;
    }
 </script>
 
<style type="text/css">@import url(jscalendar-1.0/calendar-win2k-1.css);</style>
<script type="text/javascript" src="jscalendar-1.0/_js/calendar.js"></script>
<script type="text/javascript" src="jscalendar-1.0/lang/calendar-en.js"></script>
<script type="text/javascript" src="jscalendar-1.0/_js/calendar-setup.js"></script>
</head>
 
<!--- The starting counter value is "1" --->
<cfset Counter = 1>
<form name="calendarUpdate" action="calendar2.cfm" method="post">
   <cfoutput>
   <div id="data">
       <!--- append row number to first set of fields --->
     <input type="text" name="ComposerName#Counter#" value="1" id="Start_f_date_c" /><button id="f_trigger_c">...</button>
     <script type="text/javascript">
    Calendar.setup({
        inputField     :    "ComposerName#Counter#",     // id of the input field
        ifFormat       :    "%B %e, %Y",      // format of the input field
        button         :    "f_trigger_c",  // trigger for the calendar (button ID)
        singleClick    :    true
    });
</script><br />
   </div>
   <!--- store the number of rows in a hidden field --->
   <input type="hidden" name="NumberOfRows" id="NumberOfRows" value="#val(Counter)#">
   <input type="hidden" name="ProgramID" value="3" />
   </cfoutput>
   <div style="clear:both;">
     <input type="submit" name="submitCalendarUpdate" value="Next >">
     <input id="addAnother" type="button" name="addAnother" value="Add Another Line"  onclick="javascript:addnew();">
   </div>
</form>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.