jQuery UI Widgets Forums Plugins Data Adapter how to use dataAadaptor on event on-change of jqxInput

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 8 years, 7 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • mac_shuzo
    Participant

    Hi,
    we would like to know how to use dataAadaptor on event on-change of jqxInput.
    Required steps of procedure are as next. 1. key-in key value to jqxInput 2. At on change, get JSON from outside data 3. show record data to identified columns
    we tried to make code as below however it seems not worked on dataAdaptor proc.
    pls kindly let us know how to do it.

    $(document).ready(function () {
    var keyValue;

    var source ={
    datatype: “json”,
    datafields: [
    { name: ‘RONo’ },
    { name: ‘LineNo’ },
    { name: ‘ItemNo’ },
    { name: ‘ItemDesc’ },
    { name: ‘ItemSpec’ },
    { name: ‘PONo’ },
    { name: ‘VenderName’ },
    { name: ‘ReqOHDate’, type: ‘date’ },
    { name: ‘POQty’, type: ‘float’ }
    ],
    // url: ‘getPODetail.php?refNo=’ + keyValue
    url: ‘getPO3.php’
    };

    $(“#input2”).jqxInput({ height: 25, width: 200, minLength: 1 });
    $(‘#input2’).jqxInput(‘focus’);
    $(“#jqxbutton”).jqxButton({ theme: ‘energyblue’, width: 100, height: 30 });

    // bind to ‘change’ event.
    $(‘#input2’).on(‘change’, function (event) {
    keyValue = $(‘#input2’).val();
    $(‘#refNo’).text(keyValue);
    var dataAdapter = new $.jqx.dataAdapter(source, {
    loadComplete: function (records) {
    var records = dataAdapter.records;
    var rec = records[0];
    $(‘#refNo’).text(rec.RONo);
    }
    });
    dataAdapter.dataBind();
    });

    $(“#jqxbutton”).click(function () {
    alert(‘Hello test’);
    });
    });

    </script>
    <form id=”basicForm”>
    <table class=”register-table” border=”1″cellpadding=”10″>
    <tr>
    <td colspan=”2″ align=”center” bgcolor=”#b0c4de”><br><font color=”#191970″><b>入庫登録<br></b></font><br></td>
    </tr>
    <tr>
    <td><b>QRコード:</b></td>
    <td>
    <input type=”text” id=”input2″ class=”text-input” />
    </td>
    </tr>
    <tr>
    <td><b>Ref#:</b></td>
    <td id=”refNo”></td>
    </tr>
    </table>
    </form>


    Peter Stoev
    Keymaster

    Hi,

    Here is a demo: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxinput/bindingtojson.htm?arctic which demonstrates how to use jqxDataAdapter with jqxInput.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.