How to replace xml node value in jquery

Question

This is my code, i am using firefox's firebug (console.info)

 var productMap = {
    "1": "IIR"        
};

 $(xml).find('ConfigInfo').each(function(){
     var pid = $(this).find('productId').text();    
     $(this).find('productId').text(productMap[pid]);
     console.info($(this).find('productId').text());
 });

 $(xml).find('ConfigInfo').each(function(){
     console.info($(this).find('productId').text());
 });

My Xml

<list>
<com.abc.db.ConfigInfo>
<cfgId>83</cfgId>
<cfgName>test</cfgName>
<cfgDesc>test</cfgDesc>
<cfgType>test</cfgType>
<fileName>csmclientbenz.xml</fileName>
<absolutePath>../webapps/csm/files//1-105101/csmclientbenz.xml</absolutePath>
<emailAddress>[email protected]</emailAddress>
<projectId>1-105101</projectId>
<hostname>benz</hostname>
<createDate>2011-06-15 15:29:55.0 IST</createDate>
<updateDate>2011-06-15 15:29:55.0 IST</updateDate>
<state>1</state>
<productId>1</productId>
</com.abc.db.ConfigInfo>
<com.abc.db.ConfigInfo>
<cfgId>102</cfgId>
<cfgName>cfgname1</cfgName>
<cfgDesc>test</cfgDesc>
<cfgType>test</cfgType>
<fileName>csmclientestilo.xml</fileName>
<absolutePath>../webapps/csm/files//1-105101/csmclientestilo.xml</absolutePath>
<emailAddress>[email protected]</emailAddress>
<projectId>1-105101</projectId>
<hostname>estilo</hostname>
<createDate>2011-06-20 18:26:03.0 IST</createDate>
<updateDate>2011-06-20 18:26:03.0 IST</updateDate>
<state>1</state>
<productId>1</productId>
</com.abc.db.ConfigInfo>
</list>

My jqGrid code

var xmlDoc = $.parseXML(xml); 
         $('#configDiv').empty();
            $('<div width="100%">')
            .attr('id','configDetailsGrid')
            .html('<table id="list1" width="100%"></table>'+
                    '<div id="gridpager"></div>'+
                '</div>')       
            .appendTo('#configDiv');    

            var grid = jQuery("#list1");

            grid.jqGrid({

              datastr : xml,
              datatype: 'xmlstring',
              colNames:['cfgId','','Name', 'Host', 'Description','Product', 'Type', 'Last Updated Time','Last Updated By',''],
              colModel:[
                  {name:'cfgId',index:'cfgId', width:90, align:"right", hidden:true},
                  {name:'',index:'', width:15, align:"right",edittype:'checkbox',formatter: "checkbox",editoptions: { value:"True:False"},editable:true,formatoptions: {disabled : false}},
                  {name:'cfgName',index:'cfgName', width:90, align:"right"},
                  {name:'hostname',index:'hostname', width:90, align:"right"},
                  {name:'cfgDesc',index:'cfgDesc', width:90, align:"right"},
                  {name:'productId',index:'productId', width:60, align:"right"},
                  {name:'cfgType',index:'cfgType', width:60, align:"right"},
                  {name:'updateDate',index:'updateDate',sorttype:'Date', width:120, align:"right"},
                  {name:'emailAddress',index:'emailAddress', width:120, align:"right"},
                  {name:'absolutePath',index:'absolutePath', width:90, align:"right", hidden:true},
              ],
              pager : '#gridpager',
              rowNum:10,
              scrollOffset:0,
              height: 'auto',

              autowidth:true,
              viewrecords: true,
              gridview: true,
              xmlReader: {
                  root : "list",
                  row: "com\\.abc\\.db\\.ConfigInfo",
                  userdata: "userdata",
                  repeatitems: false
              },
              onSelectRow: function(id,status){
                  var rowData = jQuery(this).getRowData(id); 
                  configid = rowData['cfgId'];
                  configname=rowData['cfgName'];
                  configdesc=rowData['cfgDesc'];
                  configenv=rowData['cfgType'];

                  if(status==true)
                  {

                  }

                  rowChecked=1;
                  currentrow=id;
                  },
              onCellSelect: function(rowid, index, contents, event) {
                  if(index==2)
                  {

                        $(xmlDoc).find('list com\\.abc\\.db\\.ConfigInfo').each(function()
                        {
                            //alert($(this).find('cfgId').text()+" "+configid);
                            if($(this).find('cfgId').text()==configid)  
                            {
                                configname=$(this).find('cfgName').text(); 
                                configdesc=$(this).find('cfgDesc').text();
                                configenv=$(this).find('cfgType').text();
                                filename=$(this).find('fileName').text();
                                updatedate=$(this).find('updateDate').text();
                                absolutepath=$(this).find('absolutePath').text();
                                productname=productMap[$(this).find('productId').text()];
                            }
                        });

                  }
               }

            });
            grid.jqGrid('navGrid','#gridpager',{edit:false,add:false,del:false});

This is what i get the output as. My question: How to replace an xml's node value?

enter image description here

Updated with my solution

I used xml=xml.replace(/<productId>1/g, "<productId>"+productMap['1']); by adding a /g it replaced all my string occurances.

So the problem is that you changed the text but somehow it does not seem to be persistent? What is xml? — Felix Kling
– Felix Kling, Commented Jun 24, 2011 at 9:09

Felix Kling · Accepted Answer · 2011-06-24 10:16:33Z

2

I assume xml is a string. jQuery does not change the string, it only changes the DOM representation it created by parsing it. Every time you pass the string to jQuery, it parses it anew.

You need to keep a reference to the object jQuery creates:

var $xml = $(xml);
// now change it using $xml

If you want to "serialize" the data again, you have two possibilties:

Either use the outerHTML plugin: xml = $xml.outerHTML();
Or append the whole XML to some dummy element
```
var $xml = $('<dummy />').append(xml);
```
and use xml = $xml.html(); later.

DEMO

You can also append it, after you did the processing so that this additional element does not brake your current selectors.

Update:

I just saw that jQuery also offers $.parseXML since version 1.5. This might be helpful too.

edited Jun 24, 2011 at 10:16

answered Jun 24, 2011 at 9:11

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

2 Comments

AabinGunz Over a year ago

it works here, but down the line i am using xml in a jqGrid datasource, which gets affected, and does not display the grid contents at all

AabinGunz Over a year ago

or I can simply use xml=xml.replace(/<productId>1/g, "<productId>"+productMap['1']); Thanks it solved my problem

Collectives™ on Stack Overflow

How to replace xml node value in jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related