Dynamically Writing Html/javascript From A Javascript Function
Jul 23, 2005
I'm working on some code and am running into brick walls. I'm trying
to write out Javascript with Javascript and I've read the clj Meta FAQ
and didn't see the answer, read many similar posts (with no luck
though), and searched through the IRT.ORG Faqs
(www.irt.org/script/script.htm).
The Javascript is designed to open an popup window and then inside that
window call another script which will resize that window. There may be
another way around this but the reason I tried this approach initially
was that I wanted to call the onload handler in the popup window to
resize the image only after the image had completely loaded. I've had
some code in the primary Javascript file (showimage.js) before that
works if the image has been cached but on the first load, it doesn't
resize properly which tells me it is probably because it is trying to
resize the window based on the image size but it isn't completely known
at that point. So I removed that code and tried placing the resizing
code in the second Javascript file (resizewindow.js). BTW I've tried
other code to open a popup image and automatically size it ie Q1443 at
irt.org but that doesn't do exactly what we need.
Even if there is another way to do this with one file, I still want to
figure out why this isn't working in case I run into it in the future.
I thought what I would need to do to use document.writeln to write
Javascript would be to escape any special characters and to break
apart the script tag ie
document.writeln('</SCRIPT>');
would become
document.writeln('</SCR' + 'IPT>');
I have a HTML page and 2 Javascript files. All files are in the same
directory and have permissions set correctly.
Here are the 3 files (keep in mind wordwrap has jacked up the
formatting):
index.html
----------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<SCRIPT type="text/javascript" LANGUAGE="JavaScript1.1"
SRC="showimage.js">
</SCRIPT>
</head>
<body>
Click the house<BR>
<A ONCLICK="newWindow1('house1.jpg','Nice House')"><IMG
SRC="house1thumb.jpg"></A>
</body>
</html>
showimage.js
------------
function newWindow1(pic,sitename)
{
resizewindow.js
---------------
function resizewindow()
{
// Do resizing here.
// Right now this isn't being executed
alert("resizing window");
}
Can anyone provide some pointers as to why this javascript is failing?
I'm using IE6 on Win2k and when I click on the image to open the popup
window, it does open the window but it is white with no content and the
system immediately goes from about 4% CPU usage to 100% and
consistently stays there until I kill that window with the task
manager.
Attached is a simple HTML file that adds and delete rows. In the add row function I set an attribute "onClick" this triggers the testMessage() function. When I try this in Firefox it works just fine however on IE it just refuses to work.
What is interseting is the ROW that already exists has a similar 'onClick' event which works when the page is loaded, but subsequent "row" additions to the table to not work in IE. Code:
I need a row of tickertape. Each character should appear on screen as if it were being typed, so that the entire row is scrolled left to right. Like a 'teletype' - I think they were called. Code:
How would I go about simply populating an HTML select statement from a JavaScript function. You see I have several HTML select statements on one page which are identical (sometimes repeated multiple times) so I wanted to try and cut down on these multiple instances and just have the values hard coded once (in a JavaScript function perhaps) and then called whenever they are needed. Could anyone advice me please, would this be easy to do?
I have the following HTML select statement hard coded:
I have a page that has a group of elements and i would like to add that whole group to the page as the user clicks add group button. In other words, i want to start with group1, then when i click on the add button, it will add group2, and so on.I have seen the various posts on the web on creating dynamic content, but every example i have seen works with javascript that is inside the html code.
I would like to have the code in a separate javascript file and when i call the function from the html page, it would add the group of elements i want to follow the current group.I need to pass the document to the function and then have the function add the group to the html page.
What I want to do is create a HTML form that allows the user to enter data into about 10 fields, and then based on the entered data, writes out data strings to a text file. I am attempting to create a form for entering simple rectangle CAD data via a HTML form, which will be written to a text file, and then imported into a CAD program.
The form would contain prompt boxes for things like length, width, radius size, step/repeat, etc. When the user hits the "SUBMIT" button, the data strings would be written out to the filename the user specified. Below is an example of data strings to be ouputted. Variables are &L, &W, &R, &STEPX, &STEPY, &XN, &YN.
I have an external .js file to my webpaage. Can i change the value of these variables from my htm page, so that they are changed for good.
ie - i know this wont work, but it is an example.
externalFile.js ------------- var alpha = "This is some text"
frontend.htm -------------- <form name="changer" method="get" action="externalFile.js"> <input name="alpha" type="text" id="alpha" value="this is some new text that will completely replace the old text in the file"> </form>
i'm having trouble writing to a text file with javascript, i've tried writing to a local text file on my own PC, and I've also tried writing to a local file on my own server, (which I have all permissions to do so...) I'd really like to write to a file that resides on my own web server. Code:
I have a form that posts data to a PHP mailer page I have created. When it goes to the PHP mailer page it reads some of the data and modifies the page accordingly using Javascript (hiding certain divs, etc...). My goal, is to take all this data after it has been processed by Javascript and send it through my PHP mailer as it is currently formatted.
If it helps any, the track I am on right now involves encapsulating the Javascript processed block in a div. I am then trying to take the ..innerHTML data from that div and store it in the PHP $message variable for my mailer. This won't work because PHP is server side. So, I moved on to generate some Javascript code (with PHP) that sends all that messy HTML data that its processed through a URL variable to then be read by PHP. This doesn't really accomplish what I want as it cuts off about a quarter of the way through my data......
Any ideas??
One thing I thought of but don't know how to do or whether it's even possible is using PHP to view the source of the current page and store that as the HTML to be e-mailed. Or, is it possible to do something similar to .innerHTML with PHP?
Firefox has a Javascript Console that has 3 panels besides "All" and "Clear": "Errors", "Warnings", "Message".
Does anyone know a way to log a message in the Message panel with JavaScript? That would really help debugging. I know there's a way involving XPCOM, but that only works with "trusted" scripts, and scripts loaded thru html aren't trusted.
I've been using the document.write function to loop through some xml and print the data within a HTMl table. I thought it would be useful to add a hyperlink to the table row, so I thought the best way to do this would to create a function (called popup), which takes an id as a parameter.
The problem with this, is that when writeing using the onClick, the speech marks seem to all get messed up.
Code:
onclick='popup('"+mailID+"')'
I'm 99% sure it's just the speech marks, i'm just not sure of the right combination, and it's doing my head in
If someone could even point me in the right direction, even the proper name as to what this is called would be great, as googleing it is proving to be a nightmare!
Here's the whole section of code if it's more useful:
Code:
var mailID = x[i].getElementsByTagName("mailid")[0].childNodes[0].nodeValue; if (r == "unread") { //email is unread document.write("<tr onclick='popup('"+mailID+"')' title='test'>"); } else { //else is read, so add colour
I'm getting errors in Firefox everytime I try to run this frame resize code, but it works fine in IE. I can't seem to figure out what the problem is with it.
The error is: Error: theFrame has no properties Line: 8
The line that the javascript console is showing an error for is in italics.
I have some javascript that I have written into the <body> section and it works great. But I would like to make it into a javascript function and define the function in the <head> section. Then in the <body> section write a small bit of javascript that would call the function() object. Code:
I'm adding people to a database. People have a first name, last name, and a undetermined number of Cities and States with which they can be associated. I've got a drop down box that I would like to use to display the number of inputs to allow for city/state entry. I would like to dynamically increase or decrease the inputs based on a user changing the selection in the drop down box, without submitting the script. Only the first city and state are required (which is why the label is bold). Any ideas on the best way to handle this without losing any potential city information that may have been previously typed into the input (i.e. if I type San Fran into city0 and CA into state0 and then change the number of cities to 4 - I'd like San Fran and CA to still be populated in city0 and state0). Code:
I'm currently looking at data-piping ie making server calls without reloading the page, the server returning some data to a cookie and the calling page using that same data on the page using DHTML. So far so good...
But is it possible to actually use javascript to actually write more javascript onto the page? Or, alternatively, is it possible to dynamically add a call to an external javascript file.
Something like...
document.writeln('<script src="script.js")
The idea being that the server could return functions for the calling page to use, which would be very nice for complex web applications.
If you can do this, what issues do you need to be aware of?
If you can't, are there any ways of achieveing the same things? I'm thinking of things like dynamically adding a scriptlet call to the page in Windows IE, though a more cross-browser solution would be cool.
Might there be a way to add a set of Javascript functions to a display page's existing set of Javascript functions on the fly without reloading the display page, and if so, how?
A couple of approaches I have tried, but without success are:
- A) For an embedded "retriever" IFrame in the display page to retrieve a set of JS functions from the server and then on its "onload" transfer (by innerHTML transference) that set of functions into the parent display page.
- B) Similiar to "A" but to use regular old browser frames - one being the "retriever" and one being the display page.
- C) Using a JS function in the display page to make a http request for a supplementary .js file(s).
Please note: the goal is to retrieve *only* an additional set of Javascript functions from the server, and then add them to an "original" set of functions already loaded into the browser. Meaning, NOT - say - for an IFrame to download from the server *both* the additional set and again the "original" set, which the parent display page could then run directly from the IFrame.
After "A", "B", and "C", I'm at a loss for further ideas.
I have been struggling with a cross browser solution to loading external javascript files on the fly.
I have been successful using the following code in IE6:
var newScr = document.createElement("SCRIPT"); newScr.src = "newScr.js"; newScr.type="text/javascript"; document.getElementsByTagName("head")[0].appendChild(newScr);
I believe the reason is that IE is loading the external file syncronously while Firefox is not. Is there an onload event for creating an element (if so I do not see it in Venkman). I have seen the solution of using XMLHTTP to load the script but I am trying to get around any dependency (atleast at this stage of the library) on activex.
My client wants to upload multiple files to the server using the FILE type input of the form. Their requirement says that once they click the browse button of the FILE INPUT type , besides file browsing window another FILE FIELD is added at the bottom of this one. and when the user clicks the browse button of second, it adds another until the user clicks the UPLOAD button to submit the form.
I dont know it is possible or not ???? if yes then please tell me how.
The alternate way is to give drop down menu with number and when the USER chooses certain number then ..that amount of FILE FORM FIELDS will be added. i.e if user chooses 3 then three file fields are there to upload 3 files at a time.
I have written a script that i am pasting here, but when i choose the drop down menu and select value the FILE FIELDS are shown but the original drop down menu vanishes.. Please review my code and modify it or refer some script to me.
IF The first choice is possible, i mean adding each FILED by browse button click , then tell me its code, other wise modify this code that i am pasting or give me some link to download a premade script. Code:
Ive been banging my head on the wall for hours with this one, hopefully someone will know what Im doing wrong here :
The Goal:
I have an xml file that is generated on the fly via JSP which I want to load into a Microsoft.XMLHTTP ActiveX object and manipulate via javascript on the client side. Data is retreived from the server at the request of the javascript without having to reload the page.
The Problem:
For the JSP to dynamically output xml, the file must have the extension JSP, which is set to the mime type of dynamo-internal/html on the server side (as we are using ATG Dynamo). But the javascript on the client side will not retrieve anything unless the file extension is ..xml (or the mime type is recognized as text/xml). So the only way I can get it to work is to change the extension to .xml, which then of course amkes it so that the server will not process any of the JSP code.
Ive tried to override the mime type within the javascript, using the setRequestHeader method after opening the file, but no luck. A call to alert the value of req.responseXML.xml after the send() turns up empty. Ive only gotten it to work if I use a static xml file in palce of the jsp. Sample of the javascript code is below:
if (window.XMLHttpRequest) { // branch for native XMLHttpRequest object - THIS WORKS req = new XMLHttpRequest(); req.overrideMimeType("text/xml"); req.onreadystatechange = processReqChange; req.open("GET", "models.jsp?cId=300006&mId=TAC24", true); req.send(null); alert(req.responseXML.xml); //this gives me the resulting xml file } else if (window.ActiveXObject) { // branch for IE/Windows ActiveX version - NOT WORKING req = new ActiveXObject("Microsoft.XMLHTTP"); if (req) { req.onreadystatechange = processReqChange; req.open("GET", "models.jsp?cId=300006&mId=TAC24", true); req.setRequestHeader("Content-Type","text/xml"); req.send(); alert(req.responseXML.xml); //this gives me nothing } }
In looking at the following example the Microsoft gives (bottom of page):
I should note that I successfully got the script to work using the XMLHttpRequest object and the overrideMimeType() method. This works with FireFox and I think some Mozilla clients, but not with the all important IE5, which instead uses the XMLHTTP ActiveX control.=
I'm having problems writing a "preview window" for some user input. Essentially, I have a <textarea> that I'm pulling their input from, and replacing the contents of an iframe with that data.
Instead of writing it as "<div>", etc... it writes "<div>" The browser therefore just displays all the text instead of interpreting it as html.
Code: function content() { return(document.getElementById('content_area').innerHTML); }
I'm trying to dynamically write out this line of javascript:
obj.offsetLeft
So I want to be able to feed a param of either Top or Left in and then write it out so it gets execuated correctly in the javascript....so i've tried stuff like:
Usin a JavaScript write a script that inputs five numbers and determines and outputs HTML text that displays the number of negative numbers, the number of positive numbers, and the number of zeros input. Code:
On the time sheet page i have created a years worth of entries in the database for a user so that they may create entries ahead of time(for holidays etc.).
My problem is that when i load the page, i display the current month for that user and it displays:
Date Month Day TimeInMorning TimeIn Evening etc..
What i would like is that a user may update any field and click on a save button which will update the field(s) that they have changed. I ahve attempted in javascript to do this but i am failing.
