the concept does not work here with this code<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><?php /*** Simple Example** This file demonstrates how to turn a simple Text Area into an AreaEdit component* and how to do a javascript submit.** This file was originally written by James Sleeman of Gogo Code and comes from the* Xinha project.*/?> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Simple Example of AreaEdit</title> <link rel="stylesheet" href="examples.css" /> <script type="text/javascript">function getXMLHTTP() { //fuction to return the xml http object var xmlhttp=false; try{ xmlhttp=new XMLHttpRequest(); } catch(e) { try{ xmlhttp= new ActiveXObject("Microsoft.XMLHTTP"); } catch(e){ try{ xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e1){ xmlhttp=false; } } } return xmlhttp; } function getState(typeId) { var strURL="findtype1.php?type="+typeId; var req = getXMLHTTP(); if (req) { req.onreadystatechange = function() { if (req.readyState == 4) { // only if "OK" if (req.status == 200) { document.getElementById('TextArea1').value=req.responseText; } else { alert("There was a problem while using XMLHTTP:\n" + req.statusText); } } } req.open("GET", strURL, true); req.send(null); } }</script> <script type="text/javascript"> var _editor_url; var _editor_lang; // You must set _editor_url to the URL (including trailing slash) where // where AreaEdit is installed, it's highly recommended to use an absolute URL // eg: _editor_url = "/path/to/areaedit/"; // You may try a relative URL if you wish] // eg: _editor_url = "../"; // for this example we're using a little regular expression to find the absolute path. // so that this demo will work "out of the box". // // However, this means if you change the name of this page or the use this code in // your own page you will need to set _editor_url below. // // Please note that the value of _editor_url must contain a trailing slash. _editor_url = document.location.href.replace(/examples\/simple_example\.php.*/, '') _editor_lang = "en"; // And the language we need to use in the editor. </script> <!-- load in debug trace message class --> <script type="text/javascript" src="../ddt/ddt.js"></script> <script type="text/javascript"> // create a global debug object to track everything that happens // during startup. var startupDDT = new DDT( "startup" ); // uncomment the following if you would like to trace out the // startup functions. This only works in the debugging version // of AreaEdit, not the runtime. // // startupDDT._ddtOn(); </script> <!-- Load up the actual editor core --> <script type="text/javascript" src="../htmlarea.js"></script> <script type="text/javascript"> var areaedit_editors = null; var areaedit_init = null; var areaedit_config = null; var areaedit_plugins = null; startupDDT._ddt( "simple_example.html", "71", "Setting up areaedit_init()" ); // -------------------------------------------------------------------------------- /** * sample initialization function * * this is called from the body onload handler below. It sets up the configurations * and builds the editor. */ areaedit_init = function() { // This is a workaround for a bug in MSIE that sometimes produces // "Operation Aborted" errors. The error comes from the fact that // MSIE will /sometimes/ call the onload handler before the DOM // heirarchy is completely built. // // So we do not run this function until the page has completely // loaded if we are MSIE. if ( HTMLArea.is_ie && document.readyState != "complete" ) { setTimeout( function() { areaedit_init()}, 50 ); return false; } startupDDT._ddt( "simple_example.html", "76", "areaedit_init called from window.onload handler for simple_example.php" ); // Initialize the HTMLArea class. (Used to be at the bottom of htmlarea.js) HTMLArea.init(); /** STEP 1 *************************************************************** * First, what are the plugins you will be using in the editors on this * page. List all the plugins you will need, even if not all the editors * will use all the plugins. ************************************************************************/ // a minmal list of plugins. var areaedit_plugins_minimal = [ 'ContextMenu', 'Linker', 'ImageManager' ]; // This loads the plugins. We're using a very minimal list // here. // // loadPlugins causes the plugin .js files (in this case content-menu.js, // linker.js and image-manager.js) in the "background". The second parameter // here is a callback that gets invoked while we're waiting for things to load, // which in this case just causes us to loop back to here. Once everything // is loaded loadPlugins() returns true and we can continue on. startupDDT._ddt( "simple_example.html", "92", "calling HTMLArea.loadplugins()" ); if ( !HTMLArea.loadPlugins( areaedit_plugins_minimal, areaedit_init)) { return; } /** STEP 2 *************************************************************** * Now, what are the names of the textareas you will be turning into * editors? For this example we're only loading 1 editor. ************************************************************************/ areaedit_editors = [ 'TextArea1' ]; /** STEP 3 *************************************************************** * We create a default configuration to be used by all the editors. * If you wish to configure some of the editors differently this will be * done in step 4. * * If you want to modify the default config you might do something like this. * * areaedit_config = new HTMLArea.Config(); * areaedit_config.width = 640; * areaedit_config.height = 420; * *************************************************************************/ startupDDT._ddt( "simple_example.html", "119", "calling HTMLArea.Config()" ); areaedit_config = new HTMLArea.Config(); /** STEP 3 *************************************************************** * We first create editors for the textareas. * * You can do this in two ways, either * * areaedit_editors = HTMLArea.makeEditors(areaedit_editors, areaedit_config, areaedit_plugins); * * if you want all the editor objects to use the same set of plugins, OR; * * areaedit_editors = HTMLArea.makeEditors(areaedit_editors, areaedit_config); * areaedit_editors['myTextArea'].registerPlugins(['Stylist','FullScreen']); * areaedit_editors['anotherOne'].registerPlugins(['CSS','SuperClean']); * * if you want to use a different set of plugins for one or more of the * editors. ************************************************************************/ startupDDT._ddt( "simple_example.html", "140", "calling HTMLArea.makeEditors()" ); areaedit_editors = HTMLArea.makeEditors(areaedit_editors, areaedit_config, areaedit_plugins_minimal); /** STEP 4 *************************************************************** * If you want to change the configuration variables of any of the * editors, this is the place to do that, for example you might want to * change the width and height of one of the editors, like this... * * areaedit_editors.myTextArea.config.width = 640; * areaedit_editors.myTextArea.config.height = 480; * ************************************************************************/ areaedit_editors.TextArea1.config.width = 700; areaedit_editors.TextArea1.config.height = 350; /** STEP 5 *************************************************************** * Finally we "start" the editors, this turns the textareas into * AreaEdit editors. ************************************************************************/ startupDDT._ddt( "simple_example.html", "160", "calling HTMLArea.startEditors()" ); HTMLArea.startEditors(areaedit_editors); } // end of areaedit_init() /** * javascript submit handler. * * this shows how to create a javascript submit * button that works with the htmleditor. */ var submitHandler = function(formname) { var form = document.getElementById(formname); // in order for the submit to work both of these methods have to be // called. form.onsubmit(); form.submit(); } </script></head><body onLoad="areaedit_init()"> <h1>AreaEdit Simple Example</h1> <p>This file demonstrates a simple integration of the AreaEdit editor with a minimal set of plugins. Enter some content, press submit and the content will be displayed above.</p> <br> <a href="../index.html">Back to Index</a> <br> <hr> <br> <form id="editors_here" action="simple_example_landing.php" method="post"> <textarea id="TextArea1" name="TextArea1" rows="10" cols="80" style="width:100%"> </textarea> <br> <?php $link = mysql_connect('localhost', 'root', ''); //changet the configuration in requiredif (!$link) { die('Could not connect: ' . mysql_error());}mysql_select_db('sank'); $query="SELECT * FROM editor";$result=mysql_query($query);while($row=mysql_fetch_array($result)){$ing=$row['content'];} // the submitHandler() function is defined in the top section and shows how to // submit a form with an AreaEdit component in it from javascript. ?> <input type="button" value="submit" onClick="javascript:submitHandler('editors_here');"> Type: <select name="type" onChange="getState(this.value)"> <option value="">Select type</option> <option value="1">Local Clinic</option> <option value="2">Company</option> </select> </form> <div id="statediv"></div><br><br><br></body></html>

I call "ajaxCall(callingObject, url)" with callingObject being the element I wish to populate with the resulting markup and url being the url for the ajax call to be made to.

when a result is received from the server the event handler "processStateChange()" is automatically called.

note that I check 2 things ...

1. the "readyState" of the request.
2. the "status" of the request.

both values have to be correct before the call does anything.
What you will tend to find is that the state will change a few times so this "processStateChange()" handler will get called a few times but I only action when the call is complete and the response is an acceptable 200 (try downloading fiddler as it will help you see this in more detail).

generally if you can browse to the url you pass in the ajaxcall function then this block of code will work.
I have these functions in a common scripts js file that I pull in to every project, saves writing something new every time.

The way ajax works is that the user does something on the page (eg click on something) then you make a function call that posts a request to the server without postback the entire page ( .NET cals this a "postback").

AJAX calls are known as "Callbacks" because they make a call to something specific without posting everything back.

its in this place <body onLoad="areaedit_init()"> this is the code which loads the editor......

if i remove this on load then my editor tools goes off and only the text area is displayed....and am gettin values inside the text area.once i paste back the code i get the editor tools back but could not insert values to text area

I'm not exactly a javascript genius myself but reading through your script then reading mine I think yours has some logical errors in it (although I could be wrong).

Being a C# developer I'm not used to embedding function declarations inside function declarations like yours does so I can't quite guarantee I got a full understanding on the flow of your version.

The actual call is made here on your script ...

req.open("GET", strURL, true);
req.send(null);

... those 2 lines are right at the very end of the script ... surely you make the request earlier on then deal with the response, which is more inline with how my script works.

Also ...

strURL >> ??? i'm not entirely sure if you can use relative links (although you probably can) so I usually make absolute link based calls in my ajax calls.

In theory if you were to edit the function "areaedit_init()" adding in a call to your function "getState(typeId)" this should yield the same result assuming you have an element with the id "TextArea1" on your page.

If not then it might be here ...

document.getElementById('TextArea1').value=req.responseText;

try this instead ...

document.getElementById('TextArea1').innerHTML = req.responseText;

....

It looks as though your script is pretty much the same as mine everywhere else.
try opening up the ajax called url in your browser findtype1.php?type="+typeId ... what do you get ?

Featured Post

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?

Nothing in an HTTP request can be trusted, including HTTP headers and form data. A form token is a tool that can be used to guard against request forgeries (CSRF). This article shows an improved approach to form tokens, making it more difficult to…

Many old projects have bad code, but the budget doesn't exist to rewrite the codebase. You can update this code to be safer by introducing contemporary input validation, sanitation, and safer database queries.

The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

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)