Author Topic: AJAX and browsers  (Read 2101 times)

0 Members and 1 Guest are viewing this topic.

M. O.

  • Administrator
  • MasstKer
  • *
  • Posts: 9185
    • View Profile
    • http://www.tkc-community.net
Re: AJAX and browsers
« Reply #15 on: August 27, 2009, 07:21:40 pm »
The problem has to do with .innerHTML (textboxes have none). My AJAX event handler is only working with innerHTML, but I'll have to modify it for .value as well. So it looks like I need to pass a flag to the function.
Heckling is an art, and game hacking a science.

[TKC]Anothercheater

  • Heckler Apprentice
  • ****
  • Posts: 1349
    • View Profile
Re: AJAX and browsers
« Reply #16 on: August 27, 2009, 07:30:20 pm »
Code: [Select]
<?php
echo "<script type='text/JavaScript'>";
echo 
"document.getElementById('testboxid').value='hehe';";
echo 
"</script>";
?>


Thats pointless, instead write into the php file:
Code: [Select]
<script type="text/JavaScript">
document.getElementById('testboxid').value='hehe';
</script>

Server<->php<->Browser<->Javascript<->html

i hope u didnt write this this javascript code into the php file as response to a ajax-request. because thats not how u work with ajax and it doesnt work.

with ajax u just return the values not the code to update the document elements.
thats the point why there are callback-functions: http://www.developertutorials.com/learn-ajax/ajax-callback-function-2641.php

M. O.

  • Administrator
  • MasstKer
  • *
  • Posts: 9185
    • View Profile
    • http://www.tkc-community.net
Re: AJAX and browsers
« Reply #17 on: August 27, 2009, 08:19:24 pm »
Before I knew I couldn't add text through innerHTML I tried to call that php with the javascript.  :icon_razz2

Now my code works and looks like this:


Call:
Code: [Select]
<input name="test_button" type="button" onClick="ajaxRequest('test.php', 'testboxid', 'POST', 'value');" value="Test" />
Path
ID
Method : "POST or GET method"
Type : "Value or innerHTML"


test.php
Code: [Select]
<?php
echo date("H:i:s");
?>



Ajax:
Code: [Select]
function callback(serverData, serverStatus, id, sType) { // Anropas n?r vi f?tt datat fr?n servern

if(sType == "innerHTML")
{
if(serverStatus == 200)
{
    document.getElementById(id).innerHTML = serverData;   //Skriv ut datat i v?rt HTML element
} else {
document.getElementById(id).innerHTML = 'Loading...<br />';
}
}
else if(sType == "value")
{
if(serverStatus == 200)
{
    document.getElementById(id).value = serverData;   //Skriv ut datat i v?rt HTML element
} else {
document.getElementById(id).value = 'Loading...';
}
}
else
return false;
}


function ajaxRequest(sOpenThis, id, sMethod, sType)
{

var AJAX=null;  // magic variable


try
{
// Opera 8.0+, Firefox, Safari
AJAX = new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer Browsers
try
{
AJAX = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
AJAX = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}


AJAX.onreadystatechange = function()
{
if (AJAX.readyState==4 || AJAX.readyState=="complete")
{ // Kolla om det ?r helt klart.
callback(AJAX.responseText, AJAX.status, id, sType); // Skicka vidare informationen f?r bearbetning.
     } 
else
{
if(sType == "innerHTML")
     {
document.getElementById(id).innerHTML = 'Loading...<br />';
}
else if (sType == "value")
{
  document.getElementById(id).value = 'Loading...';
}
else
return false;
}
}

var sUrl= sOpenThis; // Detta ?r adressen vi vill ?ppna.


if(sMethod == "GET")
{

   AJAX.open("GET", sUrl, true); // ?ppna adressen.
   AJAX.send(null); // Skicka en f?rfr?gan.
   
}
else if(sMethod == "POST")
{

AJAX.open("POST", sUrl, true);
var params = "lorem=ipsum&name=binny";

AJAX.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
AJAX.setRequestHeader("Content-length", params.length);
AJAX.setRequestHeader("Connection", "close");

AJAX.send(params);
}

else
{
return false;
}


} //function


Heckling is an art, and game hacking a science.

[TKC]Anothercheater

  • Heckler Apprentice
  • ****
  • Posts: 1349
    • View Profile
Re: AJAX and browsers
« Reply #18 on: August 28, 2009, 01:46:17 am »
You can write:

Code: [Select]
<?=date("H:i:s")?>
Its often nicer :)

Oh the advantage of a js framework even for u could be:

Instead of:

Code: [Select]
document.getElementById('theId').blah()
you can write cross-browser-compatible:

Code: [Select]
$('theId').blah()
Bothering with some stuff just isnt necessary anymore especially if you want to create browser platform independent websites.

M. O.

  • Administrator
  • MasstKer
  • *
  • Posts: 9185
    • View Profile
    • http://www.tkc-community.net
Re: AJAX and browsers
« Reply #19 on: August 28, 2009, 08:54:53 pm »
Nono, frameworks would be cheating at this level.

Code: [Select]
<input name="button" type="button" onClick="ajaxRequest('file.php', 'listid', 'POST', 'innerHTML', 'amount=' + javascript:document.getElementById('textboxid').value );" value="Set" />
When I press the button I want the ajaxRequest to be called with the value of a textbox.

Can you write like that?
Heckling is an art, and game hacking a science.

[TKC]Anothercheater

  • Heckler Apprentice
  • ****
  • Posts: 1349
    • View Profile
Re: AJAX and browsers
« Reply #20 on: August 29, 2009, 12:36:45 am »
wtf is FISHY=""?

Code: [Select]
ajaxRequest('file.php', 'listid', 'POST', 'innerHTML', 'amount=' + javascript:document.getElementById('textboxid').value );
it shud be:

Code: [Select]
ajaxRequest('file.php', 'listid', 'POST', 'innerHTML', 'amount=' + document.getElementById('textboxid').value );
u use "javascript:" only when u call javascript over a link or as src of an html object.

M. O.

  • Administrator
  • MasstKer
  • *
  • Posts: 9185
    • View Profile
    • http://www.tkc-community.net
Re: AJAX and browsers
« Reply #21 on: August 29, 2009, 01:26:25 am »
Fishy is On Press or similar. Word filter takes it away.

When I use that code the debugger says it's undefined. If I use this.value it works (when I have a textbox for instance). But what if I want to call the ajax line from a button?
Heckling is an art, and game hacking a science.

M. O.

  • Administrator
  • MasstKer
  • *
  • Posts: 9185
    • View Profile
    • http://www.tkc-community.net
Re: AJAX and browsers
« Reply #22 on: August 30, 2009, 06:24:44 pm »
So this is what you have to do if you want to pass a variable :P

Code: [Select]
<script type='text/javascript'>
function test(el){
    while(el.tagName != 'FORM')
        el = el.parentNode;
    var input = el.getElementsByTagName('INPUT');
    var elementString = '';
    for(var i=0; i<input.length; i++)
        elementString += input[i].name + '=' + input[i].value + '&';
    elementString = elementString.substring(0, elementString.length - 1);
    alert(elementString);
}
</script>

Kind of stupid that just passing the document.getelementbyID('something').value doesn't work.


When I read some tutorial it said that you didn't have to convert strings to numbers in javascript, so I had some nice code, but my head blew when the script said that textboxinput 5> textboxinput 10. I made a lot of debugging, but finally I found the parseInt function.
Heckling is an art, and game hacking a science.

[TKC]Anothercheater

  • Heckler Apprentice
  • ****
  • Posts: 1349
    • View Profile
Re: AJAX and browsers
« Reply #23 on: August 30, 2009, 10:08:36 pm »
Code: [Select]
<script type='text/javascript'>
function test(el){
    while(el.tagName != 'FORM')
        el = el.parentNode;
    var input = el.getElementsByTagName('INPUT');
    var elementString = '';
    for(var i=0; i<input.length; i++)
        elementString += input[i].name + '=' + input[i].value + '&';
    elementString = elementString.substring(0, elementString.length - 1);
    alert(elementString);
}
</script>

Safer for transmission through GET methode:
Code: [Select]
<script type='text/javascript'>
function test(el){
    while(el.tagName != 'FORM')
        el = el.parentNode;
    var input = el.getElementsByTagName('INPUT');
    var elementString = '';
    for(var i=0; i<input.length; i++)
        elementString += input[i].name + '=' + encodeURIComponent( input[i].value ) + '&';
    elementString = elementString.substring(0, elementString.length - 1);
    alert(elementString);
}
</script>

encodeURIComponent(): http://xkr.us/articles/javascript/encode-compare/