0

I have seen the below link but it is not working for me. jQuery Mobile SimpleDialog with two Inputs?

can anyone help me by seeing the below code.

<script type="text/javascript"> 
            $(document).delegate('#addDialog', 'click', function() {
                $(this).simpledialog({
                    'mode' : 'string',
                    'prompt' : 'Product',
                    'cleanOnClose': true,
                    'buttons' : {
                        'OK': {
                            click: function () { 
                                $('#simplestringout').text($('#addDialog').attr('data-string'));
                            }
                        },
                        'Cancel': {
                            click: function () { console.log(this); },
                            icon: "delete",
                            theme: "c"
                        }
                    }
                })
            });
        </script>

I am calling this function by clicking on button.

Here I am getting perfectly as 1 text box. But when I want two text fileds I am unable to get it.

Can anyone please help me in how to get two text boxes.

1 Answer 1

0

I think to get 2 inputs you need to use blank mode and create the dialog markup you want.

Here is an example where the blankContent attribute is used to inject markup with 2 inputs and 2 buttons into the dialog. Then a handler is added for the OK button using event delegation (.on()) because the button does not exist until the dialog is launched:

$(document).on("pageinit", "#page1", function () {
    $(document).on("click", "#openDialog", function () {
        $('<div>').simpledialog2({
            mode: 'blank',
            headerText: 'Product',
            headerClose: true,
            width: "75%",
            blankContent: '<div class="sdCont"><label for="inp1">Text input 1:</label><input id="inp1" type="text" value="" placeholder="Type something..." /><label for="inp2">Text input 2:</label><input id="inp2" type="text" value="" placeholder="Really, go ahead and type..." /><div class="ui-grid-a"><div class="ui-block-a"><button id="btnOK" data-inline->OK</button></div><div class="ui-block-b"><button id="btnCancel" data-theme="c" data-icon="delete" rel="close">Cancel</button></div></div></div>'
        });
    });

    $(document).on("click", "#btnOK", function(){
        alert("Dialog OK clicked!");
        $.mobile.sdCurrentDialog.close();
    });
});

Here is a DEMO

3
  • Hi Ezanker, I tried to modified the version in jsfiddle. But it is not working for other versions. When I use your code it is not working fine.
    – Yaswanth
    Apr 27, 2014 at 3:14
  • Hi Ezanker, Please check the below plugin's I am using. Let me know if there are any corrections. <pre> <code> <link rel="stylesheet" href="code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> <link rel="stylesheet" href="simpledialog.css" type="text/css" /> <script src="code.jquery.com/jquery-1.9.1.min.js"></script> <script src="code.jquery.com/mobile/1.4.2/…> <script type="text/javascript" src="simpledialog.js"></script> </pre> </code>
    – Yaswanth
    Apr 27, 2014 at 3:36
  • Your code is placed in script and click functionality made it as <pre><code><a href="" data-icon="plus" id="openDialog" data-iconpos="notext" data-rel="dialog" data-transition="fade"></a></code></pre>
    – Yaswanth
    Apr 27, 2014 at 3:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.