Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Tinymce, Jquery and AJAX submit in IE6

Posted on 2008-11-04
4
Medium Priority
?
2,027 Views
Last Modified: 2012-05-05
Hello Experts,

After a lot of pain and experimentation I have finally managed to get Tinymce to update to submit via the Jquery Form plugin. However, for some reason it will only work in Firefox and in IE6 it just fails throwing up "Unspecified Error". I've gone through everything I can think of to get it working, but nothing seems to work.

Help? My code is attached.

500 points as ever :-)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"/>
 
 
<head>
  <title>Edit article</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/>
 
 
      
		     
 <script language="javascript" type="text/javascript" src="tinymce3/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
 
	tinyMCE.init({
		mode : "exact",
		elements : "articlebody",
		 theme: "advanced",
		 skin : "o2k7",
  plugins : "safari,paste,pagebreak,style,layer,table,save,advhr,advimage,advlink,insertdatetime,preview,media,searchreplace,contextmenu,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imgmap,liststyle",
 
		// Theme options
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,liststyle,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,imgmap",
theme_advanced_buttons3 : "tablecontrols,|,insertbox,hr,removeformat,visualaid,|,sub,sup,|,charmap,advhr,|,ltr,rtl",
theme_advanced_buttons4 : "forecolor,backcolor,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertdate,inserttime,|,newdocument,cleanup,code,preview,|,fullscreen",
theme_advanced_styles : "-- Headings _______________----=_;Reverse Blue=reverse_blue;-- Boxes _______________----=_;Bluebox Full=bluebox_full;Bluebox ½Left=bluebox_half_left;Bluebox ¼Left=bluebox_quarter_left;Bluebox ½Right=bluebox_half_right;Bluebox ¼Right=bluebox_quarter_right;Greenbox Full=greenbox_full;Greenbox ½Left=greenbox_half_left;Greenbox ¼Left=greenbox_quarter_left;Greenbox ½Right=greenbox_half_right;Greenbox ¼Right=greenbox_quarter_right;Greybox Full=greybox_full;Greybox ½Left=greybox_half_left;Greybox ¼Left=greybox_quarter_left;Greybox ½Right=greybox_half_right;Greybox ¼Right=greybox_quarter_right;Whitebox Full=whitebox_full;Whitebox ½Left=whitebox_half_left;Whitebox ¼Left=whitebox_quarter_left;Whitebox ½Right=whitebox_half_right;Whitebox ¼Right=whitebox_quarter_right;Yellowbox Full=yellowbox_full;Yellowbox ½Left=yellowbox_half_left;Yellowbox ¼Left=yellowbox_quarter_left;Yellowbox ½Right=yellowbox_half_right;Yellowbox ¼Right=yellowbox_quarter_right;-- Float ______________________________=_;Float Left=floatLeft;Float Right=floatRight;--Predefined_______________=_;Intro Text 1=introText1;Intro Text 2=introText2",
 
 
 
  spellchecker_languages: "+English=en,French=fr",
  theme_advanced_toolbar_location: "top",
  theme_advanced_toolbar_align: "left",
  content_css : "css/richeditorstyles.css",
  extended_valid_elements : "div[*],-p[id|style|dir|class],img[usemap|class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],map[id|name],area[shape|alt|coords|href|target]",
 
		external_link_list_url : "example_data/example_link_list.js",
		external_image_list_url : "example_data/example_image_list.js",
		flash_external_list_url : "example_data/example_flash_list.js",
		file_browser_callback : "mcFileManager.filebrowserCallBack",
		paste_create_paragraphs : false,
	  paste_create_linebreaks : false,
	  paste_use_dialog : false,
	  paste_auto_cleanup_on_paste : true,
	  paste_convert_middot_lists : false,
	  paste_unindented_list_class : "unindentedList",
	  paste_convert_headers_to_strong : true,
	  paste_insert_word_content_callback : "convertWord",
		theme_advanced_resize_horizontal : false,
		theme_advanced_resizing : true,
		apply_source_formatting : true,
		width : "100%",
		height : "380",
		file_browser_callback : "FileBrowser", // This is required
		setup : function(ed) {
        // Add a custom button
        // Add a custom button
        ed.addButton('insertbox', {
            title : 'Insert Box',
            image : 'tinymce3/themes/advanced/img/insertdiv.gif',
            onclick : function() {
                ed.selection.setContent('<div class=\"initial_div\"></div>');
 
            }
        });
    }
 
		
	});
	
	       
 
function convertWord(type, content) {
	switch (type) {
		case "before":
   var r1 = "<";
   var r2 = ">";
content = content.replace(/<font\b([^>]+)style=['"]([^>]+)bold([^>]*)['"]([^>]*)>([^>]+)<\/font>/gim, r1 + 'strong' + r2 + '$5' + r1 + '/strong' + r2);
content = content.replace(/<span\b([^>]+)style=['"]([^>]+)bold([^>]*)['"]([^>]*)>([^>]+)<\/span>/gim, r1 + 'strong' + r2 + '$5' + r1 + '/strong' + r2);
content = content.replace(/<strong\b([^>]*)>/ig, r1 + 'strong' + r2);
content = content.replace(/<\/strong\b([^>]*)>/ig, r1 + '/strong' + r2);
content = content.replace(/<b\b([^>]*)>/ig, r1 + 'strong' + r2);
content = content.replace(/<\/b\b([^>]*)>/ig, r1 + '/strong' + r2);
content = content.replace(/<font\b([^>]+)style=['"]([^>]+)italic([^>]*)['"]([^>]*)>([^>]+)<\/font>/gim, r1 + 'em' + r2 + '$5' + r1 + '/em' + r2);
content = content.replace(/<span\b([^>]+)style=['"]([^>]+)italic([^>]*)['"]([^>]*)>([^>]+)<\/span>/gim, r1 + 'em' + r2 + '$5' + r1 + '/em' + r2);
content = content.replace(/<em\b([^>]*)>/ig, r1 + 'em' + r2);
content = content.replace(/<\/em\b([^>]*)>/ig, r1 + '/em' + r2);
content = content.replace(/<i\b([^>]*)>/ig, r1 + 'em' + r2);
content = content.replace(/<\/i\b([^>]*)>/ig, r1 + '/em' + r2);
content = content.replace(/<a\b([^>]+)href=['"]([^>]+)['"]([^>]*)>/ig, r1 + 'a href="$2"' + r2);
content = content.replace(/<\/a\b([^>]*)>/ig, r1 + "/a" + r2);
content = content.replace(/<h2\b([^>]*)>/ig, r1 + 'h2' + r2);
content = content.replace(/<\/h2\b([^>]*)>/ig, r1 + '/h2' + r2);
content = content.replace(/<h3\b([^>]*)>/ig, r1 + 'h3' + r2);
content = content.replace(/<\/h3\b([^>]*)>/ig, r1 + '/h3' + r2);
content = content.replace(/<p\b([^>]*)>/ig, r1 + 'p' + r2);
content = content.replace(/<\/p\b([^>]*)>/ig, r1 + '/p' + r2);
content = content.replace(/<br\b([^>]*)>/ig, r1 + '/br' + r2);
content = content.replace(/<ul\b([^>]*)>/ig, r1 + 'ul' + r2);
content = content.replace(/<\/ul\b([^>]*)>/ig, r1 + '/ul' + r2);
content = content.replace(/<ol\b([^>]*)>/ig, r1 + 'ol' + r2);
content = content.replace(/<\/ol\b([^>]*)>/ig, r1 + '/ol' + r2);
content = content.replace(/<li\b([^>]*)>/ig, r1 + 'li' + r2);
content = content.replace(/<\/li\b([^>]*)>/ig, r1 + '/li' + r2);
content = content.replace(/<table\b([^>]*)>/ig, r1 + 'table' + r2);
content = content.replace(/<\/table\b([^>]*)>/ig, r1 + '/table' + r2);
content = content.replace(/<tr\b([^>]*)>/ig, r1 + 'tr' + r2);
content = content.replace(/<\/tr\b([^>]*)>/ig, r1 + '/tr' + r2);
content = content.replace(/<th\b([^>]*)>/ig, r1 + 'th' + r2);
content = content.replace(/<\/th\b([^>]*)>/ig, r1 + '/th' + r2);
content = content.replace(/<td\b([^>]*)>/ig, r1 + 'td' + r2);
content = content.replace(/<\/td\b([^>]*)>/ig, r1 + '/td' + r2);
 
			break;
 
		case "after":
			content = content.replace(/(\r\n|\n)/g, "");
			break;	
		case "keyup":
    case "keydown":
    if (tinyMCE.isMSIE && e.ctrlKey)
        window.setTimeout('tinyMCE.triggerNodeChange(false);', 1);
    if (e.ctrlKey && e.keyCode == 86 && e.type != "keyup") {
        tinyMCE.execInstanceCommand(e.target.editorId, "mcePasteText", true);
        tinyMCE.cancelEvent(e);
        return false;
    }
break;			
	}
	return content;
}
 
function FileBrowser(field_name, url, type, win) {              
        mceWin = win;         
        if (type == 'image') {
        page = '$path_info_dir$/filebrowser.html?type=' + type;
        var mcePopup = window.open(page, '', 'width=600, height=450, scrollbars=yes, resizable=yes, inline=yes');
    }
    else if (type == 'file') {
        // mceBrowseLinks('$path_info_dir$/testupload/', field_name, 'mcePopup')
        page = '$path_info_dir$/images/linkbrowser';
        var mcePopup = window.open(page, '', 'width=600, height=450, scrollbars=yes, resizable=yes, inline=yes');
    }
}
function mceInsertImage(url, field) 
{    
    window.opener.mceWin.document.getElementById(field).value = url;
    window.opener.mceWin.showPreviewImage(url);
    window.opener.mceWin.focus();
    window.close()
    
}
 
function mceInsertLink(url, field) 
{
    var target_field = window.opener.mceWin.document.getElementById(field);
    target_field.value = url; 
 
    window.opener.mceWin.focus();
    window.close()   
}
 
</script>
 
 
    <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
    <script type="text/javascript" src="js/jquery.form.min.js"></script>
    <script type='text/javascript' src="js/facebox.min.js"></script>
    <script type='text/javascript' src="js/jquery.livequery.min.js"></script>
    <link href="js/facebox.css" media="screen" rel="stylesheet" type="text/css" />
  <script type="text/javascript">
    jQuery(document).ready(function($) {
      $('a[rel*=facebox]').livequery(function(){  
    $(this).facebox({
        loading_image : 'loading.gif',
        close_image   : 'closelabel.gif'
      }) 
    })
   })
  </script>
 
 
<script type="text/javascript">
$().ready(function() {
  $('#form_publish').bind('form-pre-serialize', function(e) {
    tinyMCE.triggerSave();
   });   
  $('#form_publish').ajaxForm({
   target: '#article_draft_list',
   success: function(){
      $('#article_draft_list').fadeIn('slow');
   }
   });
 return false;
  });
 
</script>
 
 
 
</head>
<body topmargin="0" leftmargin="0">
 
 
 
 
<div id="article_editing">
  <div id="rich_text_editor">
  <form id="form_publish" action="ajaxsavedraft.html">
   <input type="hidden" value="$articleid$" name="articleid"><input type="hidden" value="yes" name="save">
     
     <textarea name="articlebody" id="articlebody" rows="1" cols="20">$articlebody$</textarea>
     <input type="submit" id="save_draft" value="Save as draft">
  </form>
  </div>
  <div id="article_sidebar">
 
     <h3 class="sidebar_title">Drafts <span>(Intials Y-M-D)</span></h3>
     <div id="article_draft_list">
 
     </div>
     
    
  
  </div>
</div>
 
 
</body>
 
</html>

Open in new window

0
Comment
Question by:Dave6969
  • 3
4 Comments
 
LVL 3

Expert Comment

by:TigerStyle
ID: 23213004
Can you provide the dependencies (or links to them) ? (the jquery plugins and the example data)
0
 

Author Comment

by:Dave6969
ID: 23251737
Sorry it's taken me sooo long to respond. I had by broadband cut due to an administrative error at my ISP.

I'm afraid I can't give you links to the actual pages as it's on a corporate intranet, but I'm pretty much just using the Jquery form plugin (from http://malsup.com/jquery/form/).

LiveQuery is in there because I've been trying to get Facebox working with our internal proxy servers but it seems I'm fighting a losing battle there so I'm going to have to revert to Thickbox and experiment with the stylesheets to make the popups look more facebook-y. So you can ignore the other plugins.

Like I say this works completely fine in Firefox (I should even be able to make a scripted, timed autosave) but IE6 refuses to play ball :-(
0
 

Author Comment

by:Dave6969
ID: 23440030
I'm still having troubles with this....

I'm guessing that because I didn't respond for so long dues to other problems, interest has been lost.

Do I need to ask a new question?
0
 

Accepted Solution

by:
Dave6969 earned 0 total points
ID: 23641806
I've solved it!

I wasn't putting the method into the form. Firefox doesn't mind this, but IE can't cope and won't submit it.
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

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

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
The viewer will learn how to dynamically set the form action using jQuery.
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
Course of the Month21 days, 1 hour left to enroll

810 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