calling a external url in a popup

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

G JAsked:
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.

Ray PaseurCommented:
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
G JAuthor Commented:
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
Ray PaseurCommented:
Is this only slow in IE11?  How about Firefox and Chrome?
0
dejaanbuCommented:
not sure about browser issue. But data-rel="popup" attribute is enough . hope there is no need for onclick attribute setting
0
Slick812Commented:
???  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

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
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.