CODEWITHSUNDEEP
javascriptxmljquery
Bilal
Bilal

Reputation: 47

Editing XML File content using JQuery

I am getting xml file content using jquery and binding in to textbox, if anybody change the value in the text box , same has to be reflected in the source xml file, how to do that, i am new to xml.

Here is the code i am using to get the data from xml file.

<html><head>

<link rel="stylesheet" type="text/css" media="all" href="style.css" />

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $.ajax({
            type: "GET",
            url: "employees.xml",
            dataType: "xml",
            success: function(xml) {
                $(xml).find('Employee').each(function() {
                    var id = $(this).attr('id');
                    var name = $(this).find('Name').text();
                    var designation= $(this).find('Designation').text();
                    //                        alert(id + '|' + name + '|' + designation);
                    $('<div class="items" id="' + id + '"></div>').html('<input type="text" value="' + name + '">').appendTo('#page-wrap');
                });
            }
        });
    });
    function saveXMLFiles() {

        $("#page-wrap").find('id').each(function() {
            var description = $(this).find('Designation').text();
            alert(description);
        });
    }
 </script>

</head>
<body>
<div id="page-wrap">
    <h1>
        Employees</h1>
</div>
<input type="button" value="Save" onclick="saveXMLFiles();" />

Upvotes: 0

Views: 6186

Answers (2)

Praveen
Praveen

Reputation: 56539

  1. First create a web method for updating the XML in your server side.
  2. Again you have to write an ajax request for updating the XML.

This is purely depends on your server-side.

Upvotes: 1

Ankur Verma
Ankur Verma

Reputation: 5933

Keep these things in mind:

  1. You have to take the value of xml in a variable that is accessible to all the functions so that you can change it when somebody change the value in text box
  2. Pass the value of updated xml to the server;

So do like this;

<script type="text/javascript">
   $(document).ready(function() {

    var globalXML = null;

    $.ajax({
        type: "GET",
        url: "employees.xml",
        dataType: "xml",
        success: function(xml) {
            globalXML = xml;//this is going to set in global variable
            $(xml).find('Employee').each(function() {
                var id = $(this).attr('id');
                var name = $(this).find('Name').text();
                var designation= $(this).find('Designation').text();
                //                        alert(id + '|' + name + '|' + designation);
                $('<div class="items" id="' + id + '"></div>').html('<input type="text" value="' + name + '">').appendTo('#page-wrap');
            });
        }
    });
  });
  function saveXMLFiles() {

    $("#page-wrap").find('id').each(function() {
        var description = $(this).find('Designation').text();

        //change to globalXML;
        //and send it to server;
        $.ajax({
           type: "POST",
           url: "saveEmployeesToXML",//path to post
           data: globalXML,
           success: function(response) {
             alert(response);
           }
        });
    }
});
        alert(description);
    });
  }
</script>

Upvotes: 0

Related Questions