This topic contains 3 replies, has 3 voices, and was last updated by  admin 9 years, 2 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • jqxInput doesn't return value #69177

    cpuin
    Participant

    I have

    
    						var url = "json_partners.php";
    						                // prepare the data
    						var companies =
    						                {
    						                    datatype: "json",
    						                    datafields: [
    						                    	{ name: 'ID' },
    						                        { name: 'Bulstat' },
    						                        { name: 'Company' }
    						                    ],
    						                    url: url
    						                };
    						var dataAdapter = new $.jqx.dataAdapter(companies);
    						$("#company").jqxInput({placeHolder: "Избери партньор", displayMember: "Company", valueMember: "ID", height: 25, width: 300, minLength: 1,  source: dataAdapter});
    .....
    

    and want to get the value of the selected item, but insted of returning ID, it retuns an object.

    
    $("#company").val();
    
    jqxInput doesn't return value #69183

    Nadezhda
    Participant

    Hello cpuin,

    Here is an example which shows how to get the value of selected item:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title></title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    
    </head>
    <body>
        <div id='content'>
            <script type="text/javascript">
                $(document).ready(function () {
                    var url = "../sampledata/customers.txt";
    
                    // prepare the data
                    var source =
                    {
                        datatype: "json",
                        datafields: [
                            { name: 'CompanyName' },
                            { name: 'ContactName' }
                        ],
                        url: url
                    };
                    var dataAdapter = new $.jqx.dataAdapter(source);
    
                    // Create a jqxInput
                    $("#jqxInput").jqxInput({ source: dataAdapter, placeHolder: "Contact Name:", displayMember: "ContactName", valueMember: "CompanyName", width: 200, height: 25 });
                    $("#jqxInput").on('select', function (event) {
                        if (event.args) {
                            var item = event.args.item;
                            if (item) {
                                var valueelement = $("<div></div>");
                                valueelement.text("Value: " + item.value);
                                var labelelement = $("<div></div>");
                                labelelement.text("Label: " + item.label);
    
                                $("#selectionlog").children().remove();
                                $("#selectionlog").append(labelelement);
                                $("#selectionlog").append(valueelement);
                            }
                        }
                    });
                    $("#jqxButton").jqxButton({
                        height: '30px',
                        width: '120px',
                    });
                    $('#jqxButton').on('click', function () {
                        var input = $('#jqxInput').jqxInput('val');
                        alert(input.value);
                    });
                });
            </script>
            <input id="jqxInput" />
            <br />
            <label style="font-family: Verdana; font-size: 10px;">ex: Ana</label>
            <div>
                <input style="margin-top: 20px;" type="button" id='jqxButton' value="Get value" />
            </div>
            <div style="font-family: Verdana; font-size: 13px;" id='selectionlog'>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Nadezhda

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

    jqxInput doesn't return value #69204

    cpuin
    Participant

    Thank you Nadhezda.

    This works , but is a bit strange:

    
    $('#jqxInput').jqxInput('val').value;
    
    jqxInput doesn't return value #69225

    admin
    Keymaster

    Hey cpuin,

    When you have displayMember and valueMember defined. val returns object with “label” and “value”. It’s also demonstrated in the Docs how to set value of such jqxInput – $(‘#jqxInput’).jqxInput(‘val’, {label: “Item 1”, value: “1”});

    Regards,
    Peter

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

You must be logged in to reply to this topic.