Open a jquery dialog in click event?

Question

0.00/5 (No votes)

See more:

Hi,
How can i open a jquery dialog in the function call which is onclick of href?
example code:

HTML

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
</style>
<script>
function Launch(){
//open a dialog here
}
</script>
</head>
<body>

<table>
  <tr>
    <td id="side">
      <H1><a href = javascript:Launch()> Launch </a></H1>
    </td>
    <td>Cell B</td>
  </tr>
</table>
<div id="dialog">Your non-modal dialog</div>
</body>
</html>

can anyone please help on this?

Regards,
Ravi Raj Nukala

What I have tried:

1. created a div outside of table and header and tried calling the dialog.
$("#dialog").dialog('open');

Posted 15-May-16 21:35pm

N.Ravi Raj

Updated 15-May-16 21:49pm

Add a Solution

Comments

Karthik_Mahalingam 16-May-16 3:38am

what is the issue ?

N.Ravi Raj 16-May-16 3:40am

Need to open dialog in the onclick event. how can i do that? is there any possible way?

Thanks7872 16-May-16 3:41am

Yes,its possible. Try to do it and let us know what issues you are facing while opening dialogue.

N.Ravi Raj 16-May-16 3:43am

i have tried different ways bur couldn't solve it. So i am seeking help here. Thanks

Thanks7872 16-May-16 3:45am

Thats what we want to see. Edit the question and show those different ways you have tried. Point out what is not working in the code you have tried.

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Karthik_Mahalingam · Accepted Answer · 2016-05-15T21:49:00

refer Dialog | jQuery UI[^] for the complete documentation and how to use it.

To make the dialog function to work, you will have to add the dependency Javascript/jquery libraries to your code..
the below code will work but you have to start learning the basics of
HTML Tutorial[^]
CSS Tutorial[^]
JavaScript Tutorial[^]
jQuery Tutorial[^]
jQuery UI[^]

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
     
    <style>
        table, th, td {
            border: 1px solid black;
        }
    </style>
    <script>
        function Launch() {
            $("#dialog").dialog();
             
        }
    </script>
</head>
<body>

    <table>
        <tr>
            <td id="side">
                <h1><a href=javascript:Launch()> Launch </a></h1>
            </td>
            <td>Cell B</td>
        </tr>
    </table>
    <div id="dialog" style="display:none">Your non-modal dialog</div>
</body>
</html>

Open a jquery dialog in click event?

1 solution

Solution 1

Add your solution here

Preview 0

Open a jquery dialog in click event?

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us