?
Solved

Embedding Javascript inside Javascript

Posted on 2006-06-19
8
Medium Priority
?
447 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
Video: Liquid Web Managed WordPress Comparisons

If you run run a WordPress, you understand the potential headaches you may face when updating your plugins and themes. Do you choose to update on the fly and risk taking down your site; or do you set up a staging, keep it in sync with your live site and use that to test updates?

 
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 2000 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

Get free NFR key for Veeam Availability Suite 9.5

Veeam is happy to provide a free NFR license (1 year, 2 sockets) to all certified IT Pros. The license allows for the non-production use of Veeam Availability Suite v9.5 in your home lab, without any feature limitations. It works for both VMware and Hyper-V environments

Question has a verified solution.

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

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.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. 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 : Go t…
Suggested Courses

765 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