Solved

calling a external url in a popup

Posted on 2014-09-27
5
361 Views
Last Modified: 2014-10-20
Need help to make the URL1 (in first row) and URL2 (in second row)
a hyperlink that will fetch information from an external url(http:example.com?page1) and show in a popup. The URL for second row will be http:example.com?page2.


Here is the code
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div class="ui-grid-b">
  <div class="ui-block-a" style="border:0px solid black; width:90px;"><span> col1 </span></div>
  <div class="ui-block-b" style="border:0px solid black; width:80%; height:100%;"><span>
    Test col2 test twt test test test test test  999 
  </span></div>
  <div class="ui-block-c" style="border:0px solid black; width:10px;"> [b]URL1[/b]</div>
</div>
<div class="ui-grid-b">
  <div class="ui-block-a" style="border:0px solid black; width:90px;"><span> col1 </span></div>
  <div class="ui-block-b" style="border:0px solid black; width:80%; height:100%;"><span>
    Test col2 test twt test test test test test  999
  </span></div>
  <div class="ui-block-c" style="border:0px solid black; width:10px;">[b]URL2[/b]</div>
</div>
</body> </html>

Open in new window

0
Comment
Question by:G J
5 Comments
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 40347601
A lot of moving parts here.  You may get better answers if you deconstruct the question into bite-size pieces.  I can help you with this piece.
a hyperlink that will fetch information from an external url
This is often done via an AJAX request.  This article shows the "hello world" exercise with jQuery and AJAX.
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/A_10712-The-Hello-World-Exercise-with-jQuery-and-PHP.html
0
 

Author Comment

by:G J
ID: 40347619
Thanks for your response Ray.
jquery.mobile-1.4.2.min.js autoamtically makes the ajax calls with an href is used.
I tried the below approach. This works but is very slow in IE11.
Can you suggest any improvment please?     May be have only one iframe and call it in each row?

Here is the Code.
<a href="#popup1" data-rel="popup" data-position-to="window" data-role="button" data-mini=true data-theme="a" data-inline="true" onclick="$('#popup1').popup(); $('#popup1').popup('open');">Information</a>

<div data-role="popup" id="popup1" data-corners="false" data-tolerance="15,15" data-transition="slide">
  <a href="#" data-rel="back" data-role="button" data-theme="b" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
 <iframe src="http://mysite.com/test.php?row=2" width="680" height="320" seamless></iframe>
</div>
0
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 40347762
Is this only slow in IE11?  How about Firefox and Chrome?
0
 
LVL 14

Expert Comment

by:dejaanbu
ID: 40348246
not sure about browser issue. But data-rel="popup" attribute is enough . hope there is no need for onclick attribute setting
0
 
LVL 34

Accepted Solution

by:
Slick812 earned 500 total points
ID: 40357815
???  the newest IE11 uses a Different AJAX DOM configure, which can be screwy for older Jquery versions, you have this -
     jquery-1.10.2.min.js

to really work in IE11, you need to use at least the jquery  version 1.11.0  , where they have Updated the Ajax code for the new IE,

for the most part the version 1.11.0 is backwards compatible.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question