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

Since JS can't write files directly to your server it is downloaded and used locally. You will need to send the edited javascript back to the server and get that to save it for you. — heymega, Jan 07 '14 at 09:19

Praveen · Answer 1 · 2014-01-07T09:19:36.640

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.

edited Jan 07 '14 at 09:19

answered Jan 07 '14 at 09:14

Praveen

55,303
33
133
164

I am not using any kind of server side , it's purely on html file. Is there any way i can edit the xml ? – Bilal Jan 07 '14 at 10:13
@user3121733 from where you're getting the xml file? in your local machine or from any domain? – Praveen Jan 07 '14 at 10:14
@user3121733 Javascript cannot write to a file locally. You definitely need a server side code. – Praveen Jan 07 '14 at 10:25
can you just have look on this url:http://stackoverflow.com/questions/1192286/create-and-modify-xml-file-using-javascript – Bilal Jan 07 '14 at 10:32

score 0 · Answer 2 · answered Jan 07 '14 at 09:15

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

2 Answers2