how to open an external page in a popup window using off set position.

I have a question that I need help with regarding a windows popup that opens an asp.net page that contains a message returned by a web service.

Anyhow, on my main page, I display a list of records, one of the columns contains an status message, when the status is type: "Error", then, a hyperlink is displayed in the column so that the user can click it to read it, this message is actually a simple asp.net page that consumes a web service that returns the message from MS AX.

Currently I am using a jquery plugin named "fancybox", to open the popup message/ page.

This plug in is limited because it opens the popup in the center of the screen, and I would like to open the message, to the left offset position of the link that is clicked.

I am wondering if I can ask some one to help me out with the code for this type of popup, because I do not have much experience working with JavaScript, and basic jQuery.

The main page is a classic asp page, the page containing the error is a asp.net page, and I am using jquery/ fancy box, which I would not mind replacing with something else.

Here is the code that I have right now, that displays the popup in the center using fancybox.

Main page:

<script type="text/javascript">
    jQuery(document).ready(function () {
        $(".iframe").fancybox({                
            'width': '22%',
            'height': '5%',                
            'autoScale': false,
            'transitionIn': 'none',
            'transitionOut': 'none',
            'type': 'iframe',
            'scrolling' : 'auto',
            'preload'   : true
        });
    });
</script>

If field = "Error" Then
    Response.Write "<a class='iframe' href=" & Application("LinkOE") & "?order=" & strOrderId & "&site=" & siteoverride & "00" & "&env=" & strEnv & ">Error</a>"
Else
    Response.Write field
End If

Open in new window


Error page (popup):
<div id="content">
    <div class="order">
        <div class="label">Web Order#: </div>
        <div id="orderno" runat="server" class="value"></div>
    </div>
    <div class="error">
        <div class="label">Message: </div>
        <div class="value">
            <asp:Label ID="lblOrderError" runat="server" Visible="false"></asp:Label></div>
    </div>
</div>

Open in new window

the_lone_noteAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Bob LearnedCommented:
It looks like fancybox uses position: absolute, so I would think that you should be able to set the left and top properties.
0
the_lone_noteAuthor Commented:
Thank you Bob Learned.

Question, will using left and top, allow me to place the popup next to the anchor <a> tag?
If so, will you be able to show me how?

Thanks.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I have not used fancybox in a long time in favor of bootstrap modal. But it does look like you can set the left ratio and margin.  From reading the docs, it looks like you want leftRatio

http://fancyapps.com/fancybox/#docs

leftRatio
Left space ratio for horizontal centering. If set to 0.5, then left and right space will be equal. If 0 - fancyBox will be at the viewport left
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Bob LearnedCommented:
I didn't completely think through the entire requirement.  It seems a unusual to me to need this type of positioning, but to each their own.

Thinking out loud here:

1) Change the position attribute for the modal to static

2) Wrap the anchor with a <div>

3) Have the modal rendered inside the <div>
0
the_lone_noteAuthor Commented:
Looking at the bootstrap live demo, I copied some of the code and created a fiddle:

What I want for my page is what clicking the button does, it opens the popup next to it, but my page displays links, and also it is html generated by asp code, and it does not uses static content but it call another page passing parameters.

the screen shot
I need to be able to click the link and show the page as a popup like the button does in the bootstrap demo.

I am just not sure how to implement that functionality in my code.

asp code:
.Write "<a class='fancybox' href='" & strURL & "')>Error</a>"

Open in new window

0
the_lone_noteAuthor Commented:
The strUrl contains the URL to the other page with the error message
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
It looks like you are calling a pop up inside of a pop up and that is a bit confusing.

See if this example helps.

1) Place blank modal code at bottom of your page.  Where the content should show up in the body, I have replaced with
<div id="modal-results"><!-- your results will appear here --></div>

Open in new window


2) We are going to run an ajax call to your asp page.  For ASP, it is best to place the page that receives data in a different folder.  The ajax can be a GET or POST it is up to you, just make sure you accept your data as either request.querystring or request.form

3) Capture the click in jquery.  In this case, I have a table with an a tag that has the class ordernumber
$('td a.ordernumber').on('click',function(){

Open in new window


4) Get the data from that td with
var order_number=$(this).text();

Open in new window


5) Send the data to your page (must be in same domain).  I have used a GET and if this were sending to an asp page, you would capture that with my_variable=request.querystring("order_number")
$.ajax({
  method: 'GET',
  url: 'http://output.jsbin.com/luqumu/1.html',
  data: { order_number: order_number }
})

Open in new window


6) Your asp page should output to a blank page

7) The current page we are on will grab the result data with
  .done(function( data ) {

Open in new window


8) Now load that data to our modal body
$('#modal-results').text(data);

Open in new window


9) Finally open the modal that will contain our new data
$('#myModal ').modal('show');

Working sample http://jsbin.com/qerize/1/edit?html,output
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <script>
    $(function(){
  $('td a.ordernumber').on('click',function(){
    var order_number=$(this).text();
    
    $.ajax({
  method: 'GET',
  url: 'http://output.jsbin.com/luqumu/1.html',
  data: { order_number: order_number }
})
  .done(function( data ) {
    // Fill modal-results with data
      $('#modal-results').text(data);
      // open the modal
      $('#myModal ').modal('show');
  });
    
    
  });
});
  </script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <table class="table table-striped">
    <tr>
      <td>order#</td><td>Sold To</td><td>Date</td>
    </tr>
    <tr>
      <td><a class="ordernumber" href="javascript:void(0)">1</a></td><td>Jack</td><td>Date</td>
      </tr>
      <td><a class="ordernumber"  href="javascript:void(0)">2</a></td><td>Jill</td><td>Date</td>
    </tr>
    
  </table>
  
  
  <!-- blank modal code -->
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Results</h4>
      </div>
      <div class="modal-body">
        <div id="modal-results"><!-- your results will appear here --></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>

Open in new window


Hopefully this will give you better guidance to what you are trying to do.  This is a very basic example and omits any error checking or formatting.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
the_lone_noteAuthor Commented:
Hi Scott, thank you for your code.

One question, the calling Classic ASP page resides in localhost:81, and the page with the response resides in: localhost:82
Will your Ajax solution work for these specifications?

Once again, many thanks
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I think going to a different port is the same as a different domain and can't be done in that manner.  You would have to make a slight modification and use jsonp https://learn.jquery.com/ajax/working-with-jsonp/  http://api.jquery.com/jquery.getjson/
0
the_lone_noteAuthor Commented:
I am trying to make a test page work with jsonp, but this is hard and not working, can you take a look and tell me what am I missing?
<% option explicit
%>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>    

<script type="text/javascript">
    $(function () {
        $("#dialog").dialog({
            autoOpen: false,
            modal: true,
            title: "Details",
            buttons: {
                Close: function () {
                    $(this).dialog('close');
                }
            }
        });
        $("#btnSubmit").click(function () {
            $.ajax({                
                type: 'POST',
                url: "localhost:81/order-error.aspx",
                data: { order: $("#order").val(), site: $("#site").val(), env: $("#env").val() },                
                dataType: 'jsonp',
                jsonp: 'callback',
                success: function (r) {
                    $("#dialog").html(r.d);
                    $("#dialog").dialog("open");
                }
            });
        });
    });
</script>
</head>
<body>
<table>
<tr>
    <td>
        Name:
    </td>
    <td>
        <input type="text" id="order" value="" />
    </td>
    <td>
        <input type="text" id="site" value="" />
    </td>
    <td>
        <input type="text" id="env" value="" />
    </td>
</tr>
<tr>
    <td>
        <input type="button" id="btnSubmit" value="Submit" />
    </td>
</tr>
</table>
<div id="dialog" style="display: none">
</div>
</body>
</html>

Open in new window

0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
replace this

  $("#dialog").html(r.d);
                    $("#dialog").dialog("open");

Open in new window


with

either alert(r) or console.log(r) to help see what is being returned or even better do you know how to use the browser's console to see what is being returned?  https://developer.chrome.com/devtools/docs/console  all the browsers have this.  You want to run the ajax then click the network tab, find the ajax file and you can see both the call and response.  That should give you some clues
0
the_lone_noteAuthor Commented:
Hi Scott.

I am not familiar with the browse's console, but I opened and re-submitted the page, and this is the message that I got in the console.

Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME

localhost:81/order-error.aspx?callback=jQuery172019637215067632496_1433427709125&order=A1G759&site=AWD00&env=STAGE&_=1433427763292 Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME

I noticed that the 3 parameters I passes are appended to the query string, but there are also some values that I do not what where are coming from.
0
the_lone_noteAuthor Commented:
The err. message went away, I needed to add the 'http' to the url.

But now I get a different error. Uncaught SyntaxError: Unexpected token <
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Make sure you are getting a good response from the page by running it directly with something like

order-error.aspx?order=A1G759&site=AWD00&env=STAGE&_=1433427763292

Open in new window


Once you get that working, then go back to your ajax code
0
the_lone_noteAuthor Commented:
I get a good response, I think. This is the html output of page order-error.aspx

<html> 
<head><title>

</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            font-size: 11px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        #content {
            width: 100%;            
            display: inline-block
        }
        .label {
            position:relative;
            float:left;            
            top:0;
            margin-right:5px;
        }
    </style>
</head>
<body>
    <div id="content">
        <div class="order">
            <div class="label">Web Order#: </div>
            <div id="orderno" class="value">A1G759</div>
        </div>
        <div class="error">
            <div class="label">Message: </div>
            <div class="value">
                <span id="lblOrderError"><Fault xmlns="http://schemas.microsoft.com/dynamics/2008/01/documents/Fault">
  <Code />
  <Reason>
    <Text xml:lang="EN-US">User is not authorized for this Endpoint.</Text>
  </Reason>
</Fault></span></div>
        </div>
    </div>
</body>
</html>

Open in new window


and the code-behind of order-error.aspx:

Partial Class order_error
    Inherits System.Web.UI.Page


    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load

        Dim siteKey As String = String.Empty
        Dim orderId As String = String.Empty

        siteKey = Request.QueryString("site").Trim
        orderId = Request.QueryString("order").Trim

        Me.lblOrderError.Text = Functions.GetAXErrorMessage(siteKey, orderId)

        Me.orderno.InnerText = orderId.Trim
        lblOrderError.Visible = True
 

    End Sub
End Class

Open in new window


This is over-whelming I must say.

I appreciate your help.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
The response you are getting is html, not json.   Do you have control over the output?
0
the_lone_noteAuthor Commented:
Yes
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
You are going to have to format your output.  If you are using localhost, why are you using 2 different ports?  You can access the same database, just put the ajax call to the same port?

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_28684095.html#a40813424

http://www.experts-exchange.com/Programming/Languages/.NET/Web_Services/Q_27257805.html

https://remysharp.com/2007/10/08/what-is-jsonp
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.