Solved

Incorporate JavaScript Calendar with Loop - Coldfusion Code

Posted on 2009-05-19
4
492 Views
Last Modified: 2012-05-07
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

0
Comment
Question by:wkolasa
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 27

Expert Comment

by:azadisaryev
ID: 24428023
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
 

Author Comment

by:wkolasa
ID: 24432300
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
 

Author Comment

by:wkolasa
ID: 24432414
i am willing to try a different calendar
0
 
LVL 27

Accepted Solution

by:
azadisaryev earned 500 total points
ID: 24433049
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

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Javascript: Mouseup doesn't follow mousedown 13 61
Angular2 remove duplicates 11 24
Conformation code 4 37
Slow Down an Animation 3 29
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
Hi, Even though I have created this Tutorial on My personal Blog, Some people might not able to find my website, So here i am posting it again Today, from the topic it is very clear that i will be showing you here the very basic usage of how we …
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…
Suggested Courses

752 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