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
– heymega, Commented Jan 7, 2014 at 9:19

Praveen · Accepted Answer · 2014-01-07 09:19:36Z

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 7, 2014 at 9:19

answered Jan 7, 2014 at 9:14

Praveen

56.7k35 gold badges137 silver badges169 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mohammed Bilal dev Over a year ago

I am not using any kind of server side , it's purely on html file. Is there any way i can edit the xml ?

Praveen Over a year ago

@user3121733 from where you're getting the xml file? in your local machine or from any domain?

Praveen Over a year ago

@user3121733 Javascript cannot write to a file locally. You definitely need a server side code.

Mohammed Bilal dev Over a year ago

can you just have look on this url:stackoverflow.com/questions/1192286/…

Ankur Verma · Accepted Answer · 2014-01-07 09:15:36Z

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>

Collectives™ on Stack Overflow

Editing XML File content using JQuery

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related