Query Inside Iframe Using Jquery

My requirement is to create a chart of data from 2 sources that return data inside

different iframes on my page:

<iframe src="http://a.b.com/as/a.aspx" style="height250px; width360px"></iframe>
 
<iframe src="http://c.b.com/as/a.aspx" style="height250px; width360px"></iframe>

 

Now when I
try to load any of these locally using ajax I get CORS Error:

$(document).ready(function () {
    $("#GetInfo").click(function () {
        $.ajax({
            url: " http://a.b.com/as/a.aspx ", success: function (result) {
                $("#div1").html(result);
            }
        });
    });
});

 

So the
simplest way would be to query inside iframe using Jquery:

$(“#frameid”).contents().find(“div”).html(‘My
html’);

Ref :http://stackoverflow.com/questions/5924936/change-html-of-an-iframe-with-jquery/5926475#5926475

But, It
cannot be done in case the iframe src is in a different domain. I tried
accessing and got this error:

$(“#a”).contents()

1.
Blocked a frame with
origin “http://localhost:9107” from accessing a frame
with origin “http://popualertwsv01.msdwis.com“.
Protocols, domains, and ports must match. jquery.js:5883

SecurityError:
Blocked a frame with origin “http://localhost:9107&#8221; from accessing a
cross-origin frame.

 

So now I’m
creating a proxy that will send over JSON to this client page where the data
will be displayed on the Main HTML page only and not iFrames.

 

 

 

 

–>

Advertisements

Consuming WCF Services using jQuery

From <http://www.codeproject.com/Articles/132809/Calling-WCF-Services-using-jQuery>

 

Consuming WCF REST Services Using jQuery AJAX Calls

 

From <http://www.codeproject.com/Articles/128478/Consuming-WCF-REST-Services-Using-jQuery-AJAX-Call>

 

 

a.
this article will present a method to
consume WCF REST Services using jQuery AJAX calls at the web browser side

 

 

 

 

 

Q what is .svc file

 

 

 

svc files are used when you host your WCF service
in IIS.

See Microsoft’s doc here and here.

 

There’s a module within IIS that handles the
.svc file. Actually, it is the ASPNET ISAPI Module, which hands off the request
for the .svc file to one of the handler factory types that has been configured
for ASPNET

 

From <http://stackoverflow.com/questions/2113461/relationship-between-svc-files-and-wcf-projects>

 

 

WCF services hosted in IIS are represented as
special content files (.svc files) inside the IIS application. This model is
similar to the way ASMX pages are represented inside of an IIS application as
.asmx files. A .svc file contains a WCF-specific processing directive (@ServiceHost)
that allows the WCF hosting infrastructure to activate hosted services in
response to incoming messages. The most common syntax for a .svc file is in the
following statement.

 

From <http://msdn.microsoft.com/en-us/library/aa751792.aspx>

 

For more information about how WCF and
ASP.NET interact, see WCF Services and
ASP.NET
.

 

From <http://msdn.microsoft.com/en-us/library/ms733766.aspx>

 

All the SVC file is doing is saying that
at 
/x/y/z.svc I have a
WCF service which is capable of a 
lot more than just server-side pages and content files.
So please spin it up, make it available and allow my incoming connections to be
processed.

 

From <http://stackoverflow.com/questions/9925941/how-do-i-generate-the-svc-file>

How does the .SVC file in WCF Service work

 

From <http://stackoverflow.com/questions/9051818/how-does-the-svc-file-in-wcf-service-work>

 

 

Generally .svc file is used to allow IIS
hosting WCF service. It is just a declaration of the service type and service
host factory type. Factory will create service host and it will in turn host
the service. Service  is accessible by URL from virtual directory
structure + .svc file. That was true in .NET 3.x.

In .NET 4.0 you don’t need .svc file in two
cases:

– You are using ServiceRoute class
to configure routing for your service.
http://msdn.microsoft.com/en-us/library/ee358760.aspx

– You are using Configuration based
activation. 
http://msdn.microsoft.com/en-us/library/dd807499.aspx 

 

From <http://social.msdn.microsoft.com/Forums/vstudio/en-US/034ac9f4-c868-4174-b244-76e489af7935/do-we-really-need-svc-file>

As like in ASP.NET we have .aspx with @Page
directive which demands ASP.NET Runtime for the execution to IIS, same in
case of WCF, .SVC file contains @ServiceHost directive with
Service=”<Service Class>” to demand/instruct IIS about the
requirement of WCF Runtime for further processing the request.

 

From <http://social.msdn.microsoft.com/Forums/vstudio/en-US/034ac9f4-c868-4174-b244-76e489af7935/do-we-really-need-svc-file>

 A .svc file contains a WCF-specific
processing directive (@ServiceHost)
that allows the WCF hosting infrastructure to activate hosted services in
response to incoming messages.

 

From <http://msdn.microsoft.com/en-us/library/aa751792.aspx>

 

An SVC file contains a small snippet of
code that defines a Windows Communication Foundation (WCF) service. When
referenced, the file activates a specific service in response to the incoming
data. This service is run using Microsoft Internet Information Services (IIS).

 

From <http://pc.net/extensions/file/svc>

 

 

–>

XML Parsing using Jquery

image

$(xml).find(‘site’).each(function(){

var id = $(this).attr(‘id’);

var title = $(this).find(‘title’).text();

var url = $(this).find(‘url’).text();

$(‘

‘).html(‘url+'”>’+title+’‘).appendTo(‘#page-wrap’);

$(this).find(‘desc’).each(function(){

var brief = $(this).find(‘brief’).text();

var long = $(this).find(‘long’).text();

$(‘

‘).html(brief).appendTo(‘#link_’+id);

$(‘

‘).html(long).appendTo(‘#link_’+id);

});

});image

  1. .parseXML() returns Null

Ans.   This is coz the server was already returning valid xml. parseXML() needs to be used only if the response type is not xml.

 

 

PS: I had earlier thought of putting the xml in the web.config itself like this:

JQUERY Tips and Tricks.htm

1.    Delete all Rows of HTML Table: $(“table”).find(“tr:gt(0)”).remove();

2.     Add rows
to HTML Table

var tr;

            for (var i = 0; i < data.length; i++) {

                tr = $(‘<tr/>’);

                tr.append(“” + data[i].Key + “”);

                tr.append(“” + data[i].Value + “”);

                $(‘table’).append(tr);

            }

 
3.  Hide:$('#responseData').hide();

4.
Read a local resource: Give url:
“sites.xml”,

 

 

$(document).ready(function(){

                                        $.ajax({

                                                        type:
“GET”,

                                                        url:
“sites.xml”,

                                                        dataType:
“xml”,

                                                        success:
function(xml) {

                                                                        $(xml).find(‘site’).each(function(){

                                                                                        var
id = $(this).attr(‘id’);

                                                                                        var
title = $(this).find(‘title’).text();

                                                                                        var
url = $(this).find(‘url’).text();

                                                                                        $(‘<div
class=”items”
id=”link_’+id+'”></div>’).html(‘<a
href=”‘+url+'”>’+title+”).appendTo(‘#page-wrap’);

                                                                                        $(this).find(‘desc’).each(function(){

                                                                                                        var
brief = $(this).find(‘brief’).text();

                                                                                                        var
long = $(this).find(‘long’).text();

                                                                                                        $(‘<div
class=”brief”>’).html(brief).appendTo(‘#link_’+id);

                                                                                                        $(‘<div
class=”long”>’).html(long).appendTo(‘#link_’+id);

                                                                                        });

                                                                        });

                                                        }

                                        });

                        });

This is the xml:

<?xml version=”1.0″ encoding=”iso-8859-1″?>

 <sites>

   <site id=”0″>

     <title>Think2Loud</title>

                <url>http://www.think2loud.com</url&gt;

     <desc>

       <brief>this is the brief description.</brief>

       <long>…and this is the long description.  See how long
it is :)</long>

     </desc>

   </site>

   <site id=”2″>

5.       AngularJS
Instant search
: http://tutorialzine.com/2013/08/learn-angularjs-5-examples/

 

1.  Hide all:  $("textarea[id^='Details']").hide(); 
2.  Apply Css to all: $("div[id^='Panel']").css('margin', 35 + 'px');
3.  Add html : $("input[id^='TBStatus']").before("<img id='loadingImg' src='Assets\\LoadingS.gif' />");
4.  In case the position needs to be made constant: $("#CheckAll").css("right""20px").css("position""absolute");
5.  Change body color: $('body').css('background-color''Azure');
 
Rotate Image on clk by 180 degree and then back 180 degree on 2nd clk (eg. When u want to change the expander button to ^ on clk) WITH ANIMATION
A.  One way of doing this is to have 2 classes (1 to rotate 180deg and other to rotate back) and add class to html element on clk:
$('.rotate').click(function () {
        $(this).toggleClass('rotated');
    }); 
 

                              And in css

                .rotate
        {
            -webkit-transition-duration0.8s;
            -moz-transition-duration0.8s;
            -o-transition-duration0.8s;
            transition-duration0.8s;
            -webkit-transition-property-webkit-transform;
            -moz-transition-property-moz-transform;
            -o-transition-property-o-transform;
            transition-propertytransform;
            overflowhidden;
        }
        
        .rotate.rotated
        {
            -webkit-transformrotate(180deg);
            -moz-transformrotate(180deg);
            -o-transformrotate(180deg);
            -ms-transformrotate(180deg);
        }

6.
Call remote methods: This can be done in 2 ways,

a.    1st
that u have a restful svc like a webAPI that binds every HTTP verb to a method

b.    2nd in
other cases like mine, where I had a simple asp.net web app, my home.aspx was
calling svc.aspx and passing the method to be executed as  a “action” query
string : AJAXResponse.aspx?action=btn1_Clk&ID=” + iD;

Now in the c# code, in case u have
called
AJAXResponse.aspx,
then in it’s Page_Load(), check the action and call the method:

string action = HttpContext.Current.Request["action"];

            if (action == " btn1_Clk")
            {
                string ID = HttpContext.Current.Request["iD"];
                if (ID != null)
                    btn_Clk(ID);
            }

7.
Applying Gradient : Eg.

PASS
 $("#TBStatus" + BtnId).css('background-color''LightGreen');//.css({ background: "-webkit-gradient(linear, left top, left bottom, from(#ccc), to(#728C00))" }).css('font-weight', 'bold');  
   FAIL
   $("#TBStatus" + BtnId).css('background-color''Red');//.css({ background: "-webkit-gradient(linear, left top, left bottom, from(#ccc), to(#FF0000))" }).css('font-weight', 'bold');
 
8.  Unable to locate the exact element, use .prev() or .next()
9.  Common css:    css("visibility""visible"); .css("text-align""center")
10.Do a .trim() when assigning response JSON to js object ie deserializing or even when serializing etc.
11.id = String.fromCharCode(id.charCodeAt() + 1) //Eg of string manipulation
12.ID of btn in its event handler:  var id = event.currentTarget.id;
13.Show/hide panel on clk: TxtBoxId = event.currentTarget.id + "Text";$('#' + TxtBoxId).toggle('slow, linear'); 
14. 

Designing Functions:

The key is to start writing
everything in one function and then moving everything that u reuse to another
function such that no 2 lines of code are the same in the end….

 

 

–>

Browser Slideshow App

I recently created a Web Client that switches between configured Web Pages, switching each page after user configured time :

The workflow is like this:

1. Admin Configures the URLs and time using the Admin Page (RefreshAdmin.html)

2. He then launches the slideshow on a projector or such… (Slideshow.html)

3. The person passing by notices a Page and wants to read it

4. When he reaches his desk, he opens a web page that shows all articles/pages that the slideshow is looping (RefreshForU.html)

5. He then searches for the page he wants and reads it…

Technology Used:

1. Server Side: Asp.Net MVC4 webAPI

2. Client Side: JQuery, Bootstrap, AngularJS

The code is shared here.

 

PS..

Here’s how i was planning to do it bfr:

My aim is to create a webpage that would embed different sites using an iframe and hence display varied content .

I thought that doing this either through html or javascript would be straightforward, but I was mistaken.

For all sites I got this error http://stackoverflow.com/questions/6666423/overcoming-display-forbidden-by-x-frame-options and its resolution is really screwed up and also different for different sites

Anyways, now I’ve decided to launch new windows in fullscreen and display all the content instead.

window.open(URL,name,specs,replace)

From <http://www.w3schools.com/jsref/met_win_open.asp>

https://developer.mozilla.org/en-US/docs/Web/API/window.close