I was try to attach the ckeditor to a textarea in php page, which is being called by ajax in a html page, but ckeditor is not appearing in textarea. Can any one have any idea, Why it is not happening, it just making me freak.
TRY1.HTML
<script type="text/javascript">
function load()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("div_content").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","try2.php?",true);
xmlhttp.send();
}
</script>
<!--end tinymcs-->
</head>
<body>
<input type="button" onclick="load()">
<div id="div_content">
</div>
</body>
</html>
TRY2.PHP
<textarea id="txt1"> </textarea>
That is because the textarea in which you are binding the editor was not present on the initial load of the page so its not getting binded.
You should bind that on the success call back of ajax call.
On Success you should do bind the textarea with ckeditor and it will work.
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("div_content").innerHTML=xmlhttp.responseText;
document.getElementById("txt1").ckEditor();
//or whatever the exact code you do for ckEditor
}
Related
I have tried numerous codes and all without avail. If the user was to click (button)New Starter (/button) I would like it to echo the file new.php within the same page and if the user was then to select resignation it should then replace new.php with resign.php
<"new.php"><button>New Starter</button></a>
<"resign.php"><button>Resignation</button></a>
<"promo.php"><button>Promotion</button></a>
So the idea is that it displays relevant information upon the button click on the same page
This php displays a text only file and echos no problem but incorporating it into onclick or within the button is causing the page to go blank or show the related file upon each other
<?php echo file_get_contents('new.php'); ?>
<button on click echo $abc="new.php";}>New Starter</button>
<?php {echo $abc; } ?>
Any help or advice would be greatly apreciated
<head><script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","new.php",true);
xmlhttp.send();
}
</script>
</head>
Then in the body
<div id="myDiv"><h2>Test</h2></div>
<button type="button" onclick="loadXMLDoc()">Test</button>
I have an AJAX script that used to replace an entire div with new html including the <input> markup:
<script>
function show_locations(str) {
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
var a = xmlhttp.responseText;
a = JSON.parse(a);
document.getElementById('locations_dropdown').innerHTML=a.location;
document.getElementById('dm').innerHTML=a.dm;
document.getElementById('dm_email').innerHTML=a.dm_email;
}
}
xmlhttp.open('GET','includes/get_locations.php?d='+str,true);
xmlhttp.send();
}
</script>
The document.getElementById('dm_email').innerHTML=a.dm_email;').innerHTML=a.dm_email; would replace the <div id=dm_email></div> contents with a new <input> markup which would include the new email value in value="" here:
<div id="dm_email">
<input type="email" value="">
</div>
But, now I know that sending html markup through json is a bad practice, so how can I change my AJAX script above to replace just the value of the input?
I tried this:
document.getElementById('dm_email').value=a.dm_email;
But it doesn't work. Any ideas?
I have a problem with my AJAX function which is not being triggered. It seems like I'm doing everything fine but for some reason it's not triggered when the select box is changed:
Here is my Ajax function:
<script type="text/javascript">
function showSections(id){
if (id=="")
{
document.getElementById("MyDiv").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
var xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("MyDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET", "getRets.php?sem=" + id, true);
xmlhttp.send();
}
</script>
here is the select box:
<select name='sub' id="sub" onchange="showSections(this.value)">
<option value="1">Pending</option>
<option value="0">Performed</option>
</select>
<div id="MyDiv">
some data
</div>
This is the gerRets.php file:
<?php
$numbVal = $_GET['sem'];
echo $numbVal;
?>
Can anybody point out to me my mistake? Apparently I just don't see it.
I'm new at Ajax and this code should change the div dynamically in real time when the user type something in the input field but nothing happens.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<!--api to use ajax-->
<script type="text/javascript" src="sarissa/gr/abiss/js/sarissa/sarissa.js"> </script>
<title>Ajax Test</title>
<script>
function loadXMLDoc() {
var xmlhttp;
//parameter
var suggest = document.getElementById("searchbox").value;
//using XMLHttpRequest
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//when xmlhttp be ready...
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//the HTML will be modify
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
//the file that will receive and retrieve info
xmlhttp.open("POST","enviar.php",true);
//header to the retrieved information
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//the param will be send
var sendParam = "fname="+suggest;
xmlhttp.send(sendParam);
}
</script>
</head>
<body>
Busca: <input type="text" id="searchbox" />
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onkeypress="loadXMLDoc()">Change Content</button>
</body>
</html>
Change the onkeypress event to onclick.
If you would like the content to change as the user types, add an onkeyup event to the text input element.
First you should put your javascript codes before, your HTML inputs, because, the DOM needs to load the entire document, before it can manupilate it. otherwise, you should put your functions inside the body tag, with onload attribute.
second, use the onclick event instead of onkeypress, I modified your script, and tested it. It works now
<html>
<head></head>
<body>
Busca: <input type="text" id="searchbox" />
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
<script type='text/javascript'>
function loadXMLDoc() {
var xmlhttp;
//using XMLHttpRequest
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else
{// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//when xmlhttp be ready...
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//the HTML will be modify
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
//parameter
var suggest = document.getElementById("searchbox").value;
var sendParam = "fname="+suggest;
//the file that will receive and retrieve info
xmlhttp.open("POST","enviar.php",true);
//header to the retrieved information
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//the param will be send
xmlhttp.send(sendParam);
console.log(xmlhttp);
}
</script>
<body/>
I want to post the field values entered in this code to the page ajaxpost.php using Ajax and then do some operations there. What would be code required to be written in ajaxpost.php. Also woithout using any js file/jquery
Here is the code of page in which fields are entered, I would like to know what would be the code to be written in ajaxpost.php
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
var zz=document.f1.dd.value; //alert(zz);
var qq= document.f1.cc.value;
xmlhttp.open("POST","ajaxpost.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("dd=zz&cc=qq");
}
</script>
</head>
<body>
<h2>AJAX</h2>
<form name="f1">
<input type="text" name="dd">
<input type="text" name="cc">
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>
</form>
</body>
</html>
I think you are looking for bare bones php and ajax for which there are tons of tutorials such as this one, which is quite close to what you are looking for.