Solved

Displaying flash file from a page inside a div using AJAX

Posted on 2010-09-08
28
778 Views
Last Modified: 2012-08-14

I have a page that utilizes master page and has a <div> on it in which it displays asp.net page that displays two flash files. My main page is Default.aspx and page displayed inside a <div> is Page1.aspx

If I open Default.aspx, the Page1.aspx displays correctly except for flash file which is displayed as a grey box. But if I open Page1.aspx in a browser, it displayes everything fine. How can I make it display correctly inside a <div> on Default.aspx page?
0
Comment
Question by:YZlat
  • 14
  • 10
  • 4
28 Comments
 
LVL 9

Assisted Solution

by:wellhole
wellhole earned 100 total points
ID: 33628398
Since you're bringing the flash file into the page with ajax, you're modifying page content. You should use a browser to inspect the live page html to see if its correct. You can do this using firebug on firefox. Not so sure if how effective, or if even possible on other browsers, but chrome works too.
0
 
LVL 35

Author Comment

by:YZlat
ID: 33628572
that's the thing - page itself displays fine. The flash file displays without an issue, but inside the <div> it does not. I believe it might have something to do with flash file path
0
 
LVL 9

Expert Comment

by:wellhole
ID: 33628810
Again, you must see the live page html. It doesn't matter how the page looks at the moment.

In firefox, navigate to Default.aspx and Edit the <div></div> in question. Delete everything. Then, add the flash object manually. See if that works.
0
 
LVL 35

Author Comment

by:YZlat
ID: 33629506
That's not really an option for me because flash is generated programmatically, using javascript
0
 
LVL 9

Expert Comment

by:wellhole
ID: 33629518
So then take the html code for the flash object from the webpage directly.
0
 
LVL 35

Author Comment

by:YZlat
ID: 33629583
What I did is opened page source for Page1.aspx and saved it as html file. When I opened this html from IE, I got the same result as I did in Default.aspx page. I had to select "To help protect your security IE has restricted this file from showing active content that could access this computer" from the top of the page. That might be the same reason why it does not display on Default.aspx.

Do you know how can I enable active content?

0
 
LVL 9

Expert Comment

by:wellhole
ID: 33629740
You should be developing on firefox to take advantage of firebug. As far as I know, most web developers do.

As to answer your question, add <!-- saved from url=(0014)about:internet --> to the top of the html file.
0
 
LVL 35

Author Comment

by:YZlat
ID: 33630330
how can I debug in firefox? i've never done that before
0
 
LVL 9

Expert Comment

by:wellhole
ID: 33630540
Get firefox, install firebug addon, restart firefox, look for a bug on your firefox window information bar.
0
 
LVL 35

Author Comment

by:YZlat
ID: 33638024
I installed the firebug addon and restarted firefox. Then i opened my web page in firefox and I still don't see flash files inside the div and get no errors
0
 
LVL 9

Expert Comment

by:wellhole
ID: 33639117
That's not what I asked from you. See my post 33628810.
0
 
LVL 35

Author Comment

by:YZlat
ID: 33645754
check my post 33629506
0
 
LVL 35

Author Comment

by:YZlat
ID: 33646103
besides, there is no way for me to edit the <di> since it is empty because data is loaded using AJAX so it's not showing up in HTML
0
 
LVL 9

Expert Comment

by:wellhole
ID: 33646265
After your web page is loaded, you're telling me that your javascript is still generating the code for the flash? Should that not already be loaded? Firebug lets you EDIT the html LIVE. If javascript alters the html, then you'll see that exact code in firebug. What are you confused about?
0
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 9

Expert Comment

by:wellhole
ID: 33646303
Your <div> couldn't possibly be empty because, you say so yourself, ajax has loaded your <div> with Page1.aspx. If it's empty, you should not be able to tell that Page1 loaded inside the div but the flash is not displaying as your question states.
0
 
LVL 35

Author Comment

by:YZlat
ID: 33661938
it loads the page but if I view source code, the div does not contain any html code beacuse it is loaded through AJAX
0
 
LVL 9

Expert Comment

by:wellhole
ID: 33662719
Please use firebug to EDIT the html LIVE. View source does what it says; It lets you view the source. It's not for viewing the current html you're looking at. If you installed it, there should be a new icon in your firefox status bar.
0
 
LVL 35

Author Comment

by:YZlat
ID: 33664663
well, how can I use firebug to edit live html?
0
 
LVL 9

Expert Comment

by:wellhole
ID: 33664732
You click on the firebug, goto the html tag, and start editing. I don't know how anyone can explain this any easier.
0
 
LVL 54

Accepted Solution

by:
b0lsc0tt earned 400 total points
ID: 33667071
YZlat,

I just saw your post in the other question and have only had a chance to quickly read this.  I will try to help but may need to reread this later when I have time to provide a more detailed answer.  For now I just want to clarify a thing or two.

First, is page1.aspx a complete web page?  You mentioned it shows OK when you open it in a browser.  If you view its source then do you see all the html, including html, head and similar tags?  If so then you need to change that page.  If page1.aspx is used as part of an AJAX script then it just should send what is needed in the div (or whatever element is the container).  .NET isn't my expertise but I believe this would mean you won't use the master page with page1.aspx.  That would create a complete webpage and won't work as part on another.

The other expert has recommended Firefox and one of its great tools Firebug.  Good recommendations but you certainly don't have to develop with it.  The important thing in those recommendations is the point to look at the code.  However one thing that may not be clear is the difference between source and "generated source."  In some cases, when you view the source, it is just as it was sent initially, before any javascript or client-side script changed it.  Firebug can show the generated source but you may find a tool called Web Developer, another Firefox extension easier.  Web Developer adds a toolbar and you can view "generated" source by choosing that option when you click the View Source button in the toolbar.

If you use other browsers then they may also have a way to do this.  Like many others I love Firefox and use it but there are times when I have to develop in another.  IE and others have some of these same tools or abilities.  The key for this is to know if you are looking at just the initial source or "generated" source for the current page.

Before getting into this too much though you may have a problem that I mentioned in the previous question.  Flash isn't done like other html elements.  The objects or code used often need to be part of a page load.  I am not sure if it will work to have script just feed the html and script.  Now I know you can make changes but usually that is done when the object already exists (with some other Flash) or the Flash is hidden and you are just showing it.  It would be great to know if the generated source looks right but, if it does, then I am afraid this issue is your problem.

If it is then I need a better idea of these pages (or actually the part for the div) that are being loaded.  Is the Flash content really the only difference or is there a lot more?  Is Flash on each page?  If there is other content in this div that changes then how is it layed out with the Flash?

Also, when you are using AJAX and trying to get the Flash to go are you just sending the html code into the div or are you, in the case of the object, using Javascript to create the object and that DOM?  That may be all you need to have it work.  Just sending HTML for an object will most likely not be enough.

I hope this helps.  Please let me know if you have a question.

bol
0
 
LVL 35

Author Comment

by:YZlat
ID: 33671977
yes, Page1.aspx is a complete web page that is not using Master page. Default.aspx, on other hand, does use a master page.

And this code below is used to load Page1.aspx into a div on Default.aspx:


function ajaxpage(url, containerid){

var page_request = false

if (window.XMLHttpRequest) // if Mozilla, Safari etc

page_request = new XMLHttpRequest()

else if (window.ActiveXObject){ // if IE

try {

page_request = new ActiveXObject("Msxml2.XMLHTTP")

} 

catch (e){

try{

page_request = new ActiveXObject("Microsoft.XMLHTTP")

}

catch (e){}

}

}

else

return false



page_request.onreadystatechange=function(){

loadpage(page_request, containerid)

}



page_request.open('GET', url, true)

page_request.send(null)



}



function loadpage(page_request, containerid){



if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){

var divElement = document.getElementById(containerid);

divElement.innerHTML = '';

try {

divElement.innerHTML = page_request.responseText;

}

catch (e) {

var wrappingElement = document.createElement('div');

wrappingElement.innerHTML = page_request.responseText;

divElement.appendChild(wrappingElement);

} 





}

}

Open in new window

0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 33673844
In the future please use the snippet box for code snippets.  It make the comment and code easier to use and read.

Thanks for the answers.  Change page1.aspx (or make a new page to use) so it sends just the html that would go in the div.  Remember the result should still be a valid html page and it isn't valid to have a complete html page in a div tag.  Let's see if that fixes the problem.  Let me know if you have a question about doing it or what I said.

bol

p.s.  I am going to move the code into a snippet (I am a zone advisor so have the tools to do it).
0
 
LVL 35

Author Comment

by:YZlat
ID: 33715751
What do you mean by sending just the html that goes into div? To remove <html> and <body> tags?

0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 33718765
>> To remove <html> and <body> tags? <<

Yes and probably more.  You need to keep in mind what makes a page valid for html.  In the end that is what you have in the browser and the ajax part needs to make changes to the page that will still result in a valid web page.  I mentioned using a div as a "container" so the html that is sent in that container must fit with the rest of the page to make a valid web page.  Remember the "a" part because it is just one page since you no longer have frames/iframes.

Let me know if this still isn't clear or you have a question.

bol
0
 
LVL 35

Author Comment

by:YZlat
ID: 33736026
btw, I used Firebug to view the generated html and saw that when I open Page1 directly I get an <embed> tag with flash file in there, but when I open Default.aspx and Page1 is displayed inside the <div>, I get Javascript code that generated <embed> tag instead
0
 
LVL 35

Author Comment

by:YZlat
ID: 33736033
P.S> removing <html> and <body> tags had no impact
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 33740584
>> removing <html> and <body> tags had no impact <<

Do you have valid HTML now?  That is important to verify or anything else you may try could be impacted by bad html.

>> I get Javascript code that generated <embed> tag instead <<

That is what I was afraid of and discussed some in the comment at http:#a33667071 .  Starting with the paragraph "Before getting into this too much ..."  What you mentioned confirmed this.  You will have to do some extra Javascript code to create the element, not just fill in the html/javascript.  I made some suggestions and mentioned what I thought with the info provided in that same comment.  Please review it so I don't have to retype.  Let me know how that helps or if you have a question about it.  It included the way I would recommend trying to do this but I don't know how well that works with how you have this all designed and your "pages" for the content div.

bol
0
 
LVL 35

Author Closing Comment

by:YZlat
ID: 33746440
Looks like there is nothing I can do because of the issue with flash you have mentioned.

You have been very helpful. Thanks!
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

IntroductionWhile developing web applications, a single page might contain many regions and each region might contain many number of controls with the capability to perform  postback. Many times you might need to perform some action on an ASP.NET po…
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
In this tutorial viewers will learn how to create a basic shape tween animation in Flash including shape hints for smooth animation Open a new document in Flash: Draw a shape: Select another frame (how long you want the tween to be): Right click and…
The goal of the tutorial is to teach the user how to how to record live broadcast.

762 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

22 Experts available now in Live!

Get 1:1 Help Now