Change XML value with html

Question

This question has been asked more then once, but somehow I don't get things to work. I am struggling with this problem for some hours now already.

I got a xml file:

<?xml version="1.0" encoding="iso-8859-1"?>
<news>
   <field id="nettooppervlakte1">

           <name>Opp. netto</name>
           <content>970</content>
           <background>1</background>

   </field>
   <field id="nettooppervlakte2">

           <name>Ras 1</name>
           <content>Euro sunny</content>
           <background>1</background>

   </field>
   <field id="nettooppervlakte3">

           <name>Plantdichtheid 1 (st/m²)</name>
           <content>45</content>
           <background>1</background>

   </field>
</news>

xml file is bigger, but no need to post the whole file (got more fields).

Then I use this in html (script) to get the info:

$(document).ready(function(){
        var id = 0;
    $.ajax({
    type: "GET",
    url:"http://www.officespecialisten.it/wesleyfloor/table.xml",
    dataType: "xml",
    success: function(xml) {

    $(xml).find('field').each(function(){
    var name = $(this).find('name').text();
    var content = $(this).find('content').text();
    var days = $(this).find('days').text();
    var day = $(this).find('day').text();
    var week = $(this).find('week').text();
    var year = $(this).find('year').text();

   $('<div class="items" id="link_'+"nettooppervlakte"+id+'"></div>'+id++).html(name+'</a>').appendTo('#'+id+'name');
    $('<div class="items" id="link_'+"nettooppervlakte"+id+'"></div>').html(content+'</a>').appendTo('#'+id+'content');
     $('<div class="items" id="link_'+"nettooppervlakte"+id+'"></div>').html(days+'</a>').appendTo('#'+id+'days');
      $('<div class="items" id="link_'+"nettooppervlakte"+id+'"></div>').html(day+'</a>').appendTo('#'+id+'day');
       $('<div class="items" id="link_'+"nettooppervlakte"+id+'"></div>').html(week+'</a>').appendTo('#'+id+'week');
        $('<div class="items" id="link_'+"nettooppervlakte"+id+'"></div>').html(year+'</a>').appendTo('#'+id+'year');

            });

            }
   });
});

and this to put it into a table (html):

<tr>
    <td colspan="2"  bgcolor="#ade500"><div id="1name"></div></td>
    <td colspan="2" bgcolor="#ade500"><div id="1content"></td>
</tr>
<tr>
     <td colspan="2" bgcolor="#ade500"><div id="2name"></div></td>
     <td width="2" bgcolor="#ffffcc"><div id="2content"> </td>


 </tr>
 <tr>
     <td colspan="2" bgcolor="#ade500"><div id="3name"></div></td>
     <td colspan="2" bgcolor="#ffffcc" ><div id="3content"></div></td>
 </tr>

And now the problem, I want that the user can change (with a input box or something) the value of (for example) "3content":

<td colspan="2" bgcolor="#ffffcc" ><div id="3content"></div></td>

what is this xml line:

<content>45</content>

Can this be done easily? Because I have seen/tried some codes (didn't try them all) that are pages long, to change 1 XML value, what I think it shouldn't be that much of a problem.

I am at the very beginning of HTML/XML. I used to do android Java, actionscript3, c++ (mostly with CML library). And also my first real website that I make.

If you need to know more things or explanation of something, just ask.

Already thanks for your patience,

Bigflow

Answer 1

You need to monitor the click event and place a form with an input in place. Rather than doing the code yourself there are many plugins available (Search "jquery inline editing"). Here is a popular one: Jeditable