Editing XML File content using JQuery

Question

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();" />

Answer 1

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

This is purely depends on your server-side.

Answer 2

Keep these things in mind:

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
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>

Editing XML File content using JQuery

Question

2 answers

solution1
1 2014-01-07 09:14:24

solution2
0 2014-01-07 09:15:36

Editing XML File content using JQuery

Question

2 answers

solution1 1 2014-01-07 09:14:24

solution2 0 2014-01-07 09:15:36

solution1
1 2014-01-07 09:14:24

solution2
0 2014-01-07 09:15:36