HTMLLib TextArea

ID:269162
 
Mar 27 2005, 1:50 pm
Hi again :). Well I have a message that is sent over a form made by the HTMLlib. I have a Textarea form object and when I input so much data into it it will cut off the rest of the data. So why is this happening?

Why is there and how do I get around this limit?
Mar 27 2005, 5:28 pm
BYOND only passes info from the browser through the GET method, so it's limitted to 256 bytes of data. Anything past that is truncated. You have two options. You can make a javascript to chop up the message and send it bit by bit to the server, or you could just embed a "BYOND://?" link in the page that prompts the user for the text though "input() as message" like BTG does it.
Mar 28 2005, 6:41 am
In response to Shadowdarke
Shadowdarke wrote:
BYOND only passes info from the browser through the GET method, so it's limitted to 256 bytes of data. Anything past that is truncated. You have two options. You can make a javascript to chop up the message and send it bit by bit to the server, or you could just embed a "BYOND://?" link in the page that prompts the user for the text though "input() as message" like BTG does it.

I havent used Javascript in 3 years so I think I want to do it the second way but Im not sure what you mean. Do you mean in the DisplayForm() function I would put
<a src="BYOND://?message">Message</a>

Then just use the Topic() and call the input() as message.

If so I got a 2 questions. Does the input have a limit? And this text will contain returns and tabs and such. From past experiance with input it doesnt handle those well. Is there a way to handle these will in input? Or is it handled well?

Mar 28 2005, 6:54 am
In response to Green Lime
Green Lime wrote:
Shadowdarke wrote:
BYOND only passes info from the browser through the GET method, so it's limitted to 256 bytes of data. Anything past that is truncated. You have two options. You can make a javascript to chop up the message and send it bit by bit to the server, or you could just embed a "BYOND://?" link in the page that prompts the user for the text though "input() as message" like BTG does it.

I havent used Javascript in 3 years so I think I want to do it the second way but Im not sure what you mean. Do you mean in the DisplayForm() function I would put
<a src="BYOND://?message">Message</a>

Then just use the Topic() and call the input() as message.


You have that exactly right. :) I usually display the current text and give them a link or button for editting it. HTMLlib has some instructions for letting it automatically handle buttons. Then all you'll have to do is define a proc on that form for inputting the value and redisplaying the form.


If so I got a 2 questions. Does the input have a limit? And this text will contain returns and tabs and such. From past experiance with input it doesnt handle those well. Is there a way to handle these will in input? Or is it handled well?

Yeah, input() doesn't handle formatting so well. Maybe I should make an improved input() like I did for alert(). ;) I'm not aware of any limits on input length. People have used BTG forms for huge chunks of text.
Mar 28 2005, 8:25 am (Edited on Mar 28 2005, 8:45 am)
In response to Shadowdarke
Shadowdarke wrote:
Green Lime wrote:
Shadowdarke wrote:
BYOND only passes info from the browser through the GET method, so it's limitted to 256 bytes of data. Anything past that is truncated. You have two options. You can make a javascript to chop up the message and send it bit by bit to the server, or you could just embed a "BYOND://?" link in the page that prompts the user for the text though "input() as message" like BTG does it.

I havent used Javascript in 3 years so I think I want to do it the second way but Im not sure what you mean. Do you mean in the DisplayForm() function I would put
<a src="BYOND://?message">Message</a>

Then just use the Topic() and call the input() as message.


You have that exactly right. :) I usually display the current text and give them a link or button for editting it. HTMLlib has some instructions for letting it automatically handle buttons. Then all you'll have to do is define a proc on that form for inputting the value and redisplaying the form.


If so I got a 2 questions. Does the input have a limit? And this text will contain returns and tabs and such. From past experiance with input it doesnt handle those well. Is there a way to handle these will in input? Or is it handled well?

Yeah, input() doesn't handle formatting so well. Maybe I should make an improved input() like I did for alert(). ;) I'm not aware of any limits on input length. People have used BTG forms for huge chunks of text.

Well now that Ive done that I want to figure out the other way :). Im just like that. How does the HTMLlib work? When you submit a form it sends data to the action file with its inputs as parameters to a list like bellow right?
file.asp?textname=value;textpass=value

So when you send a form with HTMLlib your just sending it like that right? except what is the action? or is it just left blank? If blank I think that means it just goes ?input=value.

Or maybe does the HTMLlib change the actual location to a ?input=value? Im guessing if it somthing like that then you handle the submision by browser with the Topic() proc right? I guess the problem is I dont understand how the get method and form element are handled on byond.

[EDIT] Hmmmm maybe I could just have a button variable and have that variableClick() proc. Then when some one clicks the button I take the inputs and do what I want with them. I dont have to transfer it using the get do I?
If I said like globalvariablename = name in the vbClick() proc then the globalvariablename would be the current value of the name input right?
Mar 28 2005, 9:02 am
In response to Green Lime
Green Lime wrote:
Well now that Ive done that I want to figure out the other way :). Im just like that. How does the HTMLlib work? When you submit a form it sends data to the action file with its inputs as parameters to a list like bellow right?
file.asp?textname=value;textpass=value

So when you send a form with HTMLlib your just sending it like that right? except what is the action? or is it just left blank? If blank I think that means it just goes ?input=value.

Or maybe does the HTMLlib change the actual location to a ?input=value? Im guessing if it somthing like that then you handle the submision by browser with the Topic() proc right? I guess the problem is I dont understand how the get method and form element are handled on byond.

For more advanced browser interaction, I would forego HTMLlib altogether. You can send information from a javascript to the BYOND game server by setting 
document.location.href="BYOND://?[your url encoded data]"

Topic() recieves the URL string and an associated list that is the URL string passed through params2list(). If one of those parameters is "src", then client.Topic() will try to locate a datum with that tag and send the info to that datum's Topic() proc. (That is why the form submits the data to BYOND://?src=[the form's \ref]. client.Topic() passes it straight to the form's Topic() proc.)

Anyway, to pass a text string longer than 200 characters or so, you need a javascript to chop the string up and feed it back to the server little by little. Use onChange or onSubmit to call your javascript function. I usually use something like. 
&lt;input name=JSmessage onChange='chg(this)'>

Then your javascript "chg" function can use the name and value of the object passed to it to construct strings and transmit them back to the server.

If you make a general purpose javascript package, you can even send it to the browser cache independantly from the html pages with browse_rsc to reduce bandwidth needed by the pages.

I'm hoping to write some articles on BYOND/Javascript interaction sometime soon.
Mar 28 2005, 2:02 pm
In response to Shadowdarke
Shadowdarke wrote:
Green Lime wrote:
Well now that Ive done that I want to figure out the other way :). Im just like that. How does the HTMLlib work? When you submit a form it sends data to the action file with its inputs as parameters to a list like bellow right?
file.asp?textname=value;textpass=value

So when you send a form with HTMLlib your just sending it like that right? except what is the action? or is it just left blank? If blank I think that means it just goes ?input=value.

Or maybe does the HTMLlib change the actual location to a ?input=value? Im guessing if it somthing like that then you handle the submision by browser with the Topic() proc right? I guess the problem is I dont understand how the get method and form element are handled on byond.

For more advanced browser interaction, I would forego HTMLlib altogether. You can send information from a javascript to the BYOND game server by setting
document.location.href="BYOND://?[your url encoded data]"

Topic() recieves the URL string and an associated list that is the URL string passed through params2list(). If one of those parameters is "src", then client.Topic() will try to locate a datum with that tag and send the info to that datum's Topic() proc. (That is why the form submits the data to BYOND://?src=[the form's \ref]. client.Topic() passes it straight to the form's Topic() proc.)

Anyway, to pass a text string longer than 200 characters or so, you need a javascript to chop the string up and feed it back to the server little by little. Use onChange or onSubmit to call your javascript function. I usually use something like.
&lt;input name=JSmessage onChange='chg(this)'>

Then your javascript "chg" function can use the name and value of the object passed to it to construct strings and transmit them back to the server.

If you make a general purpose javascript package, you can even send it to the browser cache independantly from the html pages with browse_rsc to reduce bandwidth needed by the pages.

I'm hoping to write some articles on BYOND/Javascript interaction sometime soon.

I just did a little overview of Javascript with an online guide. Im not sure what you exactly ment by that code above with the 
<input name=JSmessage onChange='chg(this)'>

I am guessing JSmessage is the form element that holds the value that I am entering into. And onChange is the event handler so when its changed? or maybe when submited if changed? Im not too sure as too what that event does. Any way that is calling a functiong chg with a parameter this. So that is where I am stuck. What is this? exactly? Is it a pointer to the object element JSmessage. So it points to document.formname.JSmessage?

What is the actual max size header you can send?
Cause I think Im just going to use an onClick event handler for a button. Then just send a url of ?text=and a part of the text. It would recive this in topic and append it too a variable. It would do this intell ?action=end would be sent which is the last part the javascript would send.

Sorry for being so bothersum Shadowdarke. I will be realeasing some kind of source so if any one else has this problem it woun't be as hard for them.

P.S. Thanks Shadowdarke
Mar 28 2005, 2:54 pm
In response to Green Lime
Green Lime wrote:
I just did a little overview of Javascript with an online guide. Im not sure what you exactly ment by that code above with the
<input name=JSmessage onChange='chg(this)'>

I am guessing JSmessage is the form element that holds the value that I am entering into.

Right.


And onChange is the event handler so when its changed? or maybe when submited if changed? Im not too sure as too what that event does.

onChange executes whenever an input field loses focus and its value is different from what it was before. It doesn't work for radio buttons, but does for checkboxes and the other input types. I like to use it to gradually update information as the user changes fields, instead of sending large amounts of data at the end. You could just as easily use the form's onSubmit method or an onClick method as you mention.


Any way that is calling a functiong chg with a parameter this. So that is where I am stuck. What is this? exactly? Is it a pointer to the object element JSmessage. So it points to document.formname.JSmessage?

Exactly right. The this var is sort of like src in DM. It passes a reference to the current object. This is what some of my javascript looks like in the critter design form in Darke Dungeon: 
function chng(X) {
    document.location.href="BYOND://?src=\ref[src]&chng="+X.name+   "&val="+X.value;}

function chk(X) { // for checkboxes
    document.location.href="BYOND://?src=\ref[src]&chng="+X.name+"&val="+X.checked;}

The Topic() that catches it looks like this: 
    Topic(href,hlist[])
        if(hlist["chng"])
            // user changed a var
            var
                chng = hlist["chng"]
                val = hlist["val"]
            if(chng in vars) // chng is a var of this datum
                if(val == "true) // checkbox is set
                    val = 1
                else if(val == "false") // checkbox is empty
                    val = 0
                else if(isnum(vars[chng])) // var stores a number
                    val = text2num(val)

                switch(chng) // special vars are checked here
                    if("ID")
                        // special validation when you change the ID var
                    if("text")
                        if(!val)
                            Display(usr,"Appearance", "The text mode \
                            display must be a single character long.")
                            return
                        else if(length(val)>1)
                            text = copytext(val,1,2)
                            Display(usr,"Appearance", "The text mode \
                            display must be a single character long.")
                            return
                // if the proc makes it this far without returning out, change the var
                vars[chng] = val
            else if(copytext(hlist["chng"],1,4)=="AI_")
                // AI_[num] is a checkbox for the AI flag with value of num
                var/index = text2num(copytext(hlist["chng"],4))
                if(val == "true")
                    flags |= index
                else
                    flags &= ~index
            else
                GMtell("Unrecognized CritType var: [hlist["chng"]]")


That way, I can name input elements the same as the var name that it is linked to. I included the "AI_num" section as a demonstration of how easily you can extend it beyond the simple varname/value scheme. My critter design datum uses several similar values.


What is the actual max size header you can send?

from http://www.developertutorials.com/tutorials/html/ html-form-tutorial-1/page2.html:
"
The GET method can send only a limited amount of information. The limitation depends on the server where the current web page is on and the server where the information is sent to. The limitation can be as little as 256 bytes but is often 1k or more."

I use 256 just to be on the safe side. Remember that "BYOND://?" takes up 9 bytes of that.


Cause I think Im just going to use an onClick event handler for a button. Then just send a url of ?text=and a part of the text. It would recive this in topic and append it too a variable. It would do this intell ?action=end would be sent which is the last part the javascript would send.

I would send a command to blank the var and tell the server how many chunks to expect. It might be a good idea to send a value with the information letting telling it which order to assemble the chunks in. I haven't had a problem with it yet, but sometimes packets arrive out of order and it doesn't take much effort to catch it. Finally, send an end of message notification.


Sorry for being so bothersum Shadowdarke. I will be realeasing some kind of source so if any one else has this problem it woun't be as hard for them.

P.S. Thanks Shadowdarke

It's no bother at all. You're very welcome. :)
Mar 29 2005, 5:50 am
In response to Shadowdarke
Well I have a problem with the code.
    proc/RunCodeEditor()
        var/code = file2text(file("[filelink]"))
        usr << browse({"
<html>
<head><title>Code Editor</title></head>
<body bgcolor="stone">
<form method="get" action="byond://?" name="CodeEdit">
Edit the code here.
<TEXTAREA NAME="Code" ROWS=30 COLS=50 WRAP="virtual">[code]</TEXTAREA>
<input type="button" value="Save" name="submit" onClick="JSmessage()">
</form>
<script language="Javascript">
var codemsg = document.CodeEdit.Code.value
function JSmessage()
{
    if(codemsg.length<=210)
    {
        document.location.href="BYOND://?action=go;ctxt=" + codemsg
        document.location.href="BYOND://?action=end;link=[filelink]"
        return 1
    }
    else
    {
        document.location.href="BYOND://?action=go;ctxt=" + codemsg.substring(0,210)
        codemsg = codemsg.substring(211,codemsg.length)
        return JSmessage()
    }
}
</script>
</body>
</html>"},"window=CodeEditor;size=470x360;can_resize=0")

Well I hope you understand what it is doing. Im doing like I said I was going too. This was just a test and I was going to try and change it so Its more like you said you would do it. First with the chuncks and stuff. But I got a problem.
Ill give my Topic code too.
client/Topic(href,href_list[])
    if(href_list["action"]=="end")
        fdel(file(href_list["link"]))
        text2file(Hmain.code,file(href_list["link"]))
        Hmain.code = ""
        usr << browse(null,"window=CodeEditor")
    else
        Hmain.code = Hmain.code + href_list["ctxt"]
    return ..()

The problem is that the file I am saving too is just one big single line with out any returns or tabs or other such stuff. I was woundering how you transfer those types of things?
Mar 29 2005, 6:18 am
In response to Green Lime
Green Lime wrote:
The problem is that the file I am saving too is just one big single line with out any returns or tabs or other such stuff. I was woundering how you transfer those types of things?

You'll need to use escape() or encodeUrl() on the string to make sure all the invalid URL characters are converted to escape strings. I'm not sure if that will fix the problem with tabs and carraige returns. You may need to replace those yourself.

You'll also want to make sure that it doesn't truncate the string right in the middle of an escape code, or Topic won't put it back together properly. For example, "an example" becomes "an%20example" If it's cut in the middle of "%20", then that space won't be restored properly.

You could make BYOND look for and replace escape codes at the junction points, but I think it would be better just to make your javascript shorten the chunk a little if % is the last or second to last character in the chunk.