JavaScript - Script Breaks When Performed Twice

I have the below JS code to change up a select box based on what is selected in another select box. IE9 broke this somehow. It still works in other browsers as well as IE8 and IE7.

When you select something in select box A, it properly populates select box B. However when you go back and change select box A again the script stops working completely.

The error I'm getting from the IE9 developer tools debugger is:

SCRIPT65535: Invalid calling object
dynamicselect.js, line 31 character 18

I have bolded the relevant line below.

Code:

function dynamicSelect(id1, id2) {
	// Browser and feature tests to see if there is enough W3C DOM support
	var agt = navigator.userAgent.toLowerCase();
	var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
	var is_mac = (agt.indexOf("mac") != -1);
	if (!(is_ie && is_mac) && document.getElementById && document.getElementsByTagName) {
		// Obtain references to both select boxes
		var sel1 = document.getElementById(id1);
		var sel2 = document.getElementById(id2);
		// Clone the dynamic select box
		var clone = sel2.cloneNode(true);
		// Obtain references to all cloned options 
		var clonedOptions = clone.getElementsByTagName("option");
		// Onload init: call a generic function to display the related options in the dynamic select box
		refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
		// Onchange of the main select box: call a generic function to display the related options in the dynamic select box
		sel1.onchange = function() {
			refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
		};
	}
}
function refreshDynamicSelectOptions(sel1, sel2, clonedOptions) {
	// Delete all options of the dynamic select box
	while (sel2.options.length) {
		sel2.remove(0);
	}
	// Create regular expression objects for "select" and the value of the selected option of the main select box as class names
	var pattern1 = /( |^)(select)( |$)/;
	var pattern2 = new RegExp("( |^)(" + sel1.options[sel1.selectedIndex].value + ")( |$)");
	// Iterate through all cloned options
	for (var i = 0; i < clonedOptions.length; i++) {
		// If the classname of a cloned option either equals "select" or equals the value of the selected option of the main select box
		if (clonedOptions[i].className.match(pattern1) || clonedOptions[i].className.match(pattern2)) {
			// Clone the option from the hidden option pool and append it to the dynamic select box
			sel2.appendChild(clonedOptions[i].cloneNode(true));
		}
	}
}

Thank you in advance for any help provided.

here is my code

Code:

<ul id="myList" class="myList">
							<form method="post" action="somepage">
							<li id="item_1">
								<a href="#"><img src="images/build/handle.jpg" alt="handle" border="0" /></a>
								Link Group
							</li>
							<li id="item_2">
								<a href="#"><img src="images/build/handle.jpg" alt="handle" border="0" /></a>
								Page Group
							</li>
							<li id="item_3">
								<a href="#"><img src="images/build/handle.jpg" alt="handle" border="0" /></a>
								SEO
							</li>
							<li id="item_4">
								<a href="#"><img src="images/build/handle.jpg" alt="handle" border="0" /></a>
								<script type="text/javascript">
								tinyMCE.init({
									mode : "textareas",
									theme : "advanced"
								});

								function toggleEditor(id) {
									if (!tinyMCE.get(id))
										tinyMCE.execCommand('mceAddControl', false, id);
									else
										tinyMCE.execCommand('mceRemoveControl', false, id);
								}
								</script>

								
									<textarea name="content" style="width:96%">
									</textarea>
								
								<a href="javascript:toggleEditor('content');">Add/Remove editor</a>
							</li>
							</form>
						</ul>
						<p id="myList_serialize"></p>

						<script type="text/javascript" language="javascript" charset="utf-8">
						  Sortable.create('myList',{ghosting:false,constraint:true,hoverclass:'over',
							onChange:function(element){
								var totElement = 7;
								var newOrder = Sortable.serialize(element.parentNode);
								for(i=1; i<=totElement; i++){
									newOrder = newOrder.replace("myList[]=","");
									newOrder = newOrder.replace("&",",");
								}
								$('myList_serialize').innerHTML = '<strong>New Order</strong>: '+newOrder;
							}
						  });
						</script>

I some draggable li's which works fine, I have a tinyMCE WYSIWYG editor which works fine!

How can I add a form to my UL LI?

I pulled together a custom RSS twitter feed that uses javascript; however, when I tell the code to "callback" 3 posts, they all run together without line breaks. What is the best way to have breaks between the posts?

This page shows the html code (in the right sidebar):
http://www.westbrockdesign.com/twitter.html


The javascript looks like this:

Code:

function twitterCallback2(C){var A=[];for(var D=0;D<C.length;D++){var E=C[D].user.screen_name;var B=C[D].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g,function(F){return'<a href="'+F+'">'+F+"</a>"}).replace(/\B@([_a-z0-9]+)/ig,function(F){return F.charAt(0)+'<a href="http://www.twitter.com/'+F.substring(1)+'">'+F.substring(1)+"</a>"});A.push("<span>"+B+'</span> <a style="font-size:85%" href="http://twitter.com/'+E+"/statuses/"+C[D].id+'">'+relative_time(C[D].created_at)+"</a>")}document.getElementById("twitter_gretchen").innerHTML=A.join("")}function relative_time(C){var B=C.split(" ");C=B[1]+" "+B[2]+", "+B[5]+" "+B[3];var A=Date.parse(C);var D=(arguments.length>1)?arguments[1]:new Date();var E=parseInt((D.getTime()-A)/1000);E=E+(D.getTimezoneOffset()*60);if(E<60){return"less than a minute ago"}else{if(E<120){return"about a minute ago"}else{if(E<(60*60)){return(parseInt(E/60)).toString()+" minutes ago"}else{if(E<(120*60)){return"about an hour ago"}else{if(E<(24*60*60)){return"about "+(parseInt(E/3600)).toString()+" hours ago"}else{if(E<(48*60*60)){return"1 day ago"}else{return(parseInt(E/86400)).toString()+" days ago"}}}}}}};

Any insights would be much appreciated!

Hi, I have my page here. There is a tab system on the page that uses javascript. View the source the see the javascript file (tabber9.compressed.js).

Now, on my end, I am adding some tracking code. The code looks like this:

Code:

<SCRIPT TYPE='text/javascript' LANGUAGE='JavaScript'><!--    //
    window.onload = initPage;
    function initPage() {
        if (this.GetCustomerGUID)
            document.forms["Test"].elements["CustomerGUID"].value = GetCustomerGUID();
    }
//--></SCRIPT>

The problem is, when I add this code to my footer, it breaks the tab system. The tabs don't work any more.

I am not a JavaScript expert by any means (or else I would have known what the issue is! lol) but, I guess it has something to do with the window.onload function? I say that because I see the window.onload code in the tabber javascript as well.

Any advice or help anyone can give would be greatly appreciated. Thanks in advance for any help!

hi, I have some HTML to edit in my database, in my back end administration I have it in a textarea but when I go to edit it, it all messes up and lots of '/' area added, see below:

Code:

Site Design by: <a href=\\\\\\\"http://www.jbiddulph.com\\\\\\\" target=\\\\\\\"_blank\\\\\\\" title=\\\\\\\"John Biddulph - Web Development\\\\\\\">jbiddulph.com</a>

php code Code:

<p>
								<label>Site Design by</label>
								<textarea class="text-input small-input" name="SiteDesignby"><?php echo $row1['SiteDesignby'] ?></textarea>
								</p>

Can anyone help please?

I must have spent around 8 hours looking for the JavaScript code I need for putting text on the screen using onclick. Here is the code I found:

http://javascript.internet.com/snipp...functions.html
Code:

/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: HunBug | http://www.astral-consultancy.co.uk/cgi-bin/hunbug/doco.cgi?11430 */

function appendText(node,txt) {
  node.appendChild(document.createTextNode(txt));
}

function appendElement(node,tag,id,htm) {
  var ne = document.createElement(tag);
  if(id) ne.id = id;
  if(htm) ne.innerHTML = htm;
  node.appendChild(ne);
}

That works great, but I need to add three lines of text at a time, not just one. I spent at least 4 more hours searching for ways to add a line break with JavaScript, but nothing I have found works with this code. Here's what the onclick code looks like:

Code:

onclick="appendText(document.getElementById('bb1'),'8,4,6' + '0,0,0' + '16');

<div id="bb1"></div>

The page I'm working on will have clickable text and image maps and when you click, three lines of batari Basic code will be added to a DIV. Here's an example of what that code will look like:

Code:

   8,4,6
   0,0,0
   16

Click on another link and you'd see something like this:

Code:

   8,4,6
   0,0,0
   16
   8,12,17
   0,0,0
   16

It would keep adding three lines of batari Basic code to the list every time you clicked. If somebody can figure out how to stick line breaks in this code that really work, I'll be all set. I have tried <BR>, \n, \r\n and a couple of other things, but nothing works so far.


Thanks.

Hello;
I am testing some code that finds and element and attempts to add an event handler attribute to it as 'onclick' (test case in Firefox 3.5.9)
/*
The actual code is:
window.onload = function()
{
//<irrelevant code>
var test = document.getElementById('tstEl');
test.setAttributeNode('onclick');
test.setAttribute('onclick', "alert(\"Don\'t get testy\")");
}
*/
The error per the js console in Firefox is:
Error: uncaught exception: [Exception... "Could not convert JavaScript argument arg 0 [nsIDOMHTMLInputElement.setAttributeNode]" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: http://192.168.1.6/<pathInfo>/SC_branch2_dev.php :: anonymous :: line 35" data: no]

I am trying to do this because Element.addEventListener or Element.attachEvent won't allow for arguments to be passed to the event handler code/function. What is going on here? The only line referenced, line35, in the document text containing javascript code is irrelevant to the problem.
Thank you for time, interest and attention;
WhoEverIReallyAm

This is about http://www.aecp.pt

You will see this on the page, and I highlight the problem on the screenshot itself: http://skitch.com/ricardosalta/nk9g4...ub-de-portugal

I know by trial and error that the problem is caused by the presence of image galleries like this on the homepage: http://skitch.com/ricardosalta/nk988...ub-de-portugal

I use Mac; is there a good tool to find these incompatibilities?

Anyway, I appreciate all the help you can gift me with. Any pointers will be much valuable. Thanks.

All the best,

Tatonka

i am dynamically making pdf files, works great using abcpdf etc etc. the only problem that i am having is with the page breaking.

i want to create a function that runs onload and can read the position of elements and add breaks before the element if it is cut off.

each block ("from the west", "holiday inn express") is a span with the class name of "entry"

i want to loop through those, get their height, add them together and if that span falls in the range of the page size (792px) add a page break before it. the difficult part will be when we get to pages 2 and above

does that make sense?

im throwing around some ideas now in a js file, if you have any please post them

thanks

Hi I currently have this:

var d = new Date()
var theDay = d.getDay()
switch (theDay)
{
case 1:
document.write("On Air Tonight...") <br>
document.write("ALAN POWELL!")
document.write("8pm - 10pm")
document.write("CARL KANE!")
break
case 2:
document.write("On Air Tonight...")
document.write("ALAN POWELL!")
document.write("8pm - 10pm")
document.write("CARL KANE!")
break
case 3:
document.write("On Air Tonight...")
document.write("ALAN POWELL!")
document.write("8pm - 10pm")
document.write("CARL KANE!")
break
case 4:
document.write("On Air Tonight...")
document.write("ALAN POWELL!")
document.write("8pm - 10pm")
document.write("CARL KANE!")
break
case 5:
document.write("On Air Tonight...")
document.write("ALAN POWELL!")
document.write("8pm - 10pm")
document.write("CARL KANE!")
break
case 6:
document.write("On Air Tonight...")
document.write("ALAN POWELL!")
document.write("8pm - 10pm")
document.write("CARL KANE!")
break
case 7:
document.write("On Air Tonight...")
document.write("ALAN POWELL!")
document.write("8pm - 10pm")
document.write("CARL KANE!")
break
default:
document.write("On Air Tonight...")
document.write("ALAN POWELL!")
document.write("8pm - 10pm")
document.write("CARL KANE!")
}

Which obviously outputs the following:

On Air Tonight...ALAN POWELL!8pm - 10pmCARL KANE!

How do i code it so it displays

On Air Tonight...

ALAN POWELL!
8pm - 10pm

CARL KANE!

Also in Firefox, its not displaying ANYTHING... is there anything wrong in the code which FF would throw out?

CSS validation says everything is ok

any help would be fantastic.

Thanks in advance

UKD.

I've got a page (hrnewseastanglia.com) where I have to use a jquery function to stretch the body to the user's window height if it isn't already.

In the same code I also use a condition that if the body is bigger than the user's window, the content has a padding to stop it going over the grass.

The reason I need to do the resize is because I have a background image that needs to sit at the very bottom of the page (with no bar or gap below it). The reason the padding can only exist when the body is bigger than the window is because it will put a scrollbar on pages that shouldn't have them.

It works great, but the only trouble is that if somebody decides to resize their window on a page that fits in it - it breaks.

This is my script:
Code:

<script type="text/javascript">

$(document).ready( function() {
	
	stretch_portal_content();
	$(window).resize( stretch_portal_content );
});

function stretch_portal_content() {
	// if the body isn't at least as big as the user's window - force it to be
	if( $(window).height() > $('body').height() ) {
		$( '#wrapper' ).height(
			$(window).height() - ( $('body').height() - $('#wrapper').height() )
		);
	}
	
	// if the content goes beyond the window make sure it doesn't go beyond the grass at the bottom
	if( $(window).height() < $('#wrapper').height() ) {
		$( '#wrapper' ).css("padding-bottom", '130px');
	}

}

</script>

I've been scratching my head over this for hours but haven't come up with a solution. If anyone can help I'd really appreciate it!

Thanks for looking!
I have a widget that lives on a blank/fresh Blogger.com account, and with test pictures, it seems to work fine. However, when I throw in Amazon ads it breaks. Images with links as sample data, rotate and display fine. Changing them to amazon code, they break. What's going on? Am I missing an escape character?

Code:

<script language="Javascript" type="text/JavaScript">
var ad = new Array()

ad[0]='
<iframe src="http://rcm.amazon.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=netbooknewsco-20&o=1&p=8&l=as4&m=amazon&f=ifr&ref=ss_til&asins=B0051VVOB2" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>
'

ad[1]='<iframe src="http://rcm.amazon.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=netbooknewsco-20&o=1&p=8&l=as4&m=amazon&f=ifr&ref=ss_til&asins=B0051VVOB2" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>
'


function randomorder(targetarray, spacing){

var randomorder=new Array()
var the_one
var z=0
for (i=0;i<targetarray.length;i++)
randomorder[i]=i

while (z<targetarray.length){
the_one=Math.floor(Math.random()*targetarray.length)
if (targetarray[the_one]!="_selected!"){
document.write(targetarray[the_one]+spacing)
targetarray[the_one]="_selected!"
z++
}
}
}

</script>

<script language="Javascript" type="text/javascript" ></script>
<script>
randomorder(ad, ' ')
</script>

The title says it all really.

An example of the cufon breaking is when I add a product to my cart,

example here http://joemeetsjoy.com/products

When you click buy now then click ok on the pop up box the cufon breaks.

It also happens if you go the the shopping cart and choose a shipping option.

Any ideas why this happens.

Thanks

Hi All, I have two scripts which I want to try and integrate. I am using a nice gallery script to show thumbnails which are appended to a an image wrapper which on click of the thumbnail shows the larger image in the image wrapper,

I am trying to implement cloud zoom which is a plugin which uses image srcs to then point to an anchor href to show another larger zoom image either in the same place.. which is what I am trying to do or in another div beside.

I have had to set me img srcs up in a certain way to easily enter some product details. and I need to try an manipulate the code to make it work to suit my file layout.

I am using a var= images [ with

a series of file locations and info such as below

{
src: 'romanticabride/thumbs/tn_Shauna.jpg',
srcBig: 'romanticabride/images/Shauna.jpg',
title: 'Shauna',
longDescription: '<b><H1>Shauna</H1></b><br><b>Romantica Of Devon <br><br><h2>Sizes Available:</h2><br> 6 - 32.<b><br><b><br><b><b><b><H2>Colours Available:</h2><b><br>Various<br>Please Enquire Below<br><br><br><br><a href="mailto:tracy@cherishbridal.co.uk?subject=Web Enquiry Regarding Romantica Shauna Bridal Gown"class="enquiry rose glow" >Click To Enquire About This Item </a>'
},

what I need is for cloud zoom to work when the main image wrapper is hovered over which means it will need to add a class or when the whichever srcBig: is hovered over it gets wrapped by href to make the script work .

one of my pages is http://www.cherishbridal.co.uk/romaticabride.html

the cloud zoom script is at http://www.professorcloud.com/mainsite/cloud-zoom.htm.. I am happy to share a jsfiddle with someone or explain further
or post some code. Thank you in advance