0

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.

pixelmeow
  • 654
  • 1
  • 9
  • 31
Bashabi
  • 696
  • 1
  • 12
  • 40
  • I would assume that the popup function doesn't work. Do you have errors in the browser console? 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 + '\')' }" – the_lotus Apr 23 '14 at 15:05
  • Thank you . Tried your way... The page is opening in a separate tab rather than on a popup. any more suggestion – Bashabi Apr 23 '14 at 15:29
  • I converted my comment into an answer – the_lotus Apr 23 '14 at 15:34

3 Answers3

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?

Community
  • 1
  • 1
landsteven
  • 814
  • 8
  • 22
  • You are right about the issue of building query string. without the query string the link is opening now. previously there were no action. but the link is opening on a separate tab not in a popup. – Bashabi Apr 23 '14 at 15:37
  • You must understand that different browsers and browser settings are going to impact what happens when the window.open() method is called in JavaScript. Some browsers will open a new, seperate window. Some will open a new tab instead. If you truly want there to be a "pop-up" (not a new browser tab) for every browser, then you will need to make use of a jQuery plug-in or a 3rd party control. – landsteven Apr 23 '14 at 17:00
1

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.

the_lotus
  • 12,668
  • 3
  • 36
  • 53
  • Can you please look at my this question as well .. the link is http://stackoverflow.com/questions/23241626/how-to-use-colorbox-popup-without-disabling-the-parent-screen – Bashabi Apr 23 '14 at 15:45
  • the previous developer has used colorbox for creating Popup . Can that be a reason for not working this simple js popup?? – Bashabi Apr 23 '14 at 16:00
  • @Bashabi that would be difficult to know, I would have to check all the guys previous code... I can only wish you luck at this point. – the_lotus Apr 23 '14 at 16:03
1

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/

Community
  • 1
  • 1
landsteven
  • 814
  • 8
  • 22