Configure xeditable locally

Question

Im trying to implement inline edit for my tables in my angular/react project.I cant understand exactly how I should make my changes in my local array defined in my component state ??? Im not using any database or server...and all of the examples are with db.. Can someone help ? Here's my component..

var DiaryTable = React.createClass({displayName: "DiaryTable",
    getInitialState: function() {
        return {
            items : this.props.item,
            globalChecked:false
        };
    },
    handleAddElement(element) {
        if(this.state.globalChecked)
        {
            element.selected = this.state.globalChecked;
        }
        this.state.items.push(element);
        this.setState(this.state.items);
    },
    handleEditElement(element,index){
        if(this.state.items[index].selected)
        {
            element.selected = this.state.items[index].selected;
        }
        this.state.items[index] = element;
        this.setState(this.state.items);
    },
    handleChecked : function (i) {
        this.state.items[i].selected =  !this.state.items[i].selected;
        this.setState(this.state.items);
    },
    checkAll:function () {
        this.state.globalChecked = !this.state.globalChecked;
        this.setState({globalChecked:this.state.globalChecked});
        var ifChecked = this.state.globalChecked;
        this.state.items = this.state.items.map(function(element) {
            return { start: element.start,end:element.end,hours:element.hours,selected: ifChecked };
        });
        this.setState({items:this.state.items});
    },
    remove : function () {
        for(var i = 0;i<this.state.items.length;i++)
        {
            if(this.state.items[i].selected)
            {
               this.state.items.splice(i,1);
                i--;
            }
        }
        this.setState(this.state.items);
    },
    setResult:function () {
        this.state.items.length = 0;
        if(this.state.globalChecked)
        {
            for(var i=0;i<this.props.result.item.length;i++){
                this.state.items[i] = {start:this.props.result.item[i].start,end:this.props.result.item[i].end,hours:this.props.result.item[i].hours,selected:true};
            }
            this.setState(this.state.items);
        }
        else {
            for(var i=0;i<this.props.result.item.length;i++){
                this.state.items[i] = {start:this.props.result.item[i].start,end:this.props.result.item[i].end,hours:this.props.result.item[i].hours};
            }
            this.setState(this.state.items);
        }
    },
    render: function(){
        var that = this;
        $(document).ready(function(that) {
            $.fn.editable.defaults.mode = 'inline';
            $.fn.editableform.buttons = '<button type="submit" class="btn btn-info editable-submit"><i class="ace-icon fa fa-check"></i></button>'+
                '<button type="button" class="btn editable-cancel"><i class="ace-icon fa fa-times"></i></button>';
            var wtf = $('#hoursInput').editable({
            type:'number',
                url: '/post',
                inputclass: 'some_class',
                pk:$("#hoursInput")[0].attributes[1].value,
                success: function(response, newValue) {
                    ////HOW SHOULD I ACCESS MY PK ? IS THERE A BETTER WAY TO ASSIGN PK VALUE THAN $("#hoursInput")[0].attributes[1].value
                    //HOW SHOULD I MADE MY CHANGES IN THIS.STATE.ITEMS ?? CURRENTLY I DONT HAVE ACCESS TO IT!
                }
            });
        });

        $(document).on('click','.editable-submit',function(e,editable,params,data) {
            // this.state.items[$("#hoursInput")[0].attributes[1].value].hours = newValue;
            // console.log(this.state.items[$("#hoursInput")[0].attributes[1].value]);
            // this.setState(this.state.items);
        }.bind(this));

        var arrayItems =  this.state.items.map(function (item,i) {
            return (
                <tr key={i}>
                    <td><input type="checkbox"  checked={item.selected} onClick={this.handleChecked.bind(this,i)}/></td>
                    <td><FormattedDate value={item.start}/></td>
                    <td><FormattedDate value={item.end}/></td>
                    <td id="hoursInput" data-param={i} className={i}>{item.hours}</td>
                    <td>
                        <ModalEditElement items={this.state.items} onEditElement={this.handleEditElement} index={i} checked={this.state.globalChecked} ></ModalEditElement>
                    </td>
                </tr>
            );
        }.bind(this));

        return (
            <table className="myTable">
                <thead>
                <tr>
                    <th><input type="checkbox" onClick={this.checkAll}/></th>
                    <th>Start Date:</th>
                    <th>End Date:</th>
                    <th id="hoursField">Hours:</th>
                    <th id="editField">Edit:</th>
                </tr>
                </thead>
                <tbody>
                {arrayItems}
                </tbody>
                <tfoot>
                <tr>
                    <td colSpan="4">
                        <span className="addButtonDisplay"><ModalAddElement onAddElement={this.handleAddElement} items={this.state.items} checked={this.state.globalChecked}></ModalAddElement></span>
                        <button className="myButton" onClick={this.remove}>Remove period</button>
                        <button className="myButton" disabled={this.props.result.item.length === 0} onClick={this.setResult}>Set result from merge</button>
                    </td>
                </tr>
                </tfoot>
            </table>
        );
    }
 });

score 1 · Answer 1 · edited May 23 '17 at 12:00

May be you still need it, I just was looking for a solution for both of your questions and found this:

To get pk inside success callback I use inside 'success' callback:

const something = $(this).data('pk');

EDIT (since i cannot add comments i have edited my answer): I am setting pk when rendering row element, like this:

items.map(item => (
    <tr key={ item.id }>
      <td>
        <p id="itemQuantity" data-pk={ item.pk } className="editable" ... ></p>
      </td>
    ...
))

As you can see am setting pk attribute directly when rendering, not on $(document).ready. In matter of fact, not sure if your way could work.

Cannot remember where I fount it, but works. And to set state success callback should be written like this:

success: (response, newValue) => {
            this.setState({item: newValue});
        }

Instead of:

success: function(response, newValue) {
        ...
        }

And the original answer is here

Hope it helps.

Configure xeditable locally

1 Answers1