locked
Get List box item in Text box by mouse double click from Jquery modal dialog with MVC Razor RRS feed

  • Question

  • User559435292 posted

    Hi,

    I am using a jquery modal dialog showing up a list (lstUserIds) of IDs. User select an ID from the list and click a "Select" button to add to a textbox (txtUserIDs) on the MVC Razor form.

    I want user to double click on any ID in the list (lstUserIds) and to be added to the textbox (txtUserIDs) on the form. Could anybody help to achieve this? Here is my code-

    $("#divUserIDs").dialog({
                        width: 500,
                        height: 450,
                        modal: true,
                        autoOpen: false,
                        resizable: false,
                        draggable: false,                   
                        show: { effect: 'drop', direction: "up" },
                        buttons: {
                            "Select": function () {
                                var selectedID = $('#lstUserIds').val();
                                 $("#txtUserIDs").val(selectedID );
                                    $(this).dialog("close");
                            },
                            "Exit": function () {
                                $(this).dialog("close");
                            }
                        },
                        overlay: {
                            opacity: 0.5,
                            background: "black"
                        }
                    });

    Thanks in advance.

    Friday, October 25, 2019 6:44 AM

Answers

  • User665608656 posted

    Hi pointtoshare,

    I'm sorry that I understand your project as webform. According to the code you gave, I modified my case code as follows in mvc. You can refer to it directly:

    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link href="../Content/bootstrap.min.css" rel="stylesheet" />
        <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script type="text/javascript">
            $(function () { 
                $("#divUserIDs").dialog({
                    width: 500,
                    height: 450,
                    modal: true,
                    autoOpen: false,
                    resizable: false,
                    draggable: false,
                    show: { effect: 'drop', direction: "up" },
                    buttons: {
                        "Exit": function () {
                            $(this).dialog("close");
                        }
                    },
                    overlay: {
                        opacity: 0.5,
                        background: "black"
                    }
                });
                $("#imgFindIds").click(function () {
                    $.ajax({
                        type: "POST",
                        url: "/GeneralMethods/getIDs",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (data) {
                            $('#lstUserIds').empty();
                            $.each(data, function () {
                                $('#lstUserIds').append($("<option></option>").val(this['Value']).html(this['Text']));
                            });
                            $("#divUserIDs").dialog("open");
                        }
                    });
    
                });
    
                $("#lstUserIds").dblclick(function () {
                    var id = $('#lstUserIds :selected').val();
                    $("#divUserIDs").dialog("close");
                    $("#txtUserIDs").val(id);
                });
            });
    
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            ID:
            <input id="txtUserIDs" type="text" />
            <button type="button" id="imgFindIds" class="btn btn-primary">
                Show
            </button>
            <div id="divUserIDs">
                @Html.ListBox("lstUserIds", new SelectList(new[] { "" }), new { @class = "form-control", id = "lstUserIds" })
            </div>
    
        </form>
    </body>
    </html>
    
     [HttpPost]
            public JsonResult GetIDs()
            {
                List<ListItem> customers = new List<ListItem>() {
                      new ListItem
                {
                    Value = "Addlite",
                    Text = "Addlite"
                }, new ListItem
                {
                    Value = "Condiments",
                    Text = "Condiments"
                }, new ListItem
                {
                    Value = "Confections",
                    Text = "Confections"
                }, new ListItem
                {
                    Value = "Dairy Products",
                    Text = "Dairy Products"
                }, new ListItem
                {
                    Value = "Grains/Cereals",
                    Text = "Grains/Cereals"
                }
                };
                return Json(customers, JsonRequestBehavior.AllowGet);
            }

    Here is the result :

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, November 7, 2019 7:07 AM

All replies

  • User665608656 posted

    Hi pointtoshare,

    According to your requirements, I suggest that you can use the modal pop up in bootstrap to achieve this function.

    I created a table to display in modal, and obtained the double-click event of clicking td in JS.

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link href="../Content/bootstrap.min.css" rel="stylesheet" />
        <script src="../Scripts/jquery-3.2.1.min.js"></script>
        <script src="../Scripts/bootstrap.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#searchButton").click(function () {
                    $("#myModal").modal('toggle');
                });
                $("[id*=example] td").dblclick(function () {
                    var id = $("td", $(this).closest("tr")).eq(0).html();
                    $("#myModal").modal('toggle');
                    $("#TextBox1").val(id);
                });
            });
    
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            ID:
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <!-- Button trigger modal -->
            <button type="button" id="mymodal" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
                Show
            </button>
    
            <!-- Modal -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        </div>
                        <div class="modal-body">
                            <div class="active-pink-3 active-pink-4 mb-4">
                                <table id="example" class="table-bordered" style="width: 90%" >
                                    <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>Position</th>
                                            <th>Office</th>
                                            <th>Age</th> 
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="xx" id="1">
                                            <td>Tiger Nixon</td>
                                            <td>System Architect</td>
                                            <td>Edinburgh</td>
                                            <td>61</td> 
                                        </tr>
                                        <tr class="xx" id="2">
                                            <td>Garrett Winters</td>
                                            <td>Accountant</td>
                                            <td>Tokyo</td>
                                            <td>63</td> 
                                        </tr>
                                        <tr class="xx" id="3">
                                            <td>Ashton Cox</td>
                                            <td>Junior Technical Author</td>
                                            <td>San Francisco</td>
                                            <td>66</td>  
                                        </tr>
                                    </tbody>
                                </table> 
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                            <%--    <button type="button" class="btn btn-primary" id="searchButton">Search</button>--%>
                        </div>
                    </div>
                </div>
            </div>
    
        </form>
    </body>
    </html>
    

    Here is the result :

    Best Regards,

    YongQing.

    Friday, October 25, 2019 9:25 AM
  • User559435292 posted

    Hi YongQing,

    Thanks for your response.

    Actually, it is too difficult to switch to bootstrap modal at this stage, because I have already implemented number of modals in JQuery with this pattern that have to be modified.

    There is no way to implement the same in JQuery modal?

    Thanks.

    Friday, October 25, 2019 10:17 AM
  • User665608656 posted

    Hi pointtoshare,

    Of course, you can use JQuery modal to achieve this function, which is the same.

    I'm not sure whether the list you mentioned for storing ID is listbox control or other controls. I'm using listbox as an example here:

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link href="../Content/bootstrap.min.css" rel="stylesheet" />
        <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#divUserIDs").dialog({
                    width: 500,
                    height: 450,
                    modal: true,
                    autoOpen: false,
                    resizable: false,
                    draggable: false,
                    show: { effect: 'drop', direction: "up" },
                    buttons: {
                        //"Select": function () {
                        //    var selectedID = $('#lstUserIds').val();
                        //    $("#txtUserIDs").val(selectedID);
                        //    $(this).dialog("close");
                        //},
                        "Exit": function () {
                            $(this).dialog("close");
                        }
                    },
                    overlay: {
                        opacity: 0.5,
                        background: "black"
                    }
                });
                $("#searchButton").click(function () {
                    $("#divUserIDs").dialog("open");
                });
                $("[id*=ListBox1] option").dblclick(function () {
                    var id =$('[id*=ListBox1] :selected').val();
                    $("#divUserIDs").dialog("close");
                    $("#txtUserIDs").val(id);
                });
            });
    
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            ID:
            <asp:TextBox ID="txtUserIDs" runat="server"></asp:TextBox>
            <button type="button" id="searchButton" class="btn btn-primary">
                Show
            </button>
            <div id="divUserIDs">
                <asp:ListBox ID="ListBox1" runat="server">
                    <asp:ListItem Text="A" Value="A"></asp:ListItem>
                    <asp:ListItem Text="B" Value="B"></asp:ListItem>
                    <asp:ListItem Text="C" Value="C"></asp:ListItem>
                    <asp:ListItem Text="D" Value="D"></asp:ListItem>
                </asp:ListBox>
            </div>
        </form>
    </body>
    </html>

    Here is the result of this work demo:

    Best Regards,

    YongQing.

    Monday, October 28, 2019 2:03 AM
  • User559435292 posted

    Hi YongQing,

    Sorry for the late reply.

    As I mentioned earlier, I am using ListBox on MVC Razor form. I tried your solution but didn't work in my context. Could you please advise according to my context?

    Here is my ListBox setup-

    @Html.ListBox("lstUserIds", null, new { @class = "form-control", id = "lstUserIds" })

    And, here is my data feed to ListBox-

    $('#imgFindIds').on('click', function () {                   
                        $.ajax({
                            type: "POST",                        
                            url: "/GeneralMethods/getIDs",
                            contentType: "application/json; charset=utf-8",
                            dataType: "html",
                            success: function (response) {
                                $('#divUserIDs').html(response);
                                $('#divUserIDs').dialog('open');                                                  
                            }                        
                        });
                    });

    Presently, on "imgFindIds" image click, the popup window opens with the list of Ids.

    Thanks in advance.

    Wednesday, November 6, 2019 6:39 AM
  • User665608656 posted

    Hi pointtoshare,

    I'm sorry that I understand your project as webform. According to the code you gave, I modified my case code as follows in mvc. You can refer to it directly:

    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link href="../Content/bootstrap.min.css" rel="stylesheet" />
        <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script type="text/javascript">
            $(function () { 
                $("#divUserIDs").dialog({
                    width: 500,
                    height: 450,
                    modal: true,
                    autoOpen: false,
                    resizable: false,
                    draggable: false,
                    show: { effect: 'drop', direction: "up" },
                    buttons: {
                        "Exit": function () {
                            $(this).dialog("close");
                        }
                    },
                    overlay: {
                        opacity: 0.5,
                        background: "black"
                    }
                });
                $("#imgFindIds").click(function () {
                    $.ajax({
                        type: "POST",
                        url: "/GeneralMethods/getIDs",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (data) {
                            $('#lstUserIds').empty();
                            $.each(data, function () {
                                $('#lstUserIds').append($("<option></option>").val(this['Value']).html(this['Text']));
                            });
                            $("#divUserIDs").dialog("open");
                        }
                    });
    
                });
    
                $("#lstUserIds").dblclick(function () {
                    var id = $('#lstUserIds :selected').val();
                    $("#divUserIDs").dialog("close");
                    $("#txtUserIDs").val(id);
                });
            });
    
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            ID:
            <input id="txtUserIDs" type="text" />
            <button type="button" id="imgFindIds" class="btn btn-primary">
                Show
            </button>
            <div id="divUserIDs">
                @Html.ListBox("lstUserIds", new SelectList(new[] { "" }), new { @class = "form-control", id = "lstUserIds" })
            </div>
    
        </form>
    </body>
    </html>
    
     [HttpPost]
            public JsonResult GetIDs()
            {
                List<ListItem> customers = new List<ListItem>() {
                      new ListItem
                {
                    Value = "Addlite",
                    Text = "Addlite"
                }, new ListItem
                {
                    Value = "Condiments",
                    Text = "Condiments"
                }, new ListItem
                {
                    Value = "Confections",
                    Text = "Confections"
                }, new ListItem
                {
                    Value = "Dairy Products",
                    Text = "Dairy Products"
                }, new ListItem
                {
                    Value = "Grains/Cereals",
                    Text = "Grains/Cereals"
                }
                };
                return Json(customers, JsonRequestBehavior.AllowGet);
            }

    Here is the result :

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, November 7, 2019 7:07 AM
  • User559435292 posted

    Hi YongQing,

    Your solution worked fine but I had to modify few things. Somehow It doesn't work with the list item double click event 

    // works when double click event is on modal div
     $("#divUserIDs").dblclick(function () {
                        var id = $('#lstUserIds :selected').val();                    
                        if (id != null) {
                           $("#strUserIds").val(id);
                        }
                    })
    
    // doesn't works when double click event is on list
     $("#lstUserIds").dblclick(function () {
                        var id = $('#lstUserIds :selected').val();                    
                         $("#strUserIds").val(id);
                    })

    My list "lstUserIds" is on a partial view and I am loading the partial view on modal on image button click. I am wondering if this is the reason of not working.

    If you see the Image click function in my previous post, the URL is calling a partial view.

    url: "/GeneralMethods/getIDs"

    Great if it is workable with the list item double click event.

    Thanks.

    Monday, November 11, 2019 7:50 AM