Twitter Bootstrap Question posted in

SelectBoxIt & ReactJS support needed-Twitter bootstrap

SelectBoxIt allows you to replace ugly and hard-to-use HTML select boxes with gorgeous and feature rich drop downs.

I implemented the SelectBoxIt and the <select> inside my render(return()) method didn’t recognize it.
I searched the web and found almost only one source on Github that I didn’t understand its recommendation, you can help me on this point.

In brief, I concluded that SelectBoxIt naturally doesn’t support ReactJS.

Hence we need a solution or trick for that.

Below is sample code from their website and used it completely in my project:

        <!doctype html>
    <html>
    <head>
      <meta charset=utf-8>
      <title>SelectBoxIt demo</title>
      <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" />
      <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" />
      <link type="text/css" rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
      <link rel="stylesheet" href="http://gregfranko.com/jquery.selectBoxIt.js/css/jquery.selectBoxIt.css" />
    </head>
    <body>

      <select name="test">
        <option value="SelectBoxIt is:">SelectBoxIt is:</option>
        <option value="a jQuery Plugin">a jQuery Plugin</option>
        <option value="a Select Box Replacement">a Select Box Replacement</option>
        <option value="a Stateful UI Widget">a Stateful UI Widget</option>
      </select>

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
      <script src="http://gregfranko.com/jquery.selectBoxIt.js/js/jquery.selectBoxIt.min.js"></script>
      <script>
        $(function() {

          var selectBox = $("select").selectBoxIt();

        });
      </script>
    </body>
    </html>

The following select was not affected:

<select 
                id="sel1" 
                // ref={s => { this.selectBox = s; }}
                onChange={ event => this.onSelectChange(event.target.value) }
                >
                {options}
            </select>

The <select name="test"> has worked when put it inside render(return()) but the <select id="sel1" > inside render(return()) has not been changed to be a SelectBoxIt shape. Note that I commented the ref={s => { this.selectBox = s; }} just to prevent the error to display.

Tags:

2

Answers


  1. 0

    Since this is a jquery plugin, you need to make sure to have it installed:

    npm install -S jquery

    Then you need to import this in your script :

    import * as $ from 'jquery';

    Now in your react component, apply the jquery initialization in componentDidMount. The only catch is that you need to use ref to find the node.

    render() {
  return <select ref={s => { this.selectBox = s; }} />
}

componentDidMount() {
  $(this.selectBox).selectBoxIt();
}

    Some reference here.

    Login or Signup to reply.
  2. 0

    I found that reactJS didn’t “catch” onChange of the select that is replaced with SelectBoxIt but it “catch” onClick. So for one project that use SelectBoxIt + ReactJS I’ve made onClick trigger from jQuery when select value is changed combined with react onChange event.

    In script tag /index.html/:

    $("select").on('change',function(){
      $("select").trigger('click');
});

    In reactJS /SelectBox.js/:

    onClickHandled that check if value is changed.

    Example here: https://github.com/gshishkov/selectBoxIt-reactjs

    I know it is not very elegant solution, but it was fastest and working one.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search