Home/ Questions/Q 7518099
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T01:39:32+00:00

jquery modal working when code is in same page index.jsp <script> function show() {

  • 0

jquery modal working when code is in same page

index.jsp

<script>
    function show()
    {
    $(function() {
        $( "#dialog:ui-dialog" ).dialog( "destroy" );

        $( "#dialog-modal" ).dialog({
            height: 140,
            modal: true
        });
    });
    }

    </script>
</head>
<body>
<input type="button" value="Demo" onClick="show()" >
<div id="dialog-modal" title="Demo" style="display:none">
    <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
</div>

but, when i’m trying to separate the above code in different file, then it is not showing

index.jsp

   <script>
    function show()
    {
    $(function() {
        $( "#dialog:ui-dialog" ).dialog( "destroy" );

        $( "/dialog.jsp#dialog-modal" ).dialog({
            height: 140,
            modal: true
        });
    });
    }

    </script>
</head>
<body>
<input type="button" value="Demo" onClick="show()" >
</body>

dialog.jsp

<div id="#dialog-modal" title="Demo">
    <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
</div>

thanks in advance !!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You cannot call an external resource in a jQuery selector like $("/dialog.jsp#..."). Instead you need to load the resource with an AJAX call.

    First, add a node to your main HTML to receive it. I’ve added <div id='dialog-content'></div>. Then load the .dialog() on that node:

       <script>
    function show()
    {
      $(function() {
        $( "#dialog:ui-dialog" ).dialog( "destroy" );

        $( "#dialog-content" ).dialog({
            height: 140,
            modal: true,
            // Use load function to populate the dialog:
            load: function() {
              $("#dialog-content").load("/dialog.jsp#dialog-modal")
            }
        });
      });
    }

    </script>
</head>
<body>
<div id='dialog-content'></div>
<input type="button" value="Demo" onClick="show()" >
</body>
    • 0