I have index.html file having code like this:
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function ajaxObj(str){
var xmlhttp;
if(window.ActiveXObject){
try{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
xmlhttp=false;
}
}
else{
try{
xmlhttp=new XMLHttpRequest();
}
catch(e){
xmlhttp=false;
}
}
if(!xmlhttp)
alert("cant create the xmlHttp object");
else
//alert("objet created");
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
// alert("in ready state");
var resp=xmlhttp.responseText;
document.getElementById("div1").innerHTML=resp;
if(resp=="pal"){
document.getElementById("div2").innerHTML="text is pal";
}
else{
document.getElementById("div2").innerHTML="text is something else";
}
}
}
xmlhttp.open("GET","mainJsp.jsp?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<table>
<tr>
<td>
<input type="text" name="userInput" onblur="ajaxObj(this.value)"/>
</td>
</tr>
<tr>
<td>
<div id="div1"></div>
</td>
</tr>
<tr>
<td>
<div id="div2"></div>
</td>
</tr>
</table>
</body>
</html>
and mainJsp.jsp having code like this:
<%
String textValue=request.getParameter("q");
if(textValue.equals("pal")){
out.println(textValue);
}
/*if(textValue.equals("mohit")){
out.println(textValue);
}*/
else{
out.println("else");
}
%>
whether i enter 'pal' or something else in text box in index.html. only else statement 'text is something else' in javascript function get executed. if statement never get exexuted. Please help
Here is a fiddle with this working. The formatting around your code was a little confusing to me, sorry about that. I took a couple liberties. Let me know if you have a problem with it!
if(textValue === "pal"){
alert("If");
}
else{
alert("else");
}
Fiddle
StackOverflow about '===' operator
Related
I just wanted to know that how can i write code in using JavaScript and HTML in order to make XML file work.
I am currently using this code but it is not working
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<p>
<h1 id="to">To:
<h1 id="from">From:
<h1 id="message">Message:
<p>
</div>
<script>
if(window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","FileName.xml", false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
document.getElementById("to").innerHTML = xmlDoc.getElementsByTagName("to").childNodes[0].nodeValue;
document.getElementById("from").innerHTML=xmlDoc.getElementsByTagName("from").childNodes[0].nodeValue;
document.getElementById("message").innerHTML=xmlDoc.getElementsByTagName("message").childNodes[0].nodeValue;
</script>
</body>
</html>
And i am using this XML code
<?xml version="1.0" encoding="UTF-8"?>
<e-mail>
<to>John</to>
<from>Larry</from>
<message>Hello how are you!</message>
</e-mail>
You are missing closing </h1> tags, also <h1> is not valid child of <p> element; use .onload event of XMLHttpRequest() to perform tasks with .responseText; add index [0] following getElementsByTagName() call to reference specific element in HTMLCollection
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<h1 id="to">To:</h1>
<h1 id="from">From:</h1>
<h1 id="message">Message:</h1>
</div>
<script>
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "FileName.xml", false);
xmlhttp.onload = function() {
xmlDoc = xmlhttp.responseXML;
document.getElementById("to").innerHTML = xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
document.getElementById("from").innerHTML = xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
document.getElementById("message").innerHTML = xmlDoc.getElementsByTagName("message")[0].childNodes[0].nodeValue;
}
xmlhttp.send();
</script>
</body>
</html>
plnkr https://plnkr.co/edit/jLsO3SgV8dMG3sRBZbds?p=preview
I'm attempting to make a selection and pass the variable to a .php page. I can do it with the jQuery examples on a date selector ... but can't figure it out on the menu selector. When I use this control in conjunction with the datepicker, it allows me to pass both variables, but when I just use it by itself, it doesn't hand it off.
<meta name="viewport" content="width=device-width">
<meta charset="utf-8">
<title>DailyRecords</title>
<link rel="stylesheet" href="jquery/jquery-ui.css">
<script src="jquery/js/jquery-1.10.2.js"></script>
<script src="jquery/jquery-ui.js"></script>
<html>
<head>
<html>
<head>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
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","roster.php?q="+str,true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<script>
$(function() {
$( "#restaurant" ).selectmenu({
});
});
</script>
<table>
<form>
<td>
<select name="restaurant" id="restaurant" onchange="showUser(this.value)">
<option value="">selection</optoin>
<option value="101">DA</option>
<option value="102">FV</option>
<option value="103">CS</option>
<option value="104">TO</option>
</select>
</td>
</form>
</table>
<div id="txtHint"><b>Select restaurant</b></div>
</body>
</html>
Use my code it will work. But make sure your jquery files jquery/js/jquery-1.10.2.js available in the right path or not?
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta charset="utf-8">
<title>DailyRecords</title>
<link rel="stylesheet" href="jquery/jquery-ui.css">
<script src="jquery/js/jquery-1.10.2.js"></script>
<script src="jquery/jquery-ui.js"></script>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
}
else
{
$.ajax({
url: "roster.php",
data : "q="+str, //if you want to pass one variable
//data : "name="+name+"&natives="+natives, //if you want to pass more than 1 variable
type : "POST", // if you want to pass get method put "GET"
success :function(text){
alert(text);
document.getElementById('txtHint').innerHTML=text;
}
});
}
}
</script>
</head>
<body>
<table>
<form>
<td>
<select name="restaurant" id="restaurant" onchange="showUser(this.value)">
<option value="">selection</optoin>
<option value="101">DA</option>
<option value="102">FV</option>
<option value="103">CS</option>
<option value="104">TO</option>
</select>
</td>
</form>
</table>
<b>Select restaurant</b> <div id="txtHint"></div>
</body>
</html>
roster.php file
<?php
echo $_POST['q'];
?>
since you using jquery you can do it like bellow :
<script>
function showUser(str)
{
var datastring ;
datastring = "q="+str;
$.post("roster.php",datastring,function(){
//your result here
});
}
</script>
Use this following code
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta charset="utf-8">
<title>DailyRecords</title>
<link rel="stylesheet" href="jquery/jquery-ui.css">
<script src="jquery/js/jquery-1.10.2.js"></script>
<script src="jquery/jquery-ui.js"></script>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
}
else
{
$.ajax({
url: "roster.php",
data: {"q":str}, //if you want to pass one variable
type : "POST", // if you want to pass get method put "GET"
success :function(data){
console.log(data);
document.getElementById('txtHint').innerHTML=data;
}
});
}
}
</script>
</head>
<body>
<table>
<form>
<td>
<select name="restaurant" id="restaurant" onchange="showUser(this.value)">
<option value="">selection</optoin>
<option value="101">DA</option>
<option value="102">FV</option>
<option value="103">CS</option>
<option value="104">TO</option>
</select>
</td>
</form>
</table>
<b>Select restaurant</b> <div id="txtHint"></div>
</body>
</html>
get post value in poster.php
<?php
if(isset($_POST['q'])){
echo $_POST['q'];
}
?>
i am using normal ajax to search from data base when form submit but the code is not working . There are two date field i want to search data between two dates if i use separate page the code is working but in ajax it is not working .any help will be appreciate Thank you
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="datepicker/javascript/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="datepicker/css/default.css" type="text/css" />
<script type="text/javascript" src="datepicker/javascript/zebra_datepicker.js"></script>
<script>
$(document).ready(function() {
$('input.datepicker').Zebra_DatePicker();
$('#strt_dt').Zebra_DatePicker();
});
$(document).ready(function() {
$('input.datepicker').Zebra_DatePicker();
$('#end_dt').Zebra_DatePicker();
});
</script>
<script>
function showStd(tstfrm) {
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("replace").innerHTML=xmlhttp.responseText;
}
}
var strt_dt = document.getElementById('strt_dt').innerHTML;
var end_dt = document.getElementById('end_dt').innerHTML;
xmlhttp.open("GET","test2.php?strt_dt="+strt_dt+"&end_dt="+end_dt, true);
xmlhttp.send();
}
</script>
</head>
<body>
<form action="" method="post" onsubmit="return showStd(this);" name="tstfrm" id="tstfrm">
<fieldset>
<p><label>Start Date:</label><input name="strt_dt" type="text" class="text-long" id="strt_dt" /></p>
<p><label>End Date:</label><input name="end_dt" type="text" class="text-long" id="end_dt" /></p>
<input name="serch" type="submit" id="serch" value="search"/>
</fieldset>
</form>
<div id="replace" style="height:500px; width:1000px; border:1px solid #000;">
</div>
</body>
</html>
and here is the below test2.php for search
<?php
include '../dbconn.php';
$strt_dt=$_REQUEST['strt_dt'];
$end_dt = $_REQUEST['end_dt'];
?>
<table cellpadding="0" cellspacing="0" border="1">
<tr>
<td width="137"><b>Name</b></td>
<td width="154"><b>Contact</b></td>
<td width="407" align="center"><b>Action</b></td>
</tr>
<?php
$qry=mysql_query("SELECT * FROM std_register WHERE reg_dt BETWEEN '".$strt_dt."' AND '".$end_dt."'");
while($row=mysql_fetch_array($qry))
{
?>
<tr>
<td><?php echo $row['std_name1']." ".$row['std_name2'];?></td>
<td><?php echo $row['std_phno'];?></td>
</tr>
<?php
}
?>
</table>
Dude i can see in your code that you are using jQuery on the page.
can use jQuery provided methods for Ajax requests.
$.get
$.post
And more verbose method $.ajax for your work you need jQuery to make it cross browser.
$.get('/test2.php?date='+date,function(response){
//use server response to manipulate dom
});
I have the following code in php:
<html>
<head>
<script stype="text/javascript">
function ventanachat(){
var xmlHttp;
if (window.XMLHttpRequest)
{
xmlHttp=new XMLHttpRequest();
}
else
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
var fetch_unix_timestamp ="";
fetch_unix_timestamp = function()
{
return parseInt(new Date().getTime().toString().substring(0, 10))
}
var timestamp = fetch_unix_timestamp();
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
document.getElementById("ventanachat").innerHTML=xmlHttp.responseText;
setTimeout('ventanachat()',10);
}
}
xmlHttp.open("GET","db.php"+"?t="+timestamp,true);
xmlHttp.send(null);
}
window.onload = function startrefresh(){
setTimeout('ventanachat()',1000);
}
</script>
</head>
<body>
<form action="insert.php" method="GET">
<input type="text" name="mensaje" id="enviachat" >
<input type="submit">
</form>
<div id="ventanachat" style="width:200px;height:200px;border:1px solid black;overflow:hidden;">
<script type="text/javascript">
ventanachat();
</script>
</div>
</body>
</html>
It is a very basic chat page that updates every 1 second. (the insert.php and db.php files are just consultations and are good)
It works perfect in Apache but Nginx does not work me. Why?.
(I speak Spanish, sorry if misspelled. use a translator). Thanks
newbie here .. wondering why in the table i get something called '[object node]' and not the actual value?
<script type="text/javascript">
window.onload = wonfunction;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","sc2xml.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
function wonfunction() {
var homestead = xmlDoc.getElementsByTagName("sc2cash");
document.getElementById('num1').innerHTML = homestead[0];
}
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<table width="200" border="1">
<tr>
<td>Players</td>
<td id="num1"></td>
</tr>
<tr>
<td> </td>
<td> </td>
To answer your comment:
In IE8 atleast you can use the .text property of a node like so:
var myNodes = xmlDoc.getElementsByTagName('node');
document.getElementById('result').innerHTML = myNodes[0].text;
Some good articles are alistapart AJAX and a MS blog with some good examples too.
Here is a jsfiddle that works fine in IE8.