Help?!-Posting cell data to new window?

The code below works great to create a new window with a simple link, or if you want to populate a link with data from the grid but i'm also looking to post data from the grid into that new window...

var linkTemplate = new AW.Templates.Link;
linkTemplate.setAttribute("target", "_new"); 

var myLinks = function(column, row){ 
        return "www.activewidgets.com"; 
} 

obj.setCellLink(myLinks, 0); 
obj.setCellTemplate(linkTemplate, 0);

What i'm looking for is a way to post a row of data when clicked on a link in the first column. I need the actual cell data itself to be posted to the area of the new window...so obviously the code below only posts celll data to the url.

var myLinks = function(column, row){ 
        return ("http://www.anysite.com/newwindowtext.html" + this.getCellText(0, row) + " " + this.getCellText(1, row) );
    } 

    obj.setCellLink(myLinks, 0); 
    obj.setCellTemplate(linkTemplate, 0);

Therefore i've used the code below to open a new window but I can't get the text to populate from the grid to the new window. I know I need to modify either the script code html page or something in the grid but I don't know how or where to start...i'm missing the code that populates the row data to the new window.

var linkTemplate = new AW.Templates.Link;
    
    var myLinks = function(column, row){ 
        return " "; 
    }

    obj.setCellLink(myLinks, 0); 
    obj.setCellTemplate(linkTemplate, 0); 
    obj.onCellClicked = function(event, column, row){
    [b]window.open('propertyprofile.html','Listing Data','left=20,top=20,width=500,height=600,toolbar=0,resizable=1');
    }[/b]

should i even be using "window.open" at all or can this be done simply using the grid?

is there even a way to call a blank html page and post data from the grid to it?

I'd also be open to using any other method (other than "alert") to bring up data from the grid into a new window.

Maybe a second grid below the original that i can post data to? How would I set this up?

Thank you in advance for your help.
AW rocks.

max freeman

March 14,

It appears that you don't quite understand what it is you are asking to do.

To open a new blank window and populate it yourself, you will need to write all the HTML code for that new page. Passing a URL to open() means it expects to find that page and just load and display it.

Here is a very simple example of how to do it with a bit of JavaScript (remember to unblock popups if your current browser settings have them blocked) -

<html><head><title>testing</title>
</head><body>
<H1>This is a test</H1>
<script>
    var	win = open('', '')

    win.document.writeln('<html><head><title>new window testing</title>')
    win.document.writeln('</head><body>')
    win.document.writeln('<H1><center>This is a test')
    win.document.writeln('<p>How does it look?</body></html>')
</script>
</body></html>

To do anything more sophisticated, it gets a little more involved. If you have existing grid data, you should be able to easily incorporate that as part of the writes. Also check all the options to open().

You also mention posting. This has a specific meaning within a web context. However, you could more easily write a CGI script and use the POST or GET methods to transfer data to the script.

Alternately, you could try using cookies.

Anthony

March 14,

I found a post that looks like it might work but how do I

"Hook up a function to the gridobj.onCellDoubleClicked which shows the div."?

http://www.activewidgets.com/javascript.forum.17083.5/popup-screen-with-details.html

basically all i'm looking for is to show a row's data in a new window or a new grid below the existing grid without using "alert".

The data in the new gird needs to based on which row the user clicks on

sorry for the confusion, i'm obviously new to any/all of this and would appreciate any help...thanks.

max freeman

March 15,

hello again...

from above:

"To do anything more sophisticated, it gets a little more involved. If you have existing grid data, you should be able to easily incorporate that as part of the writes."

this is exactly where i need some help. I do have existing grid data in csv form and populating to a grid successfully.

However, I don't know how to write the exact data from a row into the new window, or link it to the first column using the above script.

i'm obviously new to writing code, but i pick this up easily so just a general direction of where to look is fine. anything helps at this point. i'm not looking for anyone to write code or do the work, just point me in the right direction.

i'm working on the open() command. thanks.

max freeman

March 15,

First, you'll need to sort out your exact requirements.

Do you want a new window or another grid below the current one? What is it you are ultimately trying to do? Why do you need to display the same data twice?

Accessing the row data is relatively trivial since you have access to the row index when its clicked on or hovered over.

Start by working out exactly what you want done first. The grid below approach might be easier to start with. Do you want this hidden until a user clicks on a row? Or would you prefer it to be updated as the mouse pointer hovers over a row?

Anthony

March 15,

Anthony,

Thanks for your help and for your time. I'm sorry i'm not very good at this stuff yet (obviously).

The information I have is a list of addresses/properties with a bunch of other information in each row about that property. All of the information doesn't need to be dislpayed at once in the row.

To be more specific, the row data i have is sorted into about 30 columns and makes it difficult to display in the grid without the user scrolling back and forth like crazy.

Therefore what i'm doing is hiding some of the columns until a user clicks on a link in that row to pull the rest of the data in that row for display into another element such as a new window or box below the grid.

You're right essentially this means displaying the data twice, but if i hide certain columns until a user needs them then they can't see the data anyway to begin with.

The user needs to be able to view the rows and then click on a link in that row that opens the data in a new window, or second grid below. Then, when they click on another row, that row's info needs to be posted to the new window or box below the grid.

It's okay if they can only view one row at a time in a new window or box below the grid, but it would be better if they can compare side by side. (not essential)

If it's easier to post the row data into a new grid below, then that would work fine. In fact if you can point me to another post where i can get a good grasp on pulling row data from one grid and displaying it in another that would really help.

I like the idea of having a new window popup because users can then open multiple windows and compare the row data in multiple windows, as well as print, among other things. But if this is way too complicated then i'm open to other suggestions.

So, in a nutshell, when a user clicks on a row, or a link in a cell of that row, the entire row needs to be displayed in a new window, new grid, or other object that can display that row's info without the user having to scroll back and forth through 30 columns.

I've used an "alert" message to do this successfully, but these are annoying. Essentially though, this is almost exactly the effect I'm going for. Rollovers would work too accept it would be good to have the ability to print if possible.

It seems like a new window is the best option, but I don't know enough to put it together.

Again, I appologize for not being more specific earlier. Thank you sooo much for your help and advice.

Thanks

max

March 15,

OK, that makes a lot more sense now.

For starters, you don't need to use a hypertext link to drive the rest of what you want to do. So eliminating that will save you one of the display columns in the original grid.

If you just want to display the rest of the row data as you mouse over any part of a row, you could use a tooltip but, based on the rest of your description, your best option is a new window if a row is clicked.

Therefore the first thing you need to work out is how to detect a row click event. The information for that can be found here -
http://www.activewidgets.com/aw.system.html/setevent.html

Next, since you already know how to extact all the data in a row and put it in an alert, you can use that bit of code in your function registered as the mouse click event handler for grid rows. Get that working with the alert() call first and then proceed.

Since the amount of data is wide, it doesn't make much sense to display it in another grid. It sounds like it would display better if it was presented vertically, actually.

Within your event handler function, you could next try the above code I posted to open a new window. Set the context for that window and write some HTML code for it. If you web server supports CGI (it should) it might be easier to POST the data instead and let a CGI script work out how to display it but doing it with some JavaSCript might prove easier for you at the moment.

You can control the window location and size as part of the open() call. If your intention is the let users leave these window up until they are done with them, you might want to tile them horizontally so that they are easier to compare.

Printing can be done from the window menu options, so make sure you leave the menus if you decide to remove window decorations.

Anthony

March 16,

Anthony,

thank you.

i had no idea this was going to be so involved. I am obviously flying from the seat of my pants so i really appreciate the help.

My server does support CGI, but i have no idea how to play with it so javascript works fine.

the code below is the best i can do in 3 minutes of smashing up pieces of what i have. I can get the alert working fine, just as an alert. And obviously there are more rows involved.

The code so far just completely erases the grid.

And I'm a little fuzzy on how to insert the code from above into this function...

function myClickHandler(event){
        alert(this.getCellText(0, row) + this.getCellText(1, row) + this.getCellText(2, row) + this.getCellText(3, row));
    }

    var obj = new AW.HTML.INPUT;
    obj.setEvent("onclick", myClickHandler);
    var handler = obj.getEvent("onclick");


    var    win = open('', '')

    win.document.writeln('<html><head><title>test</title>')
    win.document.writeln('</head><body>')
    win.document.writeln('<H1><center>This is a test')
    win.document.writeln('<p>It looks great?</body></html>') 

    document.write(handler);

thanks for all your help so far! I know it's obvious how much i don't know about writing using AW and javascript, so your help really is huge! I'm sending this off now (obviously unfinished), but i'm still going to keep working to fix it hoping to hear back soon.

max freeman

March 16,

What other programming languages do you know? Perl, schell scripiting or C programming? Any cold work with CGI.

As far as your code is concerned, you should attach the onclick event function to your grid object. So, somewhere afer you do this -

var obj = new AW.UI.Grid

you should do this -

obj.setEvent("onclick", myClickHandler)

obviously using what ever names you wish for your object and function.

Within your event handler function, you should place the code to create the new window and populate it. Use a while or for loop to loop through all the columns of the clicked row.

So the pseudo-code would look something like this -

function myClickHandler() // we don't need the event so don't bother about the parameter.
{
var    i, win = open('', '') // check all the options to open to get the new windows right. You may also need to set the context.

win.document.writeln('<html><head><title>New Window</title>')
win.document.writeln('</head><body>')
win.document.writeln('This is some data at the top')

for (i = 0; i < the number of columns your grid has; i++)
    win.document.writeln('<p>' + this.getCellText(i, row)) // where does row come from?

win.document.writeln('<p>This should follow below</body></html>')  
}

That gives you the general idea. You'll need to fix up the code, obviously.

Hmm, using onRowClicked might suit the code better since the function gets passed the row. Look at the example here and incorporate that -
http://www.activewidgets.com/aw.ui.grid/row-mouse-events.html

Lastly, if people are using browsers that support tabbing, you may have some issues.

Anthony

March 16,

Anthony,
Popup window looks great. The code at the bottom of this post opens a totally new window when you click on any row. It's perfect!

I'm still trying to write data from the rows to the new window using an for or while loop. Again, if I wasn't so green about writing code i'd have this all figured out by now.

The only text showing in the window is the Property Profile Test Page and nothing below it. Obviously i need to work more on fixing the "for" loop. The "thank you for viewing" text never makes it to the page.

win.document.writeln('<p>' + this.getCellText(i, row)) // where does row come from?

The rows come from the grid, so i'm not sure what you're asking or what needs to be reformatted. The rows being loaded are different with every row clicked on. the row data being posted is the entire row from almost every column. sorry, i'm not putting the pieces together...

My users are/will be the general public using every major browser so making it as universal as possible would be great when referring to tabbing, etc.

obj.setEvent("onclick", myClickHandler) 

    function myClickHandler()
    {
    var    i, win = open('','','menubar=1,toolbar=0,resizable=1,scrollbars=0,width=400,height=500')

    win.document.writeln('<html><head><title>Property Profile</title>')
    win.document.writeln('</head><body>')
    win.document.writeln('<p>Property Profile Test Page')

    for (i=0;i<30;i++)
    win.document.writeln('<p>' + this.getCellText(i, row))

    win.document.writeln('<p>Thank you for viewing.')
    win.document.writeln('</body></html>')
    }

Also, when the new window opens it never finishes loading...it just looks like it gets stuck loading the page halfway through. I don't really care about this if it never goes away, but if it makes a difference in how the code is rendering in a new window then i should probably fix it.

Again, thank you so much for your help!!!

max freeman

March 16,

My comment about where does row come from was because row isn't passed as a parameter to the function so its not in scope.

It might be better to use -

obj.onRowClicked = function(event, row){...}

as it is passed the row. So change your code to -

obj.onRowClicked = function(event, row)
{
var    i, win = open('','','menubar=1,toolbar=0,resizable=1,scrollbars=0,width=400,height=500')

    win.document.writeln('<html><head><title>Property Profile</title>')
    win.document.writeln('</head><body>')
    win.document.writeln('<p>Property Profile Test Page')

    for (i=0;i<30;i++)
      win.document.writeln('<p>' + this.getCellText(i, row))

    win.document.writeln('<p>Thank you for viewing.')
    win.document.writeln('</body></html>') 
}

That should fix the for loop.

Even with the test I wrote up earlier, the page doesn't seem to finish loading. Obviously, there's something missing. I'm not sure what but a Google search on "JavaScript open" might help sort that out. At least you worked out the other open() options you wanted.

I'm not sure how to get around tabbed windows. It just means they can't do side by side comparisons. Its much the same issue if they have popups blocked. I don't know how to test for that. Perhaps if the open fails.

Anthony

March 16,

Anthony,
Everything works great!! Thanks again.

I'll figure out why the page doesn't load. The tabbed windows thing is no big deal. I think I can rewrite the code to include an altert if people have popups blocked which will tell them what to do if that be the case. I'll figure that one out later too.

One final formatting question (and then I swear I'll stop posting :).

Do you know how to structure the "for" loop so that columns 123 are displayed in the new window on one line and columns 456 are displayed on a second line?

I've been googling for loop examples and will probably figure it out soon, but thought i'd ask anyway. I know, i know, its a lame question, but the 1st 2nd and 3rd columns contain a street, city, and state data that would look better all on one line. This goes the same for other columns that might look better all paired up on one line.

here's the code...

for (i=0;i<30;i++)
      win.document.writeln('<p>' + this.getCellText(1, row) + this.getCellText(2, row)) + this.getCellText(3, row))

this displays the columns side by side in one line in the new window, but it does it 30 times.

Thank you again, your help has truly saved me many hours of research and experimental programming!!!

max

March 18,

Max, you'll need to develop a better understanding of how loops work in programming languages.

For what you want to do, you'll need to take those lines outside the loop. For example -

win.document.writeln('<p><b>Address: </b>' + this.getCellText(1, row) + ', ' + this.getCellText(2, row) + ', ' + this.getCellText(3, row))
win.document.writeln('<p><b>Some label you need to change: </b>' + this.getCellText(1, row) + ', ' + this.getCellText(2, row) + ', ' + this.getCellText(3, row))
for (i = 5; i < 30; i++)
    win.document.writeln('<p>' + this.getCellText(i, row)) 
// the rest of your code

A loop with just iterate through a list and repeat the same thing (basically).

All we really doing with this code is generating simple HTML text via the JavaScript write function. You can change the HTML tags to set whatever options you want (colour, background, fontsize, bold, italic, etc. in the standard fashion). So, if you need to change things, search for HTML rather than JavaScript. This site http://www.w3schools.com/default.asp has a basic reference that may help you.

Oh, and if you need better formatting, you'll probably need to mark up a table.

By the way, do you have your web pages up on the net? It might help us if we can see what you have happening so far.

Anthony

March 18,

Er ... slight correction to my code. The lines should read -

win.document.writeln('<p><b>Address: </b>' + this.getCellText(0, row) + ', ' + this.getCellText(1, row) + ', ' + this.getCellText(2, row))
win.document.writeln('<p><b>Address line 2: </b>' + this.getCellText(3, row) + ', ' + this.getCellText(4, row) + ', ' + this.getCellText(5, row))
for (i = 6; i < 30; i++) 
   ...

Since indexes in JavaScript start from zero. Just adjust this if you need to skip any of the columns. Or increment each value (including the initial value of the for loop iterator) if you need to offset by some number (i.e. to skip the first column, column 0, increase each numeric value above by 1 - except the terminating condition for the fop loop).

Anthony

March 18,

Anthony,
Thank you...with your code above and a little googling it all came together. After a little crash course in loops i've figured out exactly how to manipulate the code. thanks again for all your help!!! I really can't say enough about how much your advice and code tips have made this project go smoother. I'll be purchasing a license for aw soon to make it all go live online.

It's amazing how such a little thing like a pop up window can become a big deal.

My clients website is http://www.foreclosurestacker.com. It is a subscription based web service providing users with foreclosure listings in the western washington state area. We may provide listings in other states later, but for now this is the area he wants to focus on.

If you choose "DEMO" in the main menu you'll see our aw grid in action.

At the time of this posting the grid is still very much in an incomplete state. We are going to hide many of the columns you might see displayed so that the info pop's up in the new window we just made.

We are in a semi-live testing state right now with no active subscribers or users yet.

The core content is managed by Joomla CMS.

If you have any advice or tips on things we might want to change WE WOULD LOVE TO HEAR THEM! Especially before we actually go advertise and have problems later.

Thank you Anthony, you guys are great!

max

March 19,

Max, no worries.

I checked your demo with both FireFox and Netscape. Both worked as expected. No need to worry about tabbed windows. It opens a new window rather than a new tab even if tabs are the preference. I suspect this might be due to fact the new window has some of its settings passed.

The new windows still don't appear to finish loading. If you find a solution, let us know.

As for advice, its probably better if you asked specific questions. Eveyone has different ideas about design, layout, etc.

You may wish to check the grid with a large number of rows. Check that the row selector value on the left doesn't get truncated when the number is more than 3 digits.

Anthony

March 19,

OK, I worked out the popup window loading issue.

Add this to the end of your popup code -

win.document.close()

I kept trying it with just win.close() and wondered why it disappeared immediately! The correct code just closes the "pipe" while the other code closes a window opened by JavaScript.

Anthony

March 22,

Anthony,
yes, if i had checked back sooner i would have discovered your solution a day earlier. It all works spectacularly now and we'll be going live soon. thanks again for all your help and ideas. i know for a fact we (myself and my team) would have been swimming around for weeks trying to google our way into and out of this challenge.

thanks again

max

March 25,

This topic is archived.

Help?!-Posting cell data to new window?

See also:

Search

New Data Grid

Version 2