jQuery UI Widgets Forums Form Form Refresh

This topic contains 3 replies, has 2 voices, and was last updated by  Todor 12 hours, 34 minutes ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Form Refresh Posts
  • Form Refresh #106444

    teaguejust
    Participant

    Does the refresh method refresh the form’s original values or to what the values are currently set? I would like to send new values to a form and refresh the form, but I keep getting the original values. I’m wondering if refresh is not the correct application here.

    Form Refresh #106448

    Todor
    Participant

    Hello teaguejust,

    You need to reset each widget in the form.

    Let us know if you need further assistance.

    Best Regards,
    Todor

    jQWidgets Team
    https://www.jqwidgets.com

    Form Refresh #106491

    teaguejust
    Participant

    Thank you for the reply. I can’t seem to get it to work after banging my head against the wall over several days. Would you mind taking a look at this simple example I put together? Simply just trying to change the form entry based on the drop down event.

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <meta name=”keywords” content=”jQuery DropDownList, List, ListBox, Popup List, jqxDropDownList, jqxListBox, List Widget, ListBox Widget, DropDownList Widget” />
    <meta name=”description” content=”The jqxDropDownList represents a widget that contains a list of
    selectable items displayed in a drop-down.” />
    <title id=’Description’>The jqxDropDownList represents a widget that contains a list
    of selectable items displayed in a drop-down.</title>
    <link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
    <meta name=”viewport” content=”width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1″ />
    <script type=”text/javascript” src=”../../scripts/jquery-1.11.1.min.js”></script>
    <script type=”text/javascript” src=”../../scripts/demos.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxbuttons.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxscrollbar.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxlistbox.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxdropdownlist.js”></script>
    <script type=”text/javascript” src=”../../scripts/jquery-1.12.4.min.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxinput.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxpanel.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxform.js”></script>
    <script type=”text/javascript”>
    $(document).ready(function () {

    var source = [
    “Affogato”,
    “Americano”,
    “Bicerin”,
    “Breve”,
    “Café Bombón”,
    “Café au lait”,
    “Caffé Corretto”,
    “Café Crema”,
    “Caffé Latte”,
    “Caffé macchiato”,
    “Café mélange”,
    “Coffee milk”,
    “Cafe mocha”,
    “Cappuccino”,
    “Carajillo”,
    “Cortado”,
    “Cuban espresso”,
    “Espresso”,
    “Eiskaffee”,
    “The Flat White”,
    “Frappuccino”,
    “Galao”,
    “Greek frappé coffee”,
    “Iced Coffee”,
    “Indian filter coffee”,
    “Instant coffee”,
    “Irish coffee”,
    “Liqueur coffee”
    ];

    // Create a jqxDropDownList
    $(“#jqxWidget”).jqxDropDownList({ source: source, selectedIndex: 0, width: 250, height: 30});

    var item = $(“#jqxWidget”).jqxDropDownList(‘getSelectedItem’);
    var selected_value = item[‘value’];

    var template = [
    {
    bind: ‘firstName’,
    type: ‘text’,
    label: ‘First name’,
    required: true,
    labelWidth: ’80px’,
    width: ‘250px’,
    info: ‘Enter first name’,
    infoPosition: ‘right’
    }
    ];

    var sampleValue = {
    firstName: selected_value
    };

    $(‘#sampleForm’).jqxForm({
    template: template,
    value: sampleValue,
    padding: { left: 10, top: 10, right: 10, bottom: 10 }
    });

    $(“#jqxWidget”).on(‘select’, function (event) {

    var item_change = $(“#jqxWidget”).jqxDropDownList(‘getSelectedItem’);
    var item_change_value = item_change[‘value’];
    console.log( item_change_value ); //Check to see if event is working

    var template = [
    {
    bind: ‘firstName’,
    type: ‘text’,
    label: ‘First name’,
    required: true,
    labelWidth: ’80px’,
    width: ‘250px’,
    info: ‘Enter first name’,
    infoPosition: ‘right’
    }
    ];

    var sampleValue = {
    firstName: item_change_value
    };

    console.log( sampleValue ); //Check to see if event sent the correct value to the form

    $(‘#sampleForm’).jqxForm({
    template: template,
    value: sampleValue,
    padding: { left: 10, top: 10, right: 10, bottom: 10 }
    });

    });

    });
    </script>
    </head>
    <body class=’default’>
    <div id=’sampleForm’ style=”width: 400px; height: auto;”></div>
    <div id=’jqxWidget’>
    <div class=”example-description”>
    <h2>Description</h2>
    <div style=”width: 800px;”>
    Change the form value using the dropdown change event.
    </div>
    </div>
    </body>
    </html>

    Form Refresh #106521

    Todor
    Participant

    Hello teaguejust,

    You could do it the same way as it is done in the following demo about State.

    Let us know if you need further assistance.

    Best Regards,
    Todor

    jQWidgets Team
    https://www.jqwidgets.com

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

You must be logged in to reply to this topic.