JQuery can't find my div element

Question

I have jquery function in my script file:

function modalpopup(id) 
    {
        var searchid = "\"#" + id + "\"";
        var element = $(searchid );
        element.dialog({
            height: 340,
            width: 500,
            modal: true
        });

    }

in my asp.net 2.0 file I have the following:

<a id="_ctl0_MainContentPlaceHolder_DataGrid1__ctl2_HyperLinkInfo"  onclick="modalpopup('_ctl0_MainContentPlaceHolder_DataGrid1__ctl2_details10')">
    <img src="../Images/info_icon.PNG" border="0" /></a>

<div id="_ctl0_MainContentPlaceHolder_DataGrid1__ctl2_details10" title="Dialog Title"
    style="display: none;">
    <center>
        <table class="table_class" cellspacing="1" cellpadding="2" rules="all" border="1"
            id="_ctl0_MainContentPlaceHolder" style="border-style: None; height: 24px; width: 800px;
            font-size: 16px;">
            <tr class="table_header_class" style="color: DarkGray; font-weight: bold; font-size: 16px;
                white-space: nowrap">
                <td style="white-space: nowrap">
                    customer details </td>
            </tr>
        </table>
    </center>
</div>

Its look like its a simple jquery job to find the div element but the jquery result is null!!

What I'm doing wrong here? There is no error format in my html code

Please help

Answer 1

<html>
<head>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
    function modalpopup(id) 
    {
     alert(id);
        var searchid = id;
        var element = $("#"+searchid );
        element.dialog({
            height: 340,
            width: 500,
            modal: true
        });

    }
</script>
</head>
<body>

<a href="javascript:void(0);" id="_ctl0_MainContentPlaceHolder_DataGrid1__ctl2_HyperLinkInfo"  onclick="modalpopup('_ctl0_MainContentPlaceHolder_DataGrid1__ctl2_details10');">
   <img src="../Images/info_icon.PNG" border="0" /></a>

<div id="_ctl0_MainContentPlaceHolder_DataGrid1__ctl2_details10" title="Dialog Title"
    style="display: none;">
    <center>
        <table class="table_class" cellspacing="1" cellpadding="2" rules="all" border="1"
            id="_ctl0_MainContentPlaceHolder" style="border-style: None; height: 24px; width: 800px;
            font-size: 16px;">
            <tr class="table_header_class" style="color: DarkGray; font-weight: bold; font-size: 16px;
                white-space: nowrap">
                <td style="white-space: nowrap">
                    customer details </td>
            </tr>
        </table>
    </center>
</div>


</body>
</html>

Well this works:

http://jsfiddle.net/eorozco/SbGQa/

Answer 2

this will do the trick

function modalpopup(id) {
    var element = $('#'+id);
    element.dialog({
        height: 340,
        width: 500,
        modal: true
    });
}

Answer 3

Try this:

function modalpopup(id) 
    {

        $("#"+id).dialog({
            height: 340,
            width: 500,
            modal: true
        });

    }

JQuery can't find my div element

Question

3 answers

solution1
1 2013-08-17 06:34:47

solution2
0 2013-08-17 06:41:16

solution3
0 2013-08-17 06:45:37

JQuery can't find my div element

Question

3 answers

solution1 1 2013-08-17 06:34:47

solution2 0 2013-08-17 06:41:16

solution3 0 2013-08-17 06:45:37

solution1
1 2013-08-17 06:34:47

solution2
0 2013-08-17 06:41:16

solution3
0 2013-08-17 06:45:37