Uncaught TypeError: undefined is not a function, while sort columns after updated the data through TableDataSet about react-bootstrap-table HOT 19 CLOSED

Hi @sridharAJ, it seems to be a bug, I will fix it in these day. Thanks for your contributions

from react-bootstrap-table.

hi @AllenFang thanks for your quick reply. when you can fix this bug. because this blocker for me. i cannot able to continue development without this fix.

from react-bootstrap-table.

👍 I will do my best for this issue, but I'm pretty busy lately :).

So if this problem is easy to fix, I'll fix it in this week or event in these day, if not, maybe next week :)

from react-bootstrap-table.

thanks you very much :) @AllenFang

from react-bootstrap-table.

Hi @sridharAJ

I've release v0.8.3 for fixing this bug, please update and run again:)

from react-bootstrap-table.

Hi @AllenFang thanks you very much!!! its working!!!

from react-bootstrap-table.

Hi @AllenFang for the same above case Row Selection also throwing the same error, so can you please reopening this issue.

The below is my error:
Uncaught TypeError: undefined is not a function.

from react-bootstrap-table.

Hi @sridharAJ, thanks for your testing, I will fix this issue in these days.

from react-bootstrap-table.

Hi @sridharAJ
I've release v0.8.4 for fixing this bug, please update and run again:)

from react-bootstrap-table.

Hi @AllenFang thanks you very much!!! its working!!!

from react-bootstrap-table.

Hi @AllenFang ,
I am going through the code but after npm install react-bootstrap-table --save
I got the relative library but how can I implement, could you please help me.Really frustrated for this.

In case of me it showing "ReferenceError: require is not defined"

I will implement within a modal popup

from react-bootstrap-table.

HI @ranjan653 your error message seem like a problem for node. What tool you use for module bundling? (Browserify or Webpack?), and did you write a simple react application successful?

from react-bootstrap-table.

Project Structure

My JSX file

/** @jsx React.DOM */
var columns;
var test=[];
var scenariolist_data=[];
var scenariolist_data2=[];
var Panel = ReactBootstrap.Panel;
var Input = ReactBootstrap.Input;
var Nav = ReactBootstrap.Nav;
var NavItem = ReactBootstrap.NavItem;
var TabbedArea = ReactBootstrap.TabbedArea;
var TabPane = ReactBootstrap.TabPane;
var Modal = ReactBootstrap.Modal;
var Table = ReactBootstrap.Table;
var ws = null;
var CONFIG = {
sort: { column: "EFF_DT", order: "asc" }
};

var Scenario = React.createClass( {
//connect to Reflux. fleetingScenDataParm will contain value passed via trigger() method (in store.js)
mixins: [Reflux.connect(fleetingStore,"fleetingScenDataParm")],

getInitialState() {
return {smShow: false,key:'',deletepop:false,copypopup:false,constraintopn:false,uid:this.props.uid,tableFormat:false };
},
handleSelectTab(key) {

this.setState({keyTab:key,key:key,tableFormat:false});

},
handleSelect(key) {
this.setState({key});
},

changeName: function(e) {
fleetingUIActions.putItem("ROUTING_CASE_NAME",e.target.value);
},

changeEffDt: function(e) {
fleetingUIActions.putItem("SCHEDULE_EFF_DATE",e.target.value);
},
changeDisDt: function(e) {
fleetingUIActions.putItem("SCHEDULE_DIS_DATE",e.target.value);
},
changeRunStart: function(e) {
fleetingUIActions.putItem("RUN_START_DATE",e.target.value);
},
changeRunEnd: function(e) {
fleetingUIActions.putItem("RUN_END_DATE",e.target.value);
},

changeDescription: function(e) {
fleetingUIActions.putItem("ROUTING_CASE_DESCRIPTION",e.target.value);
},
changeSchdlName: function(e) {
fleetingUIActions.putItem("ROUTING_SCHED_NAME",e.target.value);
},
changeSchdlVersion: function(e) {
fleetingUIActions.putItem("ROUTING_SCHED_VERSION",e.target.value);
},

changeSubfleet: function(e) {
fleetingUIActions.putItem("SCHEDULE_SUBFLEET",e.target.value);
},

changeMode: function(e) {
fleetingUIActions.putItem("ROUTING_TYPE",e.target.value);
},
componentDidMount: function() {

$('.input-daterange').datepicker({ 
    todayBtn: "linked",
    autoclose: true,
    todayHighlight: true,
    daysOfWeekDisabled: "0",
    format: "ddMyy",

}).on("changeDate", function(e) {
    //store date fields into temporary variables first
    //update reflux store, using temporary variables
    //issue if try to update directly from document.getElementById()       
    var tmpEfDate=document.getElementById('sEfDate').value;
    var tmpDisDate=document.getElementById('sDisDate').value;
    var tmpStartDate=document.getElementById('sStartDate').value;
    var tmpRunEndDate=document.getElementById('sRunEndDate').value;

    fleetingUIActions.putItem("SCHEDULE_EFF_DATE",tmpEfDate);
    fleetingUIActions.putItem("SCHEDULE_DIS_DATE",tmpDisDate);
    fleetingUIActions.putItem("RUN_START_DATE",tmpStartDate);
    fleetingUIActions.putItem("RUN_END_DATE",tmpRunEndDate);

}.bind(this));
},

componentWillMount:function(e) {
this.returnajaxcall();
},

render: function() {
var dataFromLocalStorage=this.getDataFromLocalStorage();
return (

 <div className="line2">&nbsp;</div> 

        <Input type='text'  id="sName" label='Scenario Name:'  value={dataFromLocalStorage.ROUTING_CASE_NAME}  onChange={this.changeName}/>
        <Input type='text'  label='Scenario Description:'  value={dataFromLocalStorage.ROUTING_CASE_DESCRIPTION}       onChange={this.changeDescription}/>
        <Input type='text'  label='Schedule Name:' value={dataFromLocalStorage.ROUTING_SCHED_NAME} onChange={this.changeSchdlName}/>
        <Input type='text'  label='Schedule Version:'  value={dataFromLocalStorage.ROUTING_SCHED_VERSION}    onChange={this.changeSchdlVersion}/>
        <div className="input-daterange">
            <Input type='text' id="sEfDate" label='Effective Date:' value={dataFromLocalStorage.SCHEDULE_EFF_DATE} />
            <Input type='text' id="sDisDate" label='Discontinue Date:' value={dataFromLocalStorage.SCHEDULE_DIS_DATE} />
        </div>
         <Input type='text'  label='Subfleet:'  value={dataFromLocalStorage.SCHEDULE_SUBFLEET}     onChange={this.changeSubfleet}/>
        <div className="input-daterange">
            <Input type='text' id="sStartDate" label='Run Start Date:' value={dataFromLocalStorage.RUN_START_DATE}   />
            <Input type='text' id="sRunEndDate" label='Run End Date:'  value={dataFromLocalStorage.RUN_END_DATE}  />
        </div>
        <Input type='text'  label='Mode:'  value={dataFromLocalStorage.ROUTING_TYPE}    onChange={this.changeMode}/>
        <Input type='hidden'   id="hdnVal"    readOnly="readOnly" />
        <div className="center">
            <button type="submit" className="btn btn-primary " >{'SAVE'}</button><div className="result"> { this.state.message }</div>
            <button type="button" className="btn btn-primary " onClick={this.startModel} >{'RUN'}</button>
        </div>
    </form>
    <MySmallModal show={this.state.smShow} onHide={this.smClose}  parentCall={this.reTurnData}/>
    
</TabPane>

)
}
});

//This is for scenario list modal popup

const MySmallModal = React.createClass({

handleSubmit: function(e) {
this.props.parentCall();
},
render() {

return (
 <Modal {...this.props} bsSize='medium' aria-labelledby='contained-modal-title-sm' id='myModal' animation={true}>
        <Modal.Header >
         <div>
          <div><span className="fontCss">Scenario List </span><div className="result"> <a className="close" onClick={this.props.onHide} title="Close">×</a> </div> </div>
        </div>
        </Modal.Header>
    <Modal.Body>
        <form id="myForm" >

                <Table striped bordered condensed hover >
                     <thead>
                        <th>&nbsp;</th>
                        <th>Scenario Name</th>
                        <th>Modified Date</th>
                     </thead>   
                     <List/>

            </Table>
            <Modal.Footer>
                <button onClick={this.props.onHide}  className="btn btn-primary" title="Cancel">{'Cancel'}</button>  <button type="button" className="btn btn-primary " onClick={this.handleSubmit} title="OK">{'OK'}</button> 
            </Modal.Footer>
        </form>
    </Modal.Body>

 </Modal>
);

}
});

var List = React.createClass({
render: function() {

var rows=[];
    scenariolist_data.forEach(function(caselist) {
    rows.push(<tr id={caselist.name} >
                <td><input type='radio'  name="rd" value={caselist.name}/></td>
                <td >{caselist.name}</td>
                <td>{caselist.modifiedDate}</td>
            </tr>)
    });

    return (
        <tbody >{rows}</tbody>
    );
}

});

from react-bootstrap-table.

For boot strap table the bootstrap table structure

from react-bootstrap-table.

Sir @AllenFang , My question how i will implement

var React = require('react');
var Router = require('react-router');
var ReactBsTable = require('react-bootstrap-table');
var BootstrapTable = ReactBsTable.BootstrapTable;
var TableHeaderColumn = ReactBsTable.TableHeaderColumn;

In my jsx file
First I did npm install react-bootstrap-table --save

Download all library...Next--> ?

Otherwise simple import library like jquery or javascript file import

from react-bootstrap-table.

My Page Library

<script src="DatePicker/datepicker-ui.js"></script>
<script src="bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-datepicker/css/bootstrap-datepicker3.css">
<script src="js/bootstrap.js"></script>
<script src="js/bower_components/react/react-with-addons.js"></script>
<script src="js/bower_components/react/JSXTransformer.js"></script>
<script src="js/bower_components/react-bootstrap/react-bootstrap.min.js"></script>
<script type="text/jsx" src="components/data.js"> </script> 
<link rel="stylesheet" href="css/screen.css">
<script src="js/lodash.min.js"></script>    
<script src="js/bower_components/reflux/dist/reflux.js"></script>

from react-bootstrap-table.

Hi i am using webpack

from react-bootstrap-table.

Hi @ranjan653 , after you install ract-bootstrap-table, you dont include the react-bootstrap.min.js, and ensure using webpack to build your application successfully

from react-bootstrap-table.

Yes that's fine but what should write instead of require("react-bootstrap-table");

On Wed, Sep 9, 2015 at 5:48 PM, AllenFang [email protected] wrote:

Hi @ranjan653 https://github.com/ranjan653 , after you install
ract-bootstrap-table, you dont include the react-bootstrap.min.js, and
ensure using webpack to build your application successfully

—
Reply to this email directly or view it on GitHub
#10 (comment)
.

from react-bootstrap-table.