On button click I submit the form and post some data to data.php.
Form to be submitted is:
<form action="data.php" method="POST" onsubmit="showUser(this, event)">
index.php
function showUser(form, e) {
//alert(myid);
e.preventDefault();
e.returnValue=false;
var xmlhttp;
//Get value for sent, text1, text2, text3
console.log(sent);
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function(e) {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
xmlhttp.responseText.resultOne; // Is this correct? Should be here? I dont know correct
xmlhttp.responseText.resultTwo;
document.getElementById("myFirstDiv").innerHTML=xmlhttp.responseText.resultOne;
document.getElementById("mySecondDiv").innerHTML=xmlhttp.responseText.resultTwo;
}
}
xmlhttp.open(form.method, form.action, true);
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
deURIComponent(text3);
xmlhttp.send('sent=' + sent + '&text1=' + text1 + '&text2=' + text2 + '&text3=' + text3);
}
data.php
<?php
ob_start();
echo "1:blah\n";
echo "</br>";
echo "shonice";
echo "1:blahDFDFD\n";
$div1 = ob_get_clean();
ob_start();
echo "2:blah";
echo "</br>";
echo "2:DFDFDFblah\n";
$div2 = ob_get_clean();
$resultArray = array("resultOne" => $div1,"resultTwo" => $div2);
echo json_encode($resultArray);
?>
How can I fetch json value from `data.php` into `myFirstdiv` aand `mysecondDiv`?
What's wrong with code I have created.
It show undefined value in div as a result.
lets assume that there is a result from the data.php file and it is json encoded..
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
var div1=document.getElementById("myFirstDiv");
var div2=document.getElementById("mySecondDiv");
var data=JSON.parse(xmlhttp.responseText);
//alert data to see what u get..
div1.innerHTML=data['resultOne'];
div2.innerHTML=data['resultTwo'];
}
hoping this helps..
Related
On button click I submit the form and post some data to data.php.
The result Of data.php I show in some div on index.php
index.php:
function showUser(form, e) {
//alert(myid);
e.preventDefault();
e.returnValue=false;
var xmlhttp;
var sent = form.elements['sent'].value;
var text1 = document.getElementById('previewUrl').innerText || document.getElementById('previewUrl').textContent;
var text2 = document.getElementById('previewTitle').innerText || document.getElementById('previewTitle').textContent;
var text3 = document.getElementById('previewDescription').innerText || document.getElementById('previewDescription').textContent;
//alert(text3);
console.log(sent);
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function(e) {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
xmlhttp.responseText.resultOne;
xmlhttp.responseText.resultTwo;
document.getElementById("myFirstDiv").innerHTML=xmlhttp.responseText.resultOne;
document.getElementById("mySecondDiv").innerHTML=xmlhttp.responseText.resultTwo;
}
}
xmlhttp.open(form.method, form.action, true);
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
deURIComponent(text3);
xmlhttp.send('sent=' + sent + '&text1=' + text1 + '&text2=' + text2 + '&text3=' + text3);
}
Data.php looks like this:
<?php
//sent has value "http://www.paulgraham.com/herd.html"
$url=$_POST['sent'];
$text1=$_POST['text1'];
$text2=$_POST['text2'];
$text3=$_POST['text3'];
//Some processing
echo $restult1; // I want to show this on <div1> on main page index.php
//Some processsing
echo $result2; // I want to show this on <div2> on main page index.php
?>
HOW can I show result1 and result2 on different div on index.php?
<?php
//sent has value "http://www.paulgraham.com/herd.html"
$url=$_POST['sent'];
$text1=$_POST['text1'];
$text2=$_POST['text2'];
$text3=$_POST['text3'];
//Some processing
$resultArray = array("resultOne" => $result1,"resultTwo" => $result2);
echo json_encode($resultArray);
?>
So you will get a response object from php page.
And now you can access it values like bellow in Js
In Javascript
xmlhttp.responseText.resultOne;
xmlhttp.responseText.resultTwo;
Now you can set for two divs
document.getElementById("myFirstDiv").innerHTML=xmlhttp.responseText.resultOne;
document.getElementById("mySecondDiv").innerHTML=xmlhttp.responseText.resultTwo;
Maybe you could echo a script where you assign the value of result1 to div1 and result2 to div2.
For example if you use jquery you could do something like this:
echo "<script> $("#div1").innerHTML(".$result1");</script>"
by using javascript ajax i have passed the values to php page...
display the values after retrieving from database and print in ajax page...it displaying in alert page...but i need to display in ajax page....
ajax coding
<script>
function optionsAlert()
{
alert("call");
var xmlhttp;
var qw=document.getElementById('c').value;
var qw1=document.getElementById('c1').value;
var qw2=document.getElementById('unit33').value;
var qw3=document.getElementById('dept').value;
var qw4=document.getElementById('class').value;
alert(qw);
alert(qw1);
alert(qw2);
alert(qw3);
alert(qw4);
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)
{
alert(xmlhttp.responseText);
if(xmlhttp.responseText==1){
alert("name already Exists" );
return false;
}
else if(xmlhttp.responseText==0)
{
alert("name available");
document.login.submit();
}
}
}
var queryString = "?q=" + qw + "&q1=" + qw1 + "&q2=" + qw2 + "&q3=" + qw3 + "&q4=" + qw4;
xmlhttp.open("get",'ques.php' + queryString,true);
xmlhttp.send();
}
php page
<?php
include('connection.php');
if(($_GET['q']!='') && ($_GET['q1']!='') && ($_GET['q2']!='') && ($_GET['q3']!='') && ($_GET['q4']!=''))
{
$a= mysql_query("select * from unit1 where unit='".$_GET['q']."' and stopic='".$_GET['q1']."' and qtype='".$_GET['q2']."' and dept='".$_GET['q3']."' and class='".$_GET['q4']."'");
//$a= mysql_query("select * from unit1 where unit='unit1' and stopic='Subtopic1' and qtype='normal questions'");
if(mysql_num_rows($a)>0)
{
while($row=mysql_fetch_array($a))
{
$a1=$row['qno'];
$a2=$row['ques'];
$a3=$row['ch1'];
$a4=$row['ch2'];
$a5=$row['ch3'];
$a6=$row['ch4'];
$a7=$row['ans'];
echo $a1."<br>";echo $a2."<br>";echo $a3."<br>";echo $a4."<br>";echo $a5."<br>";echo $a6."<br>";echo $a7."<br>";
echo 1;
}
}
else
{
echo 0;
}
}
?>
Below the ajax coding create div element with id
in your ajax method
if(xmlhttp.responseText==1){
document.getElementById("id").innerHTML = "name already Exists";
return false;
}
else if(xmlhttp.responseText==0)
{
document.getElementById("id").innerHTML="name available";
document.login.submit();
}
"id" your own div id
I have a textarea where I put some C++ code, then I get that code with javascript and send it to a PHP script via AJAX to be processed. The problem is that the code gets corrupted in the way.
Here is my code:
function showResult()
{
var code = document.getElementById('code').value;
var input = document.getElementById('input').value;
if (code != '') {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('result').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('GET', 'ideone.php?code=' + code + '&input=' + input, true);
xmlhttp.send();
}
}
PHP:
<?php
echo 'Code: '.$_GET['code']; // Empty string
?>
You need to quote your query string:
xmlhttp.open('GET', 'ideone.php?code=' + encodeURIComponent(code) + '&input=' + encodeURIComponent(input), true);
Following dropdown:
<select id='dropdown' name='dropdown' onchange='showChart(this.value)'>
<option value="1">Foo</value>
<option value="2">Bar</value>
</select>
Calls this javascript function onchange:
<script type="text/javascript">
function showChart(str1) {
if (str1 == "") {
document.getElementById("chartContainer").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("chartContainer").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", "../ajaxpage/chart.php?charttype=" + str1);
xmlhttp.send();
}
</script>
chart.php?charttype looks like this:
<?php
$charttype = $_GET['charttype'];
if ($charttype == "1") {
echo "<p>test1</p>";
echo "<script type='text/javascript'>
alert('test1');
</script>";
} else {
echo "<p>test2</p>";
echo "<script type='text/javascript'>
$(document).ready(function() {
alert('test2');
});
</script>";
}
?>
Everything seems to work. The test1 and test2 in paragraph tags are rendered correctly in the graphContainer div onchange of the dropdown. However, the javascript is not executing. How come generated javascript does not execute, and how do I fix this?
Thanks.
EDIT
Here is the extremely foul (but working) workaround:
<img src="../images/loaded.gif" alt=""
onload="Code To Execute Here;this.parentNode.removeChild(this);" />
JavaScript is not evaluated with innerHTML.
I have the following code which works great:-
$('.ajax a').click(function() {
getpageajax(this.href);
return false;
});
function getpageajax(getpage) {
if(getpage == "") {
//SET ERROR?
document.getElementById("main").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("main").innerHTML = xmlhttp.responseText;
}
}
var urlarray = getpage.split('/');
location.hash = urlarray[urlarray.length-1];
xmlhttp.open("GET", "includes/AJAXgetpage.php?getpage=" + getpage, true);
xmlhttp.send();
};
Only problem is that I have no idea how to get then read the anchor links I create (e.g. #contact-us) to create bookmarkable pages.
I tried to do a solution based around the following but it seems less than ideal
<script>
var query = location.href.split('#');
document.cookies = 'anchor=' + query[1];
<?php if (!$_COOKIE['anchor']) : ?>
window.location.reload();
<?php endif; ?>
<?php
echo $_COOKIE['anchor'];
?>
To get the hash, other than your initial example, you can use window.location.hash
// example url - http://www.mysite.com/blog/post#comments
var hash = window.location.hash; // = "#comments"
You can use replace to get rid of the leading # if required.