Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Display XML in IFRAME dinamically

Posted on 2004-08-09
17
Medium Priority
?
1,155 Views
Last Modified: 2013-11-19
Hi!

I'd like to display XML in IFRAME dinamically in expandable way, like it appears when you open XML file in IE. It has to look like XML preview: user edit XML in TEXTAREA element, clicks Preview button and the TEXTAREA's content should be displayed in IFRAME ( or any other element) in expandable, structured way.

xml_preview.document.body.innerHTML = xml_edit.innerHTML;

The above line only copies the content, but does not treat it as XML.

Any ideas will be appreciated,
Jigit
0
Comment
Question by:Jigit
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 9
  • 8
17 Comments
 
LVL 36

Expert Comment

by:Zyloch
ID: 11752172
Hi

XML is opened that way by default... just have something like this:

<iframe src="something.xml" name="iframename"> and it's fine... If you want it changed in the middle, just use iframename.location.href="newxml.xml"
Regards,
Zyloch
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11752177
Ahh, I see. You probably should create a temporary file for them to edit. That's the easiest way.  

Regards
1
 
LVL 4

Author Comment

by:Jigit
ID: 11752200
Zyloch, can you give a piece of code doing it?

Thanks,
Jigit
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 36

Expert Comment

by:Zyloch
ID: 11752234
Do you have a server-side language you can use?
0
 
LVL 4

Author Comment

by:Jigit
ID: 11752253
Unfortunately, everything must be done on the client - IE 5.5 or higher.
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11752699
Give me a little time--I'm working on it
0
 
LVL 4

Author Comment

by:Jigit
ID: 11759759
Zyloch, take your time, but it's pretty urgent. BTW, point were doubled.
0
 
LVL 4

Author Comment

by:Jigit
ID: 11770055
I solved it currently using server-side approach, which works pretty well. Unless there are client-side solutions, this question will be closed.
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11774147
Ah ok, sorry about not finishing it on time. I had a <div> solution that worked ok, but I was trying to change it into a table one for presentation purposes. You should just refund you points ;)
0
 
LVL 4

Author Comment

by:Jigit
ID: 11777878
Zyloch, you don't have to be sorry. I appriciate your efforts. Do you really have a client-side only solution? I'd like to see it and you will be rewarded appropriately.
0
 
LVL 36

Accepted Solution

by:
Zyloch earned 2000 total points
ID: 11780824
This is actually something really rough. I had a better version, but by accident, I used the same one to try to recreate the table one, so this is pretty rough and pretty quickly done with some flaws that need to be worked on, but it shows a basic tree layout most of the time. The collapsing doesn't work yet in this example (it did in the original), but just to show it's something like this:
-------------------------------------------------
<style>
a {text-decoration:none;}
</style>
<script>
function convertToXMLFormat(transformText,target,level) {
   if (transformText=="") {return true;}

   if (level==0) {
      target.innerHTML="";
   }

   var m = transformText.match(/<(.*)>.*?<\/\1>?/g);
   var numMatch = 0;

   if (m!=null) {
      numMatch = m.length;
   }
   else {
      target.innerHTML+="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
      target.innerHTML+="<b>"+transformText+"<b><br>";
   }

   for (var j=0;j<numMatch;j++) {
      var testPattern = /<(.*)?>(.+)?<\/\1>?/g.exec(m[j]);

      target.innerHTML+="<div>"
      for (var i=0;i<level;i++){target.innerHTML+="<span style=\"visibility:hidden;\">&mdash;</span>"}
      target.innerHTML+="<a href=\"javascript:toggleTree("+level+","+target+")\"";
      target.innerHTML+="-&nbsp;&nbsp;"
      target.innerHTML+="&lt;"+testPattern[1]+"&gt;<br>";
      convertToXMLFormat(testPattern[2],target,level+1);
      for (var i=0;i<level;i++){target.innerHTML+="<span style=\"visibility:hidden;\">&mdash;</span>"}
      target.innerHTML+="&lt;/"+testPattern[1]+"&gt;</td></tr></table><br>";
   }
}
</script>

<div id="xmlShow">
</div>

<textarea id="hey"></textarea>
<input type="button" value="Test" onclick="convertToXMLFormat(document.getElementById('hey').value,document.getElementById('xmlShow'),0);">
0
 
LVL 4

Author Comment

by:Jigit
ID: 11782334
Zyloch, I'm impressed by the code. It seems, that toggleTree function is missing. In addition, it ignores XML tags having attributes. Can we resolve it?

Thanks,
Jigit
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11783979
Yes, I've noticed that. I had a slightly better version, but being my idiotic self, I erased it in favor of trying to go with tables... It can probably be resolved (i.e. better use of regex). I admit the above code is a very rough draft that I've just drawn up because the tables thing didn't pan out.
0
 
LVL 4

Author Comment

by:Jigit
ID: 11799967
Zyloch, would you be so kind to publish final solution? It will be my pleasure to accept your answer.
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11853087
Sorry, I was on vacation. I'll get to it as soon as I get back
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 12071069
Dang, school almost began, I crammed for summer reading and didn't expect 3 essays first week back, jeez... anyways, thanks for the positive feedback, it's making me feel bad that I couldn't get it out in time, so I'm going to keep working on it when I have free time.
0
 
LVL 4

Author Comment

by:Jigit
ID: 12071417
Zyloch, you are welcome. I'll be waiting for your solution.
0

Featured Post

Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

Question has a verified solution.

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

Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL several years ago, it seemed like now was a good time to update it for object-oriented PHP.  This article does that, replacing as much as possible the pr…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

722 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