3

I want to delete some nodes or add some nodes in xml with jquery, I try it with append, empty, remove but all of them seem to not work, like (in $.ajax):

success:function(xml){
    $(xml).find("layout").append('<app id="' + $children.eq(i).attr("id") + '"></app>');
    $(xml).find("layout").empty();
}

also I find there is no tutorial on google. So I wonder is it possible add or delete nodes in xml with jquery?

OK ,I write it in details,the xml file just save in local domain as Database/UserConfig/config.xml here is my Ajax code:

function layout_change()
{
    var $children=$input.children();

    $.ajax({
        type: "get",
        url: "Database/UserConfig/config.xml",
        dataType: "xml",
        timeout: 2000,
        beforesend:function(xml){
            $(xml).find("layout").empty();
        },
        success:function(xml){
            for(var i=0;i<$children.length;i++)
            {
                $(xml).find("layout").append('<app id="' + $children.eq(i).attr("id") + '"></app>');              
            }
        },
        error:function(){}
    });
}

or it can be done with javascript?or can be only done with server language like C#?……

here is my demo xml：

<layout>
        <app id="id-4"></app>
        <app id="id-5"></app>
        <app id="id-6"></app>
        <app id="id-1"></app>
        <app id="id-2"></app>
        <app id="id-3"></app>   
</layout>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
hh54188
  • 14,887
  • 32
  • 113
  • 184
  • 1
    if you can do something with javascript ,there are high chances that it can be done...with jquery – kobe Nov 24 '10 at 02:23
  • But you shouldn't write or update xml files , text files from javascript , that is not good approach , javascript is mainly to manipulate DOM , fetch data and show...,send data. – kobe Nov 24 '10 at 02:24
  • @alex , do you think it is a good approach to update xml , if he wants he should use data property and use jquery meta data plugin – kobe Nov 24 '10 at 02:26
  • @gov That's not true. jQuery is an *excellent* tool for parsing XML. – Alex Nov 24 '10 at 02:27
  • @alex , parsing is fine , i am asking about updating xml?? – kobe Nov 24 '10 at 02:29
  • @hh54188 we need more code to help you. In particular, your complete `$.ajax()` call, and your server-side code that gives you the xml. *Is* it your datasource? Is it a cross-domain request? etc. Bottom line, we need more info and code. – Alex Nov 24 '10 at 02:34
  • @hh54 , can you tell me the reason why you want to change xml from jquery.??? – kobe Nov 24 '10 at 02:46
  • @hh54 if you write back something to xml , you need to make a ajax call to backend like c# ,or java and that server side code should update the xml. and then you should make a call back again to see the latest results. You shouldn't directly manipulate the xml file from jquery. – kobe Nov 24 '10 at 02:47
  • @gov I want save the xml as user personal config,because the elements on page can be drag or moved ,the lay out can be changed often,so I want immediately save it when the layout changed – hh54188 Nov 24 '10 at 02:52

1 Answers1

8

jQuery is a fantastic tool for parsing and manipulating XML in javascript. jQuery's ajax APIs were, in fact, built with this in mind which is why you're able to specify the response type of an ajax call by setting the dataType argument to xml (although they do try to do some auto-detection if this argument is omitted). From the jQuery $.ajax() documentation for the dataType argument:

"xml": Returns a XML document that can be processed via jQuery.

You can parse and manipulate XML as much as want using jQuery. I'll have to add that using CSS selectors is wonderful compared to XPath queries in server-side XML libraries.

While empty and remove work as expected, there's a gotcha when adding nodes on the fly with functions like append: jQuery, for whatever reason (I haven't really dug into this), won't create the element for you when appending to the XML structure (although this works fine in HTML structures). You can get around this easily by explicitly creating the node yourself as a DOM element or jQuery object and then calling append:

//Either of these will work
var elem = document.createElement('app');
xml.find('layout').append(elem); // Appends <app></app> to <layout>
xml.find('layout').append($('<app>')); // Does the same

// You can also you use other manipulation functions such as `attr`
xml.find('layout').append($('<app>').attr('id', 'ego'));

It looks like, however, that there are other problems with your code that would be preventing it from behaving as expected. The $.ajax beforeSend callback, for example, passes in the XMLHttpRequest object to the callback function and not your XML object to be manipulated. The result is that your empty call in that callback does nothing.

Also, if you're trying to manipulate the response of Database/UserConfig/config.xml in the beforeSend callback, it probably won't have existed yet since beforeSend is called before the ajax request is fired off. It's possible that the xml argument you intended to pass in was scoped globally, but it's squashed in the scope of the callback since jQuery is passing in XMLHttpRequest as I mentioned before.

andrewle
  • 1,731
  • 13
  • 11