I use:
document.getElementById("result").innerHTML = xhttp.responseText;
To place the result from PHP (responseText) in result div of HTML file.
How to split the result coming from PHP to two parts and put the first part in result div then replace the result div with second part?
I try:
var url = "file.php";
var params = "x1="+x1+"&x2="+x2;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function()
{
if (xhttp.readyState == 4 && xhttp.status == 200)
{
var r= xhttp.responseText.split("|");
document.getElementById("result").innerHTML = r[0];
document.getElementById("result").innerHTML = r[1];
}
}
xhttp.open("POST", url, true);
xhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhttp.send(params);
In php file, I put | after the end of the printed text "part 1" but, the result was:
This is your first part result |
"|" is printed! and the div does not replaced with the second part!
It is working now. I solve the problem by print "|" in a separetwe echo statement.
echo "first statement";
echo"|";
echo"second statement";
Thanks all;
Related
I am finding a way to load multiple files at a time in my html document using vanilla AJAX ( I don't want any dependecy, the way I will get using jQuery ). Here is a piece of code I grabbed from W3schools' AJAX Documentation. :
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.querySelector("#tst").innerHTML = this.responseText;
}
}
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
I am pretty new to AJAX. So, I have a confusion. The above function works fine, but I have multiple files to load and I don't want to call this function multiple times, to load the files. Let me describe my desired output. I am imagining the syntax of the updated function will be :
loadDoc(["one.txt", "two.txt", "three.txt"])
So, we observe that the input will be an array. And now the ouput will follow this format :
content of "one.txt" + break + content of "two.txt" + break + content of "three.txt" and so on....
If the content of "one.txt" is "Hello World !", content of "two.txt" is "I love", and content of "three.txt" is "Javascript", the output will be :
Hello World !
I love
Javascript
So, can you please help me update my code ?
Pass the list of files to load to a PHP/ASP/whatever page which assembles the text for you.
function loadDoc(files) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.querySelector("#tst").innerHTML = this.responseText;
}
}
xhttp.open("GET", "ajax_info.php?files="+files, true);
xhttp.send();
}
The files parameter could be a comma delimited list, which the page uses to get the contents and assemble it into a single return string.
this is my javascript of first page
<script>
function MessageDetailsById(id)
{
$("#active"+id).css({"color":"red"});
var http = new XMLHttpRequest();
var url = "Ajax.php";
var adm = "<?php echo $admno; ?>";
var params = "Id="+id;"adm="+adm;
http.open("POST", url, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.onreadystatechange = function() {
if(http.readyState == 4 && http.status == 200) {
//alert(http.responseText);
}
}
http.send(params);
window.location.href="#";
}
</script>
this is the coding of ajax.php
<?php
include("model.php");
$DB=new database;
if(isset($_POST["Id"]))
{
$DB->updateMassageTitleStauts($_POST["Id"],$_POST["adm"]);
}
else
{
header("Location:index.php?ajaxmas=wHgfghks^^%&fnjfskjdfb");
}
?>
i want to send one variable of php and another is id of a div... how to send two parameters and recieves them on other side ??? please correct this code in details i am not expert ???
For the post data encoding:
var params = "Id=" + id + "&adm=" + adm;
Use & for separator.
I have webpage on which i run a php file by javascript as given below
<script type="text/javascript">
var bhs = document.createElement('script');
var bhs_id = "yvw3lwc1tnvqfh4k4k4hisossew";
bhs.src = "//example.com/insert.php?site=" + bhs_id + "";
document.head.appendChild(bhs);
document.write("<span id='calc'></span>");
</script>
This JavaScript successfully insert data into insert.php file and then send to database. Besides i want to show one variable value generated in insert.php file in span id calc on a webpage where from above JavaScript is executed. How to do this? Thanks in advance.
It´s better use AJAX:
function loadDoc() {
var xhttp = new XMLHttpRequest();
var bhs_id = "yvw3lwc1tnvqfh4k4k4hisossew";
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
alert('OK!');
}
};
xhttp.open("GET", "//example.com/insert.php?site=" + bhs_id, true);
xhttp.send();
}
Reference:
http://www.w3schools.com/xml/ajax_intro.asp
i have this code of HTML
<textarea cols="120" rows="4" name="editor" id="editor" onkeyup="sendData()"></textarea>
<span id="container" name="container"></span>
and this one in JS
function sendData(){
var hc = document.getElementById('editor').value;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("container").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "w.php?h=" + hc, true);
xmlhttp.send();
}
also this one in w.php
<?php
$h = $_REQUEST['h'];
echo $h;
?>
when i use this code it's work very fine but there is a problem with tow letters first one "#" and second one "&" so how can i fix this problem :)
thank you
You have to encode your data for a URI. Simply use
encodeURIComponent(/* The data to encode here. */)
before creating your request URL.
So, I'm pulling a query from a php file using javascript, then publishing it to another javascript that will then put another php query in another text area.
In other words:
[input text area 1] -> [javascript live search] -> [Query results]
[Query results] -> [onClick event] -> [Load results in text area 2]
The idea is that live searches in one textarea will come out with its approximate match in another live.
However, when I try to load the data in the second textarea it comes out as raw data. I'm confused on how to view it properly.
HTML:
The first text area is the input with a function to call a script, which is here:
function showResult(str) {
if (str.length == 0) {
document.getElementById("livesearch").innerHTML = "";
document.getElementById("livesearch").style.border = "0px";
return;
}
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("livesearch").innerHTML = xmlhttp.responseText;
document.getElementById("livesearch").style.border = "1px solid #000";
}
}
xmlhttp.open("GET", "ajax-search.php?keyword=" + str, true);
xmlhttp.send();
}
The php returns the result:
echo '<li onclick="grabID('.$row['dir_id'].')" >'.$row['eng_dir'].'</li><br />';
Which then initiates a clicked event:
function grabID(num){
xmlhttp.open("GET","ajax-result.php?result="+num,true);
xmlhttp.send();
document.getElementById("output").innerHTML="Something here?!?!?!";
}
Once again the results from the other php are returned correctly. The problem is that because it's a loop, it returns a lot of results instead of just 1. I just want the 1 result that matches the ID of the previous search.