Solved

Display XML in IFRAME dinamically

Posted on 2004-08-09
17
835 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
  • 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
0
 
LVL 4

Author Comment

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

Thanks,
Jigit
0
 
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
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

 
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 500 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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

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 …
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
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…

746 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

8 Experts available now in Live!

Get 1:1 Help Now