Solved

Incorporate JavaScript Calendar with Loop - Coldfusion Code

Posted on 2009-05-19
4
477 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
  • 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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

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 …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

758 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now