Question

65

Open a modal dialog box, containing dynamic data on table cell click

rated 0 times [ 68] [ 3] / answers: 1 / hits: 24417 / 10 Years ago, mon, november 10, 2014, 12:00:00

I'm trying to achieve as the title suggests. Currently I can display the contents of a <div> using:

document.write(<table><tr>);

...

document.write(<td onclick=window.location.href='#popup' ... > + name + </td>);

With the <div> defined as: (where I'm trying to use data-name)

<div id=popup data-name=name class=dialog>



    <a href=#close><img src=... alt=... width=166 height=104 align=left /></a>

    <p>                

        Hello (dynamic name here)!     

    </p>            

</div>

I have tried instead calling:

document.write(<td onclick=popup( + name + ) class=programme> + name + </td>);



function popup(movieName)

{

    var pop = document.getElementById(popup); 

    pop.setAttribute(data-movie, movieName);



    document.location.href = #popup;

};

but I no longer see the popup this way.

I would eventually want to popup to be a modal dialogue window which will display on top of the table. Currently as it's defined above the table it just pushes the table down when displayed.

Edit: Thanks for the fantasic help. Both @carlosHT and @TimeDead. Both solutions work and both taught me a lot. I've gone for carlosHT's solution as it's a smaller implementation. The only addition I had to add was:

.ui-dialog

{

    clear: both;

}

This stops the dialog window from having a very tall titlebar.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mckaylab

Add To Favorites

Follow

Total Points: 311

Total Questions: 120

Total Answers: 93

Location: Montenegro

Member since Thu, Jun 16, 2022

2 Years ago

mckaylab questions

1 How to use Material UI custom variants in React with Typescript

Fri, Apr 8, 22, 00:00, 2 Years ago

1 TypeError: Cannot read properties of undefined (reading 'forEach') at Object.< anonymous> (/home/runner/myrepl/index.js:10:6

Mon, Apr 4, 22, 00:00, 2 Years ago

1 How to use the AbortController to cancel Promises in React?

Wed, Dec 1, 21, 00:00, 3 Years ago

1 How To Open HTML Date Picker Dialog On Click Anywhere Inside Input?

Mon, Apr 26, 21, 00:00, 3 Years ago

1 How to change selenium-standalone port number via webdriverio wdio file?

Wed, Jul 24, 19, 00:00, 5 Years ago

View All

answered 10 Years ago georginaariao · Accepted Answer

Here's an alternative using jQuery and jQueryUI:

<html>

    <head>

        <link rel=stylesheet href=http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css/>

        <script src=http://code.jquery.com/jquery-2.1.0.min.js></script>

        <script src=http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js></script>



        <style>

            #popup{

                display: none;

                border: 1px solid black;

            }



            .cell-which-triggers-popup{

                cursor: pointer;    

            }



            .cell-which-triggers-popup:hover{

                background-color: yellow;    

            }

        </style>

    </head>



    <body>

        <div id=popup class=dialog>

            <a href=#close><img src=http://bit.ly/1qAuZh3 alt=... width=166 height=104 align=left/></a>

            <p></p>            

        </div>



        <table border=1>

            <tr>

                <td class=cell-which-triggers-popup>exampleName</td>

            </tr>

        </table>

    </body>

</html>



<script>

$( document ).ready(function() {

    $(document).on(click, .cell-which-triggers-popup, function(event){

        var cell_value = $(event.target).text();

        showPopup(cell_value)    

    });



    function showPopup(your_variable){

        $(#popup).dialog({

            width: 500,

            height: 300,

            open: function(){

                $(this).find(p).html(Hello  + your_variable)

            }

        });

    }

});

</script>

EXAMPLE: http://jsfiddle.net/xaqtawog/1/