• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 830
  • Last Modified:

Displaying flash file from a page inside a div using AJAX


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
YZlat
Asked:
YZlat
  • 14
  • 10
  • 4
2 Solutions
 
wellholeCommented:
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
 
YZlatAuthor Commented:
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
 
wellholeCommented:
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
YZlatAuthor Commented:
That's not really an option for me because flash is generated programmatically, using javascript
0
 
wellholeCommented:
So then take the html code for the flash object from the webpage directly.
0
 
YZlatAuthor Commented:
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
 
wellholeCommented:
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
 
YZlatAuthor Commented:
how can I debug in firefox? i've never done that before
0
 
wellholeCommented:
Get firefox, install firebug addon, restart firefox, look for a bug on your firefox window information bar.
0
 
YZlatAuthor Commented:
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
 
wellholeCommented:
That's not what I asked from you. See my post 33628810.
0
 
YZlatAuthor Commented:
check my post 33629506
0
 
YZlatAuthor Commented:
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
 
wellholeCommented:
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
 
wellholeCommented:
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
 
YZlatAuthor Commented:
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
 
wellholeCommented:
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
 
YZlatAuthor Commented:
well, how can I use firebug to edit live html?
0
 
wellholeCommented:
You click on the firebug, goto the html tag, and start editing. I don't know how anyone can explain this any easier.
0
 
b0lsc0ttCommented:
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
 
YZlatAuthor Commented:
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
 
b0lsc0ttCommented:
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
 
YZlatAuthor Commented:
What do you mean by sending just the html that goes into div? To remove <html> and <body> tags?

0
 
b0lsc0ttCommented:
>> 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
 
YZlatAuthor Commented:
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
 
YZlatAuthor Commented:
P.S> removing <html> and <body> tags had no impact
0
 
b0lsc0ttCommented:
>> 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
 
YZlatAuthor Commented:
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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 14
  • 10
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now