Solved

How to reload Frames with new data?

Posted on 2001-06-04
11
295 Views
Last Modified: 2010-04-09
Dear friends,

I have a frame. Inside the frame i am displaying a Table with datas. "onclick" of the Table header i am calling a JavaScript (onclick="JavaScipt:sort(param)) which sorts the table and writes back to the frame again.

When i write, the new table gets created below the old table and both the tables are there. I want to erase the old table from the frame and i want to write the new table in the frame. Is it possible.

Its done in Jsp, so if i reload the page it makes a server trip, which should not happen for sorting.

Can anybody help.

Best Regards,
Prasanna.
0
Comment
Question by:Prasanna23
  • 4
  • 4
  • 2
  • +1
11 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6152907
Can you post that part of the code that rewrites the table, and the HTML for
the frame with the table?

Cd&
0
 
LVL 8

Expert Comment

by:bebonham
ID: 6153019
the only way to do it is to write all you variables into another frame in the frameset. (in javascript)

that frame can write and rewrite as much as it likes

but it will all have to be handled in javascript

do you need more information or a sample?

Bob
0
 
LVL 5

Expert Comment

by:pstavrinides
ID: 6153272
create multiple div tags over one another, and set the position to absolute... use the visability property to hide/show your specific table when you want to.
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
LVL 8

Expert Comment

by:bebonham
ID: 6154447
yeah, but you cannot make a div tag and table of every possibility.

that would not be a dynamic solution.

if all the data is written into a javascript array, then the controling frame can change the table to any possibility without the use of divs.

Bob
0
 

Author Comment

by:Prasanna23
ID: 6154909
Dear Bob,

I am already using javascript array to store all my table data. I have already tried with div tag, it keeps generating the code every time i show and hide. So is there any other way rewrite the frame.

Can u please give me the sample code or more information regarding how to do it.

Thanks and Best Regards,
Prasanna
0
 

Author Comment

by:Prasanna23
ID: 6155213
Hai,

Here with i have given the code which i used. can anybody help.

Best Regards,
Prasanna
***********************************************************
function sort(param)
{
     alert("sort");
     myObjectBubbleSort(myObjectArray,objectArrayIndex,param);
     output="";
     showObjectArray(myObjectArray,objectArrayIndex);
}

function myObjectBubbleSort(arrayName,length,property) {
                         
     for (var i=0; i<(length-1); i++)
         for (var j=i+1; j<length; j++)
             if (eval('arrayName[j].' + property + '<arrayName[i].' + property))
          {
                 var dummy = arrayName[i];
                 arrayName[i] = arrayName[j];
                 arrayName[j] = dummy;
                 }
     alert('bubble');
}


function showObjectArray(object, length)
{    
    var l1= 0;
                         
    output += '<table bgcolor="FFDDB0" border="2"><tr><th><span onclick="JavaScript:sort(\'name1\')" style="color:blue; cursor:hand;">name1</span></th><th><span onclick="JavaScript:sort(\'name2\')" style="color:blue; cursor:hand;">name2</span></th><th><span onclick="JavaScript:sort(\'name3\')" style="color:blue; cursor:hand;">name3</span></th><th><span onclick="JavaScript:sort(\'name4\')" style="color:blue; cursor:hand;">name4</span></th><th><span onclick="JavaScript:sort(\'name5\')" style="color:blue; cursor:hand;">name5</span></th><th><span onclick="JavaScript:sort(\'name6\')" style="color:blue; cursor:hand;">name6</span></th><th><span onclick="JavaScript:sort(\'name7\')" style="color:blue; cursor:hand;">name7</span></th><th><span onclick="JavaScript:sort(\'name8\')" style="color:blue; cursor:hand;">name8</span></th><th><span onclick="JavaScript:sort(\'name9\')" style="color:blue; cursor:hand;">name9</span></th><th><span onclick="JavaScript:sort(\'name10\')" style="color:blue; cursor:hand;">name10</span></th><th><span onclick="JavaScript:sort(\'name11\')" style="color:blue; cursor:hand;">name11</span></th></tr>';

    for (l1=0; l1<length; l1++)
    {
     output += '<tr>';
     output += '<td>';
     output += object[l1].name1;
     output += '</td>';
     output += '<td>';
     output += object[l1].name2;
     output += '</td>';
     output += '<td>';
     output += object[l1].name3;
     output += '</td>';
     output += '<td>';
     output += object[l1].name4;
     output += '</td>';
     output += '<td>';
     output += object[l1].name5;
     output += '</td>';
     output += '<td>';
     output += object[l1].name6;
     output += '</td>';
     output += '<td>';
     output += object[l1].name7;
     output += '</td>';
     output += '<td>';
     output += object[l1].name8;
     output += '</td>';
     output += '<td>';
     output += object[l1].name9;
     output += '</td>';
     output += '<td>';
     output += object[l1].name10;
     output += '</td>';                                  
     output += '<td>';
     output += object[l1].name11;
     output += '</td>';                                  
     output += '</tr>';
    }

    output += '</table><div style="background-color:green; position:absolute; width:100px; height:100px; top:25px; left:25px; visibility:hidden;" id="menu"><a onclick="operation(0)"><u>Stop</u></a><br/><a onclick="operation(1)"><u>Start</u></a><br/><a onclick="operation(2)"><u>Pause</u></a><br/><a onclick="operation(3)"><u>Continue</u></a></div>';
    alert(output);
    parent.f3.document.write(output);
     
}




0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 75 total points
ID: 6155726
Put the table inside of a named:

<div id="thediv" style="position:absolute">
table stuff
<div>

The do the rewrite this way:

if (document.all)
{
   parent.f3.document["thediv"].innerHTML=output;
}
else
{
   if (document.layers)
   {
      parent.f3.document.layers["thediv"].document.write(output);
      parent.f3.document.layers["thediv"].document.close();
   }
}

That should overwrite the original table inside the div instead of appending the way it is doing now.

Cd&
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6155731
Looking at your code it looks like it is IE specific in whch case you don't need the whole thing; just:

  parent.f3.document["thediv"].innerHTML=output;

should do it.

Cd&
0
 

Author Comment

by:Prasanna23
ID: 6159074
HI Cd&,

You r simply Great. Million thanks to u. It worked. I owe u a drink.

Thanks a lot again,
Best Regards,
Prasanna
0
 

Author Comment

by:Prasanna23
ID: 6159082
Thanks
Best Regards,
Prasanna

0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6159192
Glad I could help.  Thanks for the A. :^)

Cd&
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

821 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