Multiples parameters through URL

[alexandre.marinho]

Hi,
I have a page with a set of checkboxs, but when I select them all and
send it to a new window as GET parameters I receive an error from the
server "Request URI is too long".

So I can't pass all the selected itens through URL, because it
generates a URL that is too big.

Here's how I'm doing it:

send = function(){
window.open("sistema-de-despesas/tipo-de-despesa?"+$('frm-
despesas').serialize(), "_blank", "height=400");
}

How should I be doing it? Is there a way to pass all these parameters
to a new window using POST instead of GET??

[T.J. Crowder]

Hi,

> ...I receive an error from the

> server "Request URI is too long".

Wow. Just how many checkboxes are we talking about? :-)

> How should I be doing it? Is there a way to pass all these parameters
> to a new window using POST instead of GET??

You could open the window with a loading message and use Ajax.Request
to POST the data to the server, then write the response to the new
window once you receive it. Something vaguely along these lines,
although this is just off the top of my head:

* * * *
var wnd;

wnd = window.open('', '_blank', 'height=400');
wnd.document.body.innerHTML = 'Loading...';
new Ajax.Request('sistema-de-despesas/tipo-de-despesa', {
parameters: $('frm-despesas').serialize(),
onSuccess: function(transport) {
wnd.document.body.innerHTML = transport.responseText;
}
});
* * * *

You'll want to check that wnd.document.body.innerHTML stuff to be sure
it does what you want (in particular the response from the server
would need to send back a fragment rather than a full page) and check
how portable it is. There may well be a better way to do that bit,
but this demonstrates the idea anyway...

Hope this helps,
--
T.J. Crowder
tj / crowder software / com

[Diodeus]

Yes, use POST.

[alexandre.marinho]

Hi T.J. Crowder,

It's about to 115 checkboxes!!! So it's a lot!!!

Your ideia to use POST with a ajax request sounds great to me.
I used your sample code and the page loaded, but all the CSS and
Javascript didn't load, even the html didn't load correctly .... all
links(a tags) won't work.

It seems to me that I would have to change a lot of things in order to
get that working the way you posted.... but the ideia to use POST with
ajax looks like the best way to get rid of my url problem.

--
Alexandre Marinho
Web Developer (PZP Team)

[Alex Hernandez]

Alexander, POST method doesn't care about the amount to data you
traffic from client browser and server.

After sending those checkboxes to the server, What do you expect to
see? do you want to update part of your page? or just return a flag
that indicates that your request was successful?

Using the example above from T.J., you can replace the content of
your body tag with the server response.

Your php script should evaluate the post (i.e. $name =
$_POST['Name'] // and do something useful with that) and as a response
you don't have to send the whole page, headers, styles etc, let's say
that you want to update a DIV with some information after doing the
request, you can use $('divID').innerHTML = transport.responseText;

Give it a try.

Alex

[alexandre.marinho]

So,

> Alexander, POST method doesn't care about the amount to data you
> traffic from client browser and server.
>
> After sending those checkboxes to the server, What do you expect to
> see? do you want to update part of your page? or just return a flag
> that indicates that your request was successful?

I know that POST care about the amount of data, that's why I want to
use it!
I need to send which one's were selected to a new window, and then
that new window will make a DB query based on those parameters.

Because of that new window i'm sending all parameters (through
serialize function) as GET parameters.
And that work, except when I select all checkboxes (115 total). In
this case the URL gets too big and cause 'Request URI is too long'
error.

> Using the example above from T.J., you can replace the content of
> your body tag with the server response.
>
> Your php script should evaluate the post (i.e. $name =
> $_POST['Name'] // and do something useful with that) and as a response
> you don't have to send the whole page, headers, styles etc, let's say
> that you want to update a DIV with some information after doing the
> request, you can use $('divID').innerHTML = transport.responseText;

What T.J. sugested, was that I open a blank new window and use a ajax
request to get the result(HTML) of the page I was previously opening
and then put that result on the blank page.
That's why the whole page was updated. I also tried to update a part
of the opened window, but that didn't work because it takes a while to
completely load a new window, and the ajax request finishes earlier. I
know that because I was debuging with firebug.

The only way around that is to, somehow, know when the new window
finishes loading. I don't know if that is possible.

But, as I said before, to do that in my page I would have to change a
lot of things that are alread working. Maybe in a 2.0 version!

Thanks everyone!!

[darrinholst]

>
> The only way around that is to, somehow, know when the new window
> finishes loading. I don't know if that is possible.
>

you have access to the opener in your popup, so you could load a
static blank page that calls back to the opener to let it know that it
has loaded...

blank.html:

<html>
<head>
<title>blank</title>
</head>
<body>
<span>Loading...</span>
<script type="text/javascript">
opener.blankPageLoaded();
</script>
</body>
</html>

var wnd = window.open('blank.html', '_blank', 'height=400');

var blankPageLoaded = function() {
//ajax post here
}

[T.J. Crowder]

> What T.J. sugested, was that I open a blank new window and use a ajax
> request to get the result(HTML) of the page I was previously opening
> and then put that result on the blank page.

Well, almost. I suggested that one approach might be to open a
window, use an Ajax.Request to load content, and write that content to
the window. I didn't mean to suggest that you wouldn't need to modify
the page coming back; in fact I mentioned you probably *would* need to
change it because it'll need to return a snippet of HTML (the content
of the body) rather than a full page with the example I was giving
you.

We can probably use your page unaltered though, by falling back on the
venerable document.write method. (Ducks as the group recoils with
gasps of shock and horror.) Also, we don't have to load the "loading"
page from the server, we can still avoid that round-trip:

* * * *
var wnd;

wnd = window.open('', '_blank', 'height=400');

wnd.document.open();
wnd.document.write(
"<html>" +
"<head>" +
"<title>Loading</title>" +
"<link rel='stylesheet' href='style.css' type='text/css'
media='screen' />" +
"</head>" +
"<body>" +
"<p>Loading...</p>" +
"</body>" +
"</html>");
wnd.document.close();
new Ajax.Request('test.jsp', {
onSuccess: function(transport) {
wnd.document.open();
wnd.document.write(transport.responseText);
wnd.document.close();

}
});
* * * *

This has the advantage that the "loading" window appears immediately.
Alternately, of course, you _can_ load a static file for the "loading"
page and use a callback from the loaded window as Darrin mentioned.
The success handler in the Ajax.Request would still be pretty much
like the above.

I've tested the above in IE6, FF3, Safari for Windows 3.1.1 (and then
3.1.2), and Opera 9.1. They all worked, except that Safari has an
issue that I think is a bug in Safari: It left the window title as
"Untitled" despite the fact that it is recognising the head element
and the link element within it (the text is styled correctly).

A side-effect I can think of is that the window isn't associated with
the URL that the content came from, since all of the content in the
window was generated by script.

Anyway, that should get you going.

On a side point: Are you _sure_ you want to open a new window? These
days it'll have to be opened within the event handler of a user action
(e.g., mouse click), and even then it's not at all guaranteed that the
browser / popup blocker will allow it...

Hope this helps,
--
T.J. Crowder
tj / crowder software / com

[alexandre.marinho]

Both ideias are very good! I think, for me, using the opener is the
best way.

But as T.J. have mentioned the window isn't associated with the URL so
I can't use a simple history.go(-1) as the pages go forward because
the content is generated from script....

About opening a new window, unfortunately I have to! Actually it's a
small system I open.... and it won't fit in my web site screen :S

But with all these tips I can do something great now....

--
Alexandre Marinho
PZP Team

[Matt Petrovic]

On Aug 5, 3:18 pm, "alexandre.marinho" <lyrale...@gmail.com> wrote:
> So,

> I need to send which one's were selected to a new window, and then
> that new window will make a DB query based on those parameters.

Is that all this window does? Take the data you give it and stuff it
into a DB?

[alexandre.marinho]

> Is that all this window does? Take the data you give it and stuff it
> into a DB?

No the new window show result of that query, whicth is a seriuos of
money calulations.

For that I need a huge datagrid that doesn't fit in the page's main
layout....

--
Alexandre Marinho
PZP Team

[Matt Petrovic]

what you can try doing is compressing the checkbox data down into a
smaller string.

What are you doing now? url.ext?box1=1&box5=1 etc and so on?

I assume since it's checkboxes, that each item is either 1 or 0. So
append them to a string to form a giant binary string, then convert it
into another base (10 or 16, for example). And then dump it to your
window in a single GET parameter, break it apart in your new window
and perform the query.

To make the string, you'll need to loop through all your checkboxes,
and append 1 or 0 based on the state of it's 'checked' parameter.
Can't leave any out or it'll be impossible to decipher on the other
end.