Saving changes to the server: Ext

[msincuba]

Hi Guys,

I am retrieving info from mysql db, but when i change that info and save to db, it does not save. I think it uses the original DataStore instead of using the changed 1.

Here is the code:

var EditDocumentIntroductionUI = function() {
  // private variables
  var ds;
  var form;
  var iconPath = '../images/icons/';

  // Function: Setup the datasource
  function setupDataSource() {
    ds = new Ext.data.Store({
      proxy:
        new Ext.data.HttpProxy({url:'loadDocumentIntroduction.ajax'}),
      reader:
        new Ext.data.JsonReader(
          {root: 'data', totalProperty: 'totalCount', id: 'id'},
          [
            {name: 'id', mapping: 'id'},
            {name: 'optLock', mapping: 'optLock'},
            {name: 'section', mapping: 'section'},
            {name: 'content', mapping: 'content'},
          ]
        )
    })
   
    ds.load();
  };

 

  // Function: Create the Form and Form Elements
  function buildForm() {

    //Create Form
    var documentForm = new Ext.form.Form({
        labelAlign: 'right',
        labelWidth: 75,
    });
 
 
    var content_field = new Ext.form.HtmlEditor({
            id: 'content',
            fieldLabel:'Introduction',
            width:600,
            height:500
    });
    
    // Add fields to Fieldset    
    documentForm.fieldset(
    {legend:''},
    content_field
    )
    
    documentForm.addButton('Save Changes', function() 
      {                   
          
          var jsonData = "{data:[";
          var record = ds.getAt(0);
          jsonData += Ext.util.JSON.encode(record.data) + ",";
          jsonData = jsonData.substring(0,jsonData.length-1) + "]}";
          
          documentForm.submit({
            waitMsg: 'Saving changes, please wait...',
              url:'saveDocument.ajax',
              params:{data:jsonData},
              content:content,
              newRecord:false,
              success:function(form, action) {
                alert(" Document saved");
            }, failure: function(form, action) {
              alert('Error: Save failed!');
            }
          });
         
        }
    );

    //Function: Load Data and Render form
    ds.on('load', function(){
      
      content_field.setValue(ds.getAt(0).data.content);
      documentForm.render('document');
    });
  };
  
  
    // public methods
  return {
    init: function() {
      Ext.QuickTips.init();
      Ext.apply(Ext.QuickTips, {interceptTitles: true});
      setupDataSource();
      buildForm();
    },
    getDataSource: function() {
      return ds;
    }
  }
}();  

Ext.onReady(EditDocumentIntroductionUI.init, EditDocumentIntroductionUI, true);

[BernardChhun]

there's a bunch of things to check out here.

do you see the call being made in firebug's console?
what is the response body that the server sends back?
does the "saveDocument.ajax" url treats the GET/POST data appropriately?

[msincuba]

there's a bunch of things to check out here.

do you see the call being made in firebug's console?
what is the response body that the server sends back?
does the "saveDocument.ajax" url treats the GET/POST data appropriately?

\



To Ans ur questions
1. Firebug does not pop up or show anything unless i click on it.
2. Server sends the data to the page as expected.
3. Im not sure but I can see the same data that I sent to the page with no change after saving. "saveDocument.ajax" is actually the name given to the controller that does the save.

[BernardChhun]

those questions were meant to lead you into looking in this problem using the tools you have at hand

please take a look at the attachment.

thats what I meant with firebug logging a XHR call. you see that black colored url right?
look under that url and you will see 2 important tabs : Post or Get & Response

Post or Get contains the parameters you've sended.
Response contains the answer the controller has given back.

make sure these 2 are correct for both client and server side. If the problem is not there then it's usually the server side's fault.

can you describe the steps you are taking to save the data to the DB? Your javascript looks ok to me so the problem is somewhere else I believe.

[msincuba]

those questions were meant to lead you into looking in this problem using the tools you have at hand

please take a look at the attachment.

thats what I meant with firebug logging a XHR call. you see that black colored url right?
look under that url and you will see 2 important tabs : Post or Get & Response

Post or Get contains the parameters you've sended.
Response contains the answer the controller has given back.

make sure these 2 are correct for both client and server side. If the problem is not there then it's usually the server side's fault.

can you describe the steps you are taking to save the data to the DB? Your javascript looks ok to me so the problem is somewhere else I believe.

Thanks a lot BernardChhun. I got what u meant and the post i got is:

{
content: 1.dfdfdf Introduction South department

data: {data:[{"id":1,"optLock":3,"section":"Introduction","content":"1. Introduction\r\n\r\nSouth ... department.\r\n"}]}

}

if u luk at parameter content and data, u find that content in data parameter is not updated with content in content pareameter.

and response is:
{

{"data":[{"section":"Introduction","content":"1. Introduction\r\n\r\nSouth...
department.\r\n","optLock":3,"id":1}],"totalCount":1}

}

[msincuba]

Thanks a lot BernardChhun. I got what u meant and the post i got is:

{
content: 1.dfdfdf Introduction South department

data: {data:[{"id":1,"optLock":3,"section":"Introduction","content":"1. Introduction\r\n\r\nSouth ... department.\r\n"}]}

}

if u luk at parameter content and data, u find that content in data parameter is not updated with content in content pareameter.

and response is:
{

{"data":[{"section":"Introduction","content":"1. Introduction\r\n\r\nSouth...
department.\r\n","optLock":3,"id":1}],"totalCount":1}

}

Once again thanks BernardChhun. Eventually it worked. I added the following to JS:

var id_value = ds.getAt(0).data.id;
var optLock_value = ds.getAt(0).data.optLock;
var section_value = ds.getAt(0).data.section;
var content_value = Ext.util.JSON.encode(document.getElementById("content").value);

var jsonData = "{data:[{\"id\":" + id_value + ",";
jsonData += "\"optLock\":" + optLock_value + ",";
jsonData += "\"section\":\"" + section_value + "\",";
jsonData += "\"content\": " + content_value + ",}]}";

By this way I used content from the screen and not from DataStore.