Popup not working on asp.net and vb.net web page

Question

I have taken over a web application from a previous developer which is built on asp.net and vb.net

I am trying to create a simple popup with javascript but the popup is not working.

the asp.net code was

<a class="hover-glow" data-placement="bottom" rel="tooltip"
    title="change status" 
    data-bind="attr: { 'href':'update-status_popup.aspx?i=' 
    + Id + '&c=' + StatusId }">
    <i class="icon icon-random"></i>
</a> 

The link is opening on a different page. when opening link it's also getting the ID from the database.

The requirement is now to open the link in a popup window.

I have created a javascript function call popup(). The code is like below:

<script type="text/javascript" charset="utf-8">
    function popup() {

        var url = 'update-status_popup.aspx?i=' + Id + '&c=' + StatusId; 
        window.open(url);

    }
</script>

and edited the html code as below:

<a class="hover-glow" data-placement="bottom" rel="tooltip"
    title="change status"
    databind = "attr: { 'href = javascript: popup()' }">
    <i class="icon icon-random"></i>
</a>

When i click on the link nothing happens.

I have also tried:

<a class="hover-glow" data-placement="bottom" rel="tooltip"
    title="change status" onclick ="javascript: popup()">
    <i class="icon icon-random"></i>
</a>

and:

<a class="hover-glow" data-placement="bottom" rel="tooltip"
    title="change status" href ="javascript: popup()">
    <i class="icon icon-random"></i>
</a>

The result is the same.

The popup must not disable the parent screen.

The website is using another popup by colorbox which disables the screen.

Appreciate your kind response.

Answer 1

It appears that you may be having an issue with building the Query String in your popup() JavaScript function. What you should do is break this task into two steps:

1. Get the Window.Open working first (without the Query String):

   <a class="hover-glow" 
        data-placement="bottom" 
        rel="tooltip" 
        title="change status" 
        href="javascript: popup()">
        <i class="icon icon-random"></i>
   </a>
   
   <script type="text/javascript" charset="utf-8">
        function popup()
        {
            //var url = 'update-status_popup.aspx?i='+Id+'&c='+StatusId;
            var url = 'update-status_popup.aspx';
            window.open(url);
         }
   </script>
   

2. Then once the popup() function is working, build out the dynamic Query String. There are a number of ways to handle this. Please refer to the answers here: How to pass a query string variable?

Answer 2

I would assume that the popup function doesn't work. You might want to look at your browsers console window and see what the error is.

You could try putting all the js in the href.

data-bind="attr: { 'href': 'javascript: window.open(\'update-status_popup.aspx?i=' + Id + '&c=' + StatusId + '\')' }" 

Or have a generic popup function that takes the url as a parameter.

data-bind="attr: { 'href': 'javascript: popup(\'update-status_popup.aspx?i=' + Id + '&c=' + StatusId + '\')' }" 

  function popup(url) {

        window.open(url);

    }

I think Id and StatusId are server variable and are not available on the client side.

Answer 3

To implement a "pop-up" (not a new browser tab) then you should consider implementing the jQuery.UI Dialog. Here is a link to an answer that shows how to implement it:

How to display an IFRAME inside a jQuery UI dialog

And here is a link to the jQuery UI Dialog documentation: https://jqueryui.com/dialog/