my code is follows
<script type="text/javascript">
function saveack()
{
var raf=document.getElementById('find_raf').value;
var phone=document.getElementById('update_phone').value;
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()
{
document.getElementById("res").innerHTML="<img src='../images/ajax-loader-2.gif' />";
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
alert("asd");
document.getElementById("res").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("get","updateCustomerDetail.php?raf="+raf+"&phone="+phone,true);
xmlhttp.send();
}
and my html code in short is
<form method="post" >
<tr>
<td align="right" width="50%" bgcolor="#9FCAE9" style="font-weight:800; font-size:14px; color:#006;">RAF No.</td>
<td width="50%" align="left" bgcolor="#E8F8FF" style="color:#006"><input type="text" style="border:none" name="find_raf" id="find_raf" onBlur="fetchDetails();" /><span id="result_raf"></span></td>
</tr>
<tr>
<td align="right" bgcolor="#9FCAE9" style="font-weight:800; font-size:14px; color:#006;">Customer Phone</td>
<td align="left" bgcolor="#E8F8FF" style="color:#006"><input type="text" style="border:none" size="30" name="update_phone" id="update_phone" /></td>
</tr>
<tr align="center">
<td colspan="2"bgcolor="#E8F8FF" style="color:#006"> <input type="submit" name="update_raf" id="update_raf" value="update" onClick="saveack();" /><?=$success ?></td>
</tr>
<tr align="center">
<td><div id="res"></div></td>
</tr>
</form>
when i echo $_GET['raf'] in updateCustomerDetail.php nothing is displaying..can anyone help
where exactly i have gone wrong..for testing purpose i just gave alert inside
if (xmlhttp.readyState==4 && xmlhttp.status==200)
but alert is not coming
Well i guess the post back is causing the issue.What you need to do is...
Modify your input onclick by adding a return as below
<input type="submit" name="update_raf" id="update_raf" value="update" onClick="return saveack();" />
And in your javascript code at the end add a return false to prevent the postback
function saveack() {
var raf = document.getElementById('find_raf').value;
var phone = document.getElementById('update_phone').value;
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 () {
document.getElementById("res").innerHTML = "<img src='../images/ajax-loader-2.gif' />";
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert("asd");
document.getElementById("res").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("get", "updateCustomerDetail.php?raf=" + raf + "&phone=" + phone, true);
xmlhttp.send();
return false;
}
Just use input type='button' instead of type='submit'
Because submit make an action if it is in a form tag
You are using ajax so no need action. Action makes the page refresh.
Use:
<input type="button" name="update_raf" id="update_raf"........
Instead of
<input type="submit" name="update_raf" id="update_raf"........
It is working. tested by me.
Related
I have an HTML table which I want to update every 1 second on page. It have few div and classes within. So I tried AJAX to update it every 1 second. HTML is this:-
<div class="abcd">
<div style='float: left;'>
<br><br>
<p style="padding-left:16px; font-size: 20px;">Amount(<?php echo $market; ?>) | Price(<?php echo $bm; ?>)   | Total(<?php echo $bm; ?>)</p>
<div class="panel-hello scrollbar" id="style-11">
<div class="data-table">
<table class="table table-hello table-bordered table-hover force-overflow" id="btcaddresses">
<tbody style="border: 1px solid green; height: 300px; overflow-y: scroll;">
</tbody>
</table>
</div>
</div>
</div>
And AJAX 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.getElementsById("btcaddresses").innerHTML=xmlhttp.responseText; // your div
}
}
xmlhttp.open("GET","getdatabase.php",true); //your php file
xmlhttp.send();
}
window.setInterval(function(){
loadXMLDoc();
}, 1000);
And getdabase.php contains:-
<?php
require('../setup.php');
$seql = "select price, sum(total), sum(aleft) from trade where status = 'active' and bm = 'USD' and m = 'BTC' and type = 'sell' group by price";
$query100 = mysqli_query($conn, $seql);
while ($row = mysqli_fetch_array($query100))
{
echo '<tr style="cursor: pointer; font-size: 15px;">
<td>'.number_format($row['sum(aleft)'], 8).'</td>
<td>'.number_format($row['price'], 8).'</td>
<td>'.number_format($row['sum(total)'], 8).'</td>
</tr>';
}
mysqli_close($conn);
?>
Problem is , it is not working and even if does it's not having any table classes specified in class.
<?php
require('../setup.php');
$seql = "select price, sum(total), sum(aleft) from trade where status = 'active' and bm = 'USD' and m = 'BTC' and type = 'sell' group by price";
$query100 = mysqli_query($conn, $seql);
$result = '';
while ($row = mysqli_fetch_array($query100))
{
$result .= '<tr style="cursor: pointer; font-size: 15px;">
<td>'.number_format($row['sum(aleft)'], 8).'</td>
<td>'.number_format($row['price'], 8).'</td>
<td>'.number_format($row['sum(total)'], 8).'</td>
</tr>';
}
mysqli_close($conn);
echo $result;
?>
This should work, but indeed you should return a json.
Edit : full html code working fine for me : (I had to remove some php parts)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="abcd">
<div style='float: left;'>
<br>
<br>
<!-- <p style="padding-left:16px; font-size: 20px;">Amount(<?php echo $market; ?>) | Price(<?php echo $bm; ?>)   | Total(<?php echo $bm; ?>)</p> -->
<div class="panel-hello scrollbar" id="style-11">
<div class="data-table">
<table class="table table-hello table-bordered table-hover force-overflow" id="btcaddresses">
<tbody style="border: 1px solid green; height: 300px; overflow-y: scroll;">
</tbody>
</table>
</div>
</div>
</div>
<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("btcaddresses").innerHTML = xmlhttp.responseText; // your div
}
}
xmlhttp.open("GET", "getdatabase.php", true); //your php file
xmlhttp.send();
}
window.setInterval(function () {
loadXMLDoc();
}, 1000);
</script>
</body>
</html>
I'm trying to make a poll, but the poll_results.txt file won't get written. I've tried on my Windows pc and my Linux server.
I'm using this example
index.html
<html>
<head>
<script>
function getVote(int) {
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("poll").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","poll_vote.php?vote="+int,true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="poll">
<h3>Do you like PHP and AJAX so far?</h3>
<form>
Yes:
<input type="radio" name="vote" value="0" onclick="getVote(this.value)">
<br>No:
<input type="radio" name="vote" value="1" onclick="getVote(this.value)">
</form>
</div>
</body>
</html>
poll_vote.php
<?php
$vote = $_REQUEST['vote'];
//get content of textfile
$filename = "poll_result.txt";
$content = file($filename);
//put content in array
$array = explode("||", $content[0]);
$yes = $array[0];
$no = $array[1];
if ($vote == 0) {
$yes = $yes + 1;
}
if ($vote == 1) {
$no = $no + 1;
}
//insert votes to txt file
$insertvote = $yes."||".$no;
$fp = fopen($filename,"w");
fputs($fp,$insertvote);
fclose($fp);
?>
<h2>Result:</h2>
<table>
<tr>
<td>Yes:</td>
<td>
<img src="http://www.w3schools.com/php/poll.gif"
width='<?php echo(100*round($yes/($no+$yes),2)); ?>'
height='20'>
<?php echo(100*round($yes/($no+$yes),2)); ?>%
</td>
</tr>
<tr>
<td>No:</td>
<td>
<img src="http://www.w3schools.com/php/poll.gif"
width='<?php echo(100*round($no/($no+$yes),2)); ?>'
height='20'>
<?php echo(100*round($no/($no+$yes),2)); ?>%
</td>
</tr>
</table>
I've tried changing permission, but they all looked correct. Is there something wrong with the example?
I have a code to add more row on link. This code is execute on Firefox , Chrome but not on IE-8. Generating error on IE. Error is
Unknown runtime error
Code:
addmore.php
<script type="text/javascript" language="javascript">
function addrel()
{
var xmlhttp;
var str1=document.forms["regisration"]["count1"].value;
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 taha="reladd"+str1;
document.getElementById(taha).innerHTML=xmlhttp.responseText;
}
}
var str=parseInt(document.forms["regisration"]["count1"].value,10);
xmlhttp.open("GET","addmoreRelative.php?q="+str,true);
xmlhttp.send();
str=str+1;
document.forms["regisration"]["count1"].value=str;
}
</script>
<form name="regisration" method="post" enctype="multipart/form-data" action="">
<input type="hidden" name="count" value="1"/>
<input type="hidden" name="count1" value="1"/>
<table border="0" >
<tr >
<td><b>Surname</b></td>
<td> </td>
</tr>
<tr>
<td >
<input type="text" name="rlast" id="rlast" maxlength="30" value="" />
</td>
<td> Add More</td>
</tr>
<?php for($t=1;$t<=9;$t++){?><tr id="reladd<?php echo $t; ?>" ></tr><?php }?>
</table>
addmoreRelative.php
<?php
$count=$_GET['q']; ?>
<td><input type="text" name="rlast<?php echo $count; ?>" id="rlast<?php echo $count; ?>" /></td>
Known issue. Updating PART of a table under IE8 and below is simply broken.
You either have to replace the entire table, or you have to use the traditional DOM table manipulation.
See JavaScript Table Manipulation for hints.
I have an Ajax code that am using to get data from my php page, but it is not returning any data back to the Ajax, returning null value.
function getType(str){
$("#selectCat").html("Select the Catagory of " +str);
if (str.length == 0){
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('category').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET","OrderItem.php?q="+str,true);
xmlhttp.send();
}
and here is my php code
session_start();
$currentUser = $_SESSION["userID"];
include("include/dbcommon.php");
$value = $_GET['q'];
//echo $value;
$sqlString = "";
if($value == "dish"){
$sqlString = "select name from dishcategory";
}else if($value == "drinks"){
$sqlString ="select name from drinkscategory";
}else if($value == "desserts"){
$sqlString = "select name from dessertcategory";
}
$rs = customQuery($sqlString);
while($data= db_fetch_array($rs)){
echo "<option value='".$data['name']."'>".$data['name']."1</option>";
}
and my HTML part
<TABLE style="WIDTH:85%" cellSpacing=1 cellPadding=1 width="75%">
<TBODY>
<TR>
<TD> <STRONG>Ordered Item Category</STRONG></TD></TR>
<TR>
<TD> <input type="Radio" name="itemType" id="" class="selebtn" value="dish" onClick="getType(this.value)"> Dish <input type="Radio" name="itemType" id="" class="selebtn" value="drinks" onClick="getType(this.value)"> Drinks <input type="Radio" name="itemType" id="" class="selebtn" value="desserts" onClick="getType(this.value)"> Desserts
</TD></TR></TBODY></TABLE>
<TABLE>
<TBODY>
<TR><TD><span id="selectCat"></span></TD></TR>
<TR><TD><span id="selePan"><select name="itemcat" id="itemcat"><option value="">select</option><span id="category"></span></select></span></TD></TR>
</TBODY>
</TABLE>
please i can't get the why it is returning null value?
thanks in advance
Your HTML is invalid. You cannot have a span element as a child element of a select. Your problem is probably due to the browser performing error recovery and discarding the span element (that is certainly how Chrome reacts to your code).
Use a validator.
<!--viewservice.php-->
On blur i send data to get_service_category.php with the help of ajax function getservice_search. Before sending i alert the variable it give full string as Buff & Gelcoat [Acrylic Nail Enhancement] but when it is posted to get_service_category.php and then echoed back to the page it just print Buff after that it is trimmed
<label>Search Service</label>
<input type='text' name='country' id="select_service" value='' class='auto' onblur="getservice_search(this.value)"/>
<img src="img/icons/search-50.png" height="22" width="22" style="padding-left:5px;margin-bottom:-5px;cursor:pointer;" id="search" alt="Search" title="Click To Search" />
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript">
$(function() {
//autocomplete
$(".auto").autocomplete({
source: "search_services.php",
minLength: 1
});
});
</script>
<script type="text/javascript">
function getservice_search(x)
{
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("box1").innerHTML=xmlhttp.responseText;
}
}
var select_service = document.getElementById("select_service").value;
alert(select_service);
xmlhttp.open("GET","get_service_category.php?select_service="+select_service,true);
xmlhttp.send();
}
</script>
enter code here
<!--get_service_category.php -->
<?php
include('../config/connect.php');
include('unset_super_admin.php');
function clean($str)
{
$str = #trim($str);
if(get_magic_quotes_gpc())
{
$str = stripslashes($str);
}
return mysql_real_escape_string($str);
}
if(isset($_GET['service_category']))
{
$service_category = $_GET['service_category'];
$sql ="select * from services where service_cat_id='$service_category' ";
}
else if($_GET['select_service'])
{
$select_service=clean($_GET["select_service"]);
$sql ="select * from services where service_name='$select_service' ";
}
else if($_GET['select_service']=="")
{
$sql ="select * from services";
}
$result_services = mysql_query($sql);
if($result_services)
{
echo $select_service;
?>
<table style="text-align:center;" class="viewcustomer">
<tr>
<th>Id</th>
<th>Service Name</th>
<th>Price</th>
<th>Action</th>
</tr>
<?php
while($rowresult=mysql_fetch_array($result_services))
{
echo "<tr>";
echo "<td>$rowresult[service_id]</td>";
echo "<td>$rowresult[service_name]</td>";
echo "<td>$rowresult[service_price]</td>";
echo '<td><Img src="img/icons/button_edit.gif" title="EDIT" alt="EDIT SERVICE" /> </td>';
echo "</tr>";
}
}
?>
You neglected to URL-encode your values properly – & in a query string separates parameters from each other, so ?select_service=Buff & Gelcoat… would mean one parameter named select_service with value Buff, and then a second parameter named Gelcoat….
Use encodeURIComponent on the value before putting it into the query string.