?
Solved

Mootools set('html',value) in IE

Posted on 2010-04-10
11
Medium Priority
?
847 Views
Last Modified: 2013-11-11
Hi Experts,

I have a contact form on my site that uses Mootools and an AJAX request to validate entries into a form, then, if I have an error I create elements using the mootools framework and inject the errors into the new elements.

Now, this works fine in Firefox and Chrome but not in any versions of Internet Explorer. When clicking, the following error is indicated in Internet Explorer:-

"Unknown runtime error"

I've done a fair few google searches but nothing seems to work. I've pasted the code that I'm using below. If anyone could fire some suggestions it would be appreciated.
window.addEvent('domready', function() {
		$('ajax_submit').addEvent('click', function(e){
			e.stop();
			contact_form();
		});
	});

	var ajaxbusy = false;
		
	function contact_form()
	{
		if (ajaxbusy == true) {
			alert('Sorry, the form has not completed yet');
		} else {
			var options = {};
			options['name'] = $('name').value;
			options['email'] = $('email').value;
			options['company'] = $('company').value;
			options['url'] = $('url').value;
			options['contact'] = $('contact').value;
			options['referrer'] = $('referrer').value;
			options['message'] = $('message').value;
			var request = new Request.JSON({
				url: '<?=site_url('ajax/methods/contact_form')?>',
				data: options,
				onRequest: function(instance) {
				ajaxbusy = true
				$('contact_form').addClass('hidden');
				$('ajax_spinner').removeClass('hidden');
				},
				onComplete: function(jsonObj) {
					ajaxbusy = false;
					$('ajax_spinner').addClass('hidden');
					
					if(jsonObj.type=='pass') {
						$('contact_success').removeClass('hidden');
					}
					else {
						$('contact_failure').removeClass('hidden');
						
						if($('erroritems')) {$('erroritems').dispose();}
						if($('errorback')) {$('errorback').dispose();}
						if($('errorlink')) {$('errorlink').dispose();}
						
						var errorList  = new Element('p', {id: 'erroritems'});
						errorList.inject($('contact_failure'));
						errorList.set('html',jsonObj.error);
						
						var errorBack  = new Element('p', {id: 'errorback'});
						errorBack.inject($('contact_failure'));
						
						var errorLink = new Element('a', {id: 'errorlink', href: '#'});
						errorLink.inject(errorBack);
						errorLink.set('html','&raquo; Back to Form');
						
						errorLink.addEvent('click', function(e){
							e.stop();
							$('contact_failure').addClass('hidden');
							$('contact_form').removeClass('hidden');
						});
					}
				},
				onFailure: function (instance) {
					ajaxbusy = false;
				}
			}).send();
		}
	}
</script>

Open in new window

0
Comment
Question by:EzEApostle
  • 6
  • 5
11 Comments
 
LVL 12

Expert Comment

by:Avinash Zala
ID: 30296720
Try

errorList.innerHTML= jsonObj.error;


Hope this helps.
Addy

0
 
LVL 1

Author Comment

by:EzEApostle
ID: 30301118
Hey Addy,

Thanks for the suggestion, tried but returns the same results?

Cheers
0
 
LVL 12

Expert Comment

by:Avinash Zala
ID: 30481557
Assign this below event without domready.

$('ajax_submit').addEvent('click', function(e){
                  e.stop();
                  contact_form();
            });


Hope this helps
Addy
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
LVL 1

Author Comment

by:EzEApostle
ID: 30496608
Hi Addy,

Removing the domready from the click event results in a ajax_submit is null error.

I'm pretty sure that the reason IE fails is because for some reason it doesn't like the set('html') value, same as the innerHTML statement.
0
 
LVL 12

Expert Comment

by:Avinash Zala
ID: 30518221
no innerHTML works fine for me, with no problem.

Thanks
Addy
0
 
LVL 1

Author Comment

by:EzEApostle
ID: 30529185
Is that in IE? Because, it works for me in Firefox and Chrome just fine, it just doesnt seem to be setting the container html in Internet Explorer.
0
 
LVL 12

Expert Comment

by:Avinash Zala
ID: 30578351
yes its works in internet explorer too.

Addy
0
 
LVL 1

Author Comment

by:EzEApostle
ID: 30592846
Would you mind showing me the code that you've implemented Addy?

Thanks
0
 
LVL 12

Accepted Solution

by:
Avinash Zala earned 1000 total points
ID: 30600990
I have attached my one of the function:

Hope this helps.
Addy
function getCompanyData(company_name) {
	
	var req= new Request({
		url: full_url,
		method: 'post',
		data: { 'call' : 'getCompanyData', 'company_name' : company_name },
		//onRequest: loding_image(div_id),
		onComplete: function(responseText){
			$('main_table4').fade('out');
			var e= function(e){$('main_table4').innerHTML=responseText;
			}.delay(200);
			var d=function(e){$('main_table4').fade('in');
			}.delay(1000);
		//$('main_table4').fade.delay(1000,'','in');
		}
	}).send();			
	return false;
}

Open in new window

0
 
LVL 12

Expert Comment

by:Avinash Zala
ID: 30785617
Did this works for you???

Addy
0
 
LVL 1

Author Closing Comment

by:EzEApostle
ID: 32640942
Im not a JS developer and by posting code that the person made as oppossed to posting a working version of my own was not really at all helpful as I still do not know the problem of my script.
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

601 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