Solved

Importing xml document in javascript and posting it to a url using an html webform

Posted on 2008-06-13
1
170 Views
Last Modified: 2008-06-26
I need to import an xml file in order do a positing to a url. I am using xmlhttp request. The only problem I am having is that I need to create an html page where the user is able to browse the xml file and execute the posting on-click of the "posting" button.

I have imported the file already but I do not know how to link it to the file that the user has browsed and to the click of the button.
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
 
<!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 runat="server">
 
    <title>Untitled Page</title>
    <script type="text/javascript">
        var xmlhttp;
        function loadXMLDoc(url) 
        {
            xmlhttp=null;
            if (window.XMLHttpRequest)// code for IE7, Firefox, Opera, etc.
            {
                xmlhttp=new XMLHttpRequest();
            }
            else if (window.ActiveXObject)// code for IE6, IE5
            {
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            if (xmlhttp!=null)
            {
                xmlhttp.onreadystatechange=loadXML();
                xmlhttp.open("POST","http://yoursite.com/sample.xml",FALSE);
                xmlhttp.send();
                alert(xmlhttp.ResponseText);
               
            }
            else
            {
                alert("Your browser does not support XMLHTTP.");
            }
        }
    
        function loadXML()
        {
            var xmlDoc;
            if (window.ActiveXObject)//IE
            {
                xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
            }
            else if (document.implementation.createDocument)//FF
            { 
                xmlDoc=document.implementation.createDocument("","",null);
            }
            else
            {
                alert('Your browser cannot handle this script');
            }
            xmlDoc.async=false;
            xmlDoc.load("xmlorders.xml");
        }
 
      
    </script>
<tittle> <br> Post an Order </br> </tittle>
    
</head>
<body>
    <form id="form1" runat="server">
    <p>
    Please specify a file, or a set of files:<br>
    <input type="file" name="datafile" size="40">
    </p>
    <div>
    </div>
    </form>
</body>
</html>

Open in new window

0
Comment
Question by:suarezst
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
1 Comment
 
LVL 29

Accepted Solution

by:
Pravin Asar earned 125 total points
ID: 21784938
Here is a simple example showing how to load and parse Xml File.

See the code in action at:

http://www.javascriptjournal.com/tutorials/createXmlTable.htm
<html>
<head>
<title>Example of Rendering XML Data into HTML Table -- #Pravin Asar#</title>
<style type="text/css">
Table { background-color: #EEEEFF;}
</style>
</head>
<body onload="importXML();">
<script language="javascript">
var xmlStr ="<?xml version=\"1.0\"?><root>" +
            "<dateTime><mydate>10/10/2007</mydate><mytime>03:56:38</mytime></dateTime>" +       
            "<dateTime><mydate>10/10/2007</mydate><mytime>03:56:38</mytime></dateTime>" + 
            "<dateTime><mydate>10/10/2007</mydate><mytime>03:56:38</mytime></dateTime>" + "</root>";
 
function importXML()
{
     if (document.implementation && document.implementation.createDocument)
     {
          xmlDoc = document.implementation.createDocument("", "", null);
          xmlDoc.onload = createTable;
     }
     else if (window.ActiveXObject)
     {
          xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
          xmlDoc.onreadystatechange = function () {if (xmlDoc.readyState == 4) createTable()};
      }
     else
     {
          alert('Your browser can\'t handle this script');
          return;
     }
     xmlDoc.load("books.xml");
     //xmlDoc.loadXML(xmlStr);
}
 
function DeleteTable() {    
    var table = document.getElementById('XmlTable'); 
    if (!table) { return; }
    if (table.parentNode != null) {
	  pNode = table.parentNode;
	  pNode.removeChild (table);
	  return;
	} 
    if (table != null)
    {  
		//alert ('Hello');
        var rows = table.rows;     
        while(rows.length){ // length=0 -> stop
          	table.deleteRow(rows.length-1); 
        }
    }
}
 
function createTable()
{
     var x = xmlDoc.getElementsByTagName('BOOK');
     //var x = xmlDoc.getElementsByTagName('root/dateTime');
 
    var tbl = document.getElementById('writeroot');
    DeleteTable('XmlTable');
     var newEl = document.createElement('TABLE');
     newEl.setAttribute ('id' , 'XmlTable');
     newEl.setAttribute('cellPadding',5);
     var tmp = document.createElement('TBODY');
     newEl.appendChild(tmp);
     var row = document.createElement('TR');
     for (j=0;j< x[0].childNodes.length;j++)
     {
          if (x[0].childNodes[j].nodeType != 1) continue;
          var container = document.createElement('TH');
          var theData = document.createTextNode(x[0].childNodes[j].nodeName);
          container.appendChild(theData);
          row.appendChild(container);
     }
     tmp.appendChild(row);
     for (i=0;i<x.length;i++)
     {
          var row = document.createElement('TR');
          for (j=0;j<x[i].childNodes.length;j++)
          {
               if (x[i].childNodes[j].nodeType != 1) continue;
               var container = document.createElement('TD');
               var theData = document.createTextNode(x[i].childNodes[j].firstChild.nodeValue);
               container.appendChild(theData);
               row.appendChild(container);
          }
          tmp.appendChild(row);
     }
     document.getElementById('writeroot').appendChild(newEl);
}
function RecreateTable() {
	DeleteTable();
	createTable();  
}
</script>
<a href="#" onclick="DeleteTable(); return false;">Delete Table</a>
<a href="#" onclick="RecreateTable(); return false;">Recreate Table</a>
<div id="writeroot"></div>
<br>
<p>Contents of Books.xml</p>
<textarea rows="30" cols="60" style="font-size: 14px;">
<?xml version="1.0" encoding="UTF-8"?>
<COLLECTION>
  <BOOK>
    <TITLE>Book Title 1</TITLE>
    <AUTHOR>Author Name 1 </AUTHOR>
    <PUBLISHER>Publishing House 1</PUBLISHER>
  </BOOK>
  <BOOK>
    <TITLE>Book Title 2</TITLE>
    <AUTHOR>Author Name 2 </AUTHOR>
    <PUBLISHER>Publishing House 2</PUBLISHER>
  </BOOK>
  <BOOK>
    <TITLE>Book Title 3</TITLE>
    <AUTHOR>Author Name 3 </AUTHOR>
    <PUBLISHER>Publishing House 3</PUBLISHER>
  </BOOK>
  <BOOK>
    <TITLE>Book Title 4</TITLE>
    <AUTHOR>Author Name 4 </AUTHOR>
    <PUBLISHER>Publishing House 4</PUBLISHER>
  </BOOK>
  <BOOK>
    <TITLE>Book Title 5</TITLE>
    <AUTHOR>Author Name 5 </AUTHOR>
    <PUBLISHER>Publishing House 5</PUBLISHER>
  </BOOK>
</COLLECTION>
</textarea>
</pre>
</body>
</html>

Open in new window

0

Featured Post

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
Introduction In my previous article (http://www.experts-exchange.com/Microsoft/Development/MS-SQL-Server/SSIS/A_9150-Loading-XML-Using-SSIS.html) I showed you how the XML Source component can be used to load XML files into a SQL Server database, us…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

690 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question