Solved

Embedding Javascript inside Javascript

Posted on 2006-06-19
8
439 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
[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
  • 5
  • 3
8 Comments
 
LVL 63

Expert Comment

by:Zvonko
ID: 16935858
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
ID: 16935871
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
ID: 16938117
If you tell me more what you try to do then I can perhaps help.

0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 3

Author Comment

by:marcparillo
ID: 16938743
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
 
LVL 63

Accepted Solution

by:
Zvonko earned 500 total points
ID: 16939815
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
ID: 16941035
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
ID: 16947677
jasperclt@yahoo.com
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 16948587
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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

When setting up new project requests for our site, one of the most powerful tools our team has available to use is Axure (http://www.axure.com/). It’s a tool for creating software and web prototypes that can function and interact as if it were the a…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…
The purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…

738 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