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/>
Related
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?
Im new to this ajax and javascript thing. What I want is first to popup a confirm box, if true then perform xmlhttprequest. Afterwards I want to redirect the user to a new page. Here is what I've got.
<script type="text/javascript">
function showUser(str)
{
var r=confirm("Delete this customer?");
if (r==true) {
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
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("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","sletkunde.php?q="+str,true);
xmlhttp.send();
}
}
</script>
<form onclick="showUser(id.value); return false;" >
<input type="hidden" value="<?echo $id;?>" name="id">
<input type="button" value="tryk" name="knap">
</form>
<br>
<div id="txtHint"><b>something here</b></div>
And here is the sletkunde.php
<?
$q=$_GET["q"];
$slet = mysql_query("DELETE FROM Kunder WHERE KundeID = '".$q."'");
echo "hey"; // Just to see if it works
?>
The confirm box works, the mysql_query works, the echo "hey"; works. But how can I get it to redirect to kunder.php right after all of this (automatically).
Use location.href = "http://www.mysite.com/kunder.php" in your onreadystatechange function.
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
}
<html>
<head>
<script>
function sentAjax()
{
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()
{
//alert(xmlhttp.readyState);
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementsByName('content') = xmlhttp.responseText;
}
}
xmlhttp.open("GET","resultPage.php",true);
xmlhttp.send();
}
</script>
<script name="content">
//should be assigned here
</script>
</head>
<body>
</body>
</html>
Below is the result from "resultPage.php"
<script type="text/javascript">
objTreeMenu_1.drawMenu();
objTreeMenu_1.writeOutput();
objTreeMenu_1.resetBranches();
</script>
I would like to assign the above script to the inside <script name="content"></script>. However, I have tired the document.getElementsByName('content') = xmlhttp.responseText; which is wrong.
Is there anyone can help me? Many thanks!
document.getElementsByName('content') only returns the elements.
you should use
document.getElementsByName('content')[0].innerHTML = xmlhttp.responseText
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.