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.
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 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 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
I have this JavaScript. in jquery mobile . i want it to only shows inside the this div . now when i run it, it doesn't show any styles or jquery. just shows the javascript.
<%# Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false"
CodeFile="phonedirectory.aspx.vb" Inherits="phonedirectory" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="timeline" id="lists" data-role="content">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<div data-role="page">
<div data-role="header" data-theme="c">
<center>
<a href="Default.aspx">
<img src="Content/images/logo.png" /></a></center>
</div>
<script language="javascript" type="text/javascript">
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.read
xmlhttp.open("GET", "xml.aspx", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
document.write("<ul id='employee' data-role='listview' data-filter='true'>");
var x = xmlDoc.getElementsByTagName("employee");
for (i = 0; i < x.length; i++) {
document.write("<li class='ui-screen-hidden'>")
document.write("<a href='info.aspx?ID=");
document.write(x[i].getElementsByTagName("ID")[0].childNodes[0].nodeValue);
document.write("'>")
document.write(x[i].getElementsByTagName("Name")[0].childNodes[0].nodeValue);
document.write("</a></li>");
}
document.write("</ul>");
</script>
</div>
Firstly, you don't close the script tag.
Secondly, if you're writing JavaScript in an HTML page, you should use single quotes to avoid clashing with the double quotes used for HTML markup, or escape your double quotes.
When I use responseText, I get all the data. From <HTML> to </HTML>. How to I extract specific parts of it? For example, I have this code:
<!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>Tester</title>
</head>
<body>
<table>
<tr>
<td><a name="Name"></a>Name</td>
<td>John</td>
</tr>
<tr>
<td><a name="Email"></a>Email</td>
<td>john#aol.com</td>
</tr>
<tr>
<td><a name="Address"></a>Address</td>
<td>123 Elm Street</td>
</tr>
<tr>
<td><a name="City"></a>City</td>
<td>Los Angeles</td>
</tr>
<tr>
<td><a name="State"></a>State</td>
<td>CA</td>
</tr>
</table>
</body>
</html>
And Then I need to just extract like the city part Los Angeles. How would I go about doing this? I can't do responseText.getElementByTagName, or anything like that.
Here's the AJAX call:
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)
{
var pageContents = xmlhttp.responseText;
document.getElementById("myDiv").innerText = pageContents;
}
}
xmlhttp.open("GET","content.html",false);
xmlhttp.send();
For a pure JavaScript solution, try (untested):
var city = responseXML.getElementsByName('City').parentNode.nextElementSibling.childNodes[0].getAttribute('textContent');
That said, a JavaScript library, like jQuery, to do the heavy lifting sure makes your code a lot easier to read (as well as cross-browser friendly).
jQuery names this (sort of) easy:
alert($('table').find('tr').eq(3).find('td').eq(1).html()) ---> Los Angeles