locked
Add object list to modal using jquery RRS feed

  • Question

  • User1144600762 posted

    I have a List<object> that I would like to display in a modal popup window using jquery.  

    The list returns list items such as:

    {field1: "field1description",  field2: "field2description",  field3: "field3description", field4: "field4description"}

    {field1: "field1description",  field2: "field2description",  field3: "field3description", field4: "field4description"}

    I would like to load this list data using jquery into a modal popup but am having trouble.  Doe's anyone have a good example that they can point me to for help?

    thank you

    Friday, February 19, 2016 2:27 PM

Answers

  • User61956409 posted

    Hi cowasaki,

    If you’d like to use open() method opens a new browser window and load a list in new window, you could refer to the following sample.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script>
            function shownewwindow() {
                var mylist = [{ field1: 'field1description', field2: 'field2description', field3: 'field3description', field4: 'field4description' }, { field1: 'field1description', field2: 'field2description', field3: 'field3description', field4: 'field4description' }];
    
                //store list in local storage
                localStorage.setItem("mylist", JSON.stringify(mylist));
    
                //open new window
                window.open("mynewwindow.aspx");
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <input id="btnshow" type="button" value="Show New Window" onclick="shownewwindow();" />
            </div>
        </form>
    </body>
    </html>
    

    mynewwindow.aspx

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script>
            function loadlist() {
                var mylist = localStorage.getItem("mylist");
    
                if (mylist != null) {
                    var list = JSON.parse(mylist);
                    for (var i = 0; i < list.length; i++) {
                        var fn = list[i].field1;
                        //alert(list[i].field1);
                    }
                }
            }
        </script>
    </head>
    <body onload="loadlist();">
        <form id="form1" runat="server">
            <div>
            </div>
        </form>
    </body>
    </html>
    

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, February 22, 2016 9:18 AM

All replies

  • User61956409 posted

    Hi cowasaki,

    If you’d like to use open() method opens a new browser window and load a list in new window, you could refer to the following sample.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script>
            function shownewwindow() {
                var mylist = [{ field1: 'field1description', field2: 'field2description', field3: 'field3description', field4: 'field4description' }, { field1: 'field1description', field2: 'field2description', field3: 'field3description', field4: 'field4description' }];
    
                //store list in local storage
                localStorage.setItem("mylist", JSON.stringify(mylist));
    
                //open new window
                window.open("mynewwindow.aspx");
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <input id="btnshow" type="button" value="Show New Window" onclick="shownewwindow();" />
            </div>
        </form>
    </body>
    </html>
    

    mynewwindow.aspx

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script>
            function loadlist() {
                var mylist = localStorage.getItem("mylist");
    
                if (mylist != null) {
                    var list = JSON.parse(mylist);
                    for (var i = 0; i < list.length; i++) {
                        var fn = list[i].field1;
                        //alert(list[i].field1);
                    }
                }
            }
        </script>
    </head>
    <body onload="loadlist();">
        <form id="form1" runat="server">
            <div>
            </div>
        </form>
    </body>
    </html>
    

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, February 22, 2016 9:18 AM