Solved

calling a external url in a popup

Posted on 2014-09-27
5
346 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 108

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 108

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 33

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
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…

920 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now