Solved

Embedding Javascript inside Javascript

Posted on 2006-06-19
8
424 Views
Last Modified: 2013-12-16
I've built a form that uses DHTML and InsertAdjacentElement to dynamically add new elements to a webpage when the user clicks a button.  The trouble I'm having is inserting JavaScript into the dynamic portion of the form.  

For example:

function AddNewElement {

var theString = '<table width="559" border="0" align="center" cellpadding="1" cellspacing="2"><tr><td colspan="2" align="center">ADD NEW ELEMENT<script language="JavaScript" type="text/javascript">ShowCalendar()</script></td></table>';

document.getElementById('newMaterial').insertAdjacentHTML("afterEnd", theString);
}

I'm trying to embed JavaScript into "theString" so that every time the AddNewElement function is called, it adds a new table to the page with a different JavaScript function inside (in this case, "ShowCalendar").  

I've tried splitting up the "<scr"+"<ipt>" tags in "theString" variable -- but no luck.



0
Comment
Question by:marcparillo
  • 5
  • 3
8 Comments
 
LVL 63

Expert Comment

by:Zvonko
Comment Utility
Like this:

var theString = '<table width="559" border="0" align="center" cellpadding="1" cellspacing="2"><tr><td align="center" onClick="ShowCalendar()">ADD NEW ELEMENT</td></tr></table>';


0
 
LVL 63

Expert Comment

by:Zvonko
Comment Utility
And if you rely want to execute ShowCalendar() at the page location as soon as you paste the html, then is the bad news that innerHTML does NOT execute the <script> tags.

0
 
LVL 63

Expert Comment

by:Zvonko
Comment Utility
If you tell me more what you try to do then I can perhaps help.

0
 
LVL 3

Author Comment

by:marcparillo
Comment Utility
Thanks Zvonko --

I need a form that is flexible enough to allow the user to add as many new entries as they want.  That much I've done.  I hit a snag when I discovered the 'addAdjacentHTML' command doesn't permit you to use <script> tags to summon a certain JavaScript function which calls up a calendar I'm using.

Work flow:
--> user needs to book five requests for concert tickets
--> user enters first request and then hits "Add New Window" button to generate a new form
--> new form appears below first form, pre-populated with certain fields from the first form (i.e. name, phone#)
--> user types in second request, etc, etc, etc.
--> at the end of the fifth window, user has the option of going back to change previous requests
--> user hits submit button

It sounds to me like what I need is a sophisticated shopping cart program, but really all I'm doing is adding form after form after form until the user is finished and submits all the data to a perl parser I've written.

Too complicated?
0
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
LVL 63

Accepted Solution

by:
Zvonko earned 500 total points
Comment Utility
Yes, too complicated. Unnecessary complicated.
First of all, do you really need more then one form se4ction on the page? Why? Do you know that you have to submit every single form separately? And you can submit only one form at a time. And after one form is submitted then you need to redirect the form submit response to a new window. If you do not redirect by setting the form target to a new window, then you loose all subsequent forms after submitting the first form.
For the script part I have a solution which I do not want to publish on EE. It can be read by anyone, also by kids that would abuse it. I can offer that script injection solution offline by email. But then you have to close this question because offline solution is against EE rules.

What about this scenario:
1.) You have one form on the page with a table embedded in that form section.
2.) The table has five rows where only first row is visible.
3.) After first row fields are filled you show the next row by unhide the next row.
4.) At unhide of the next row you can call the onclick() event of a calender button or calender image to execute the calender script.

Would that scenario serve the same purpose for you?
0
 
LVL 3

Author Comment

by:marcparillo
Comment Utility
I tried the hide/show scenario but in that instance, I have to set to 'hidden' a large number of empty forms in the event the user may make up to 25 requests (it's possible).  That ballooned my HTML past 175k with all those 'hidden' forms!  What I may have to do is use Perl to  automatically render the HTML with 1 visible form and 24 hidden forms. That may cut down on the file size.

The cool thing about the form I'm using is: no matter how long the form winds up being (at the user's discretion) all the information gleaned from the form is transferred as an array to my Perl parser.  The user only has to hit the submit button once even after filling out 10, 15, 20 requests and Perl can handle it -- no redirection necessary.

This form has worked for me in the past, my hang-up has to do with embedding the calendar in JavaScript.  I've tried attaching an onclick() event to the calendar but it launches the calendar script in a new browser window for some reason, instead of appearing inside my form. Ugh!

I would be very interested in seeing your script solution, as long as EE doesn't mind.
0
 
LVL 3

Author Comment

by:marcparillo
Comment Utility
jasperclt@yahoo.com
0
 
LVL 63

Expert Comment

by:Zvonko
Comment Utility
Sorry. now that I think about my trick I see it too tricky, unnecessary tricky.
You can do simply also the onclick() method of some Calender hotspot also with dynamic created forms, not only with hidden and unhidden forms. You can even use a hidden button on your popup and call its onclick() event handler to start your Calender script at new form creation.
Like this:

var theString = '<table width="559" border="0" align="center" cellpadding="1" cellspacing="2"><tr><td colspan="2" align="center">ADD NEW ELEMENT<input type=button name=Calender style="display:none;" onClick="ShowCalendar()"></td></table>';
document.getElementById('newMaterial').insertAdjacentHTML("afterEnd", theString);
document.forms[0].Calender.onclick();
}

You have to look for your forms[] array and/or rows numbering. I do not know what applies in your case.
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The purpose of this video is to demonstrate how to insert an Iframe into WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Open Page or Post…
The purpose of this video is to demonstrate how to Test the speed of a WordPress Website. Site Speed is an important metric of a site’s health. Slow site speed can result in viewers leaving your site quickly and not seeing your content. This…

743 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

14 Experts available now in Live!

Get 1:1 Help Now