Jump to content


Photo

JS/AJAX script help


  • Please log in to reply
4 replies to this topic

#1 neoaddict

neoaddict
  • Members
  • PipPipPip
  • Advanced Member
  • 35 posts

Posted 24 April 2006 - 06:37 PM

<script type="text/javascript">
    function makeRequest(url) {
        var http_request = false;
        if (window.XMLHttpRequest) {
            http_request = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }
        if (!http_request) {
            alert('Your browser does not support AJAX or XMLHttpRequest!');
            return false;
        }
        http_request.open('GET', url, true);
        if (url == "checkcookie.php") {
            http_request.onreadystatechange = parse;
        }
        http_request.send(null);
    }

    function parse() {
        if (http_request.readyState == 4) {
            if (http_request.status == 200) {
                var css = http_request.responseText;
                document.getElementById("topsites").style.display = css;
            }
            else{
                alert('There was a problem with the request.');
            }
    }

    open('checkcookie.php');

    function omgmagic() {
        if(document.getElementById("topsites").style.display == 'none'){
           makeRequest('show.php');
           document.getElementById("topsites").style.display = '';
        }
        else{
           makeRequest('hide.php');
           document.getElementById("topsites").style.display = 'none';
        }
    }
</script>

<div style="cursor: pointer;" onclick="omgmagic()">Expand/Collapse Topsites Images</div>

That's my current code so far - I think I've got all the AJAX right, but I don't know what to put in the PHP files except setcookie, perhaps?

Thanks.


#2 GBS

GBS
  • Members
  • PipPipPip
  • Advanced Member
  • 108 posts

Posted 24 April 2006 - 07:52 PM

Hi there,
I guess you have a little mistake in your 'parse()' function,, (JS console under firefox reports a missing "{")
I think it should be more about:
    function parse() {
        if (http_request.readyState == 4) {
            if (http_request.status == 200) {
                var css = http_request.responseText;
                document.getElementById("topsites").style.display = css;
            }
            else{
                alert('There was a problem with the request.');
            }
    }
    }
Hoping it helps,,
l8tr,,
Sorry for my english,... I do my best, but sometimes,...
1st intention: understand the problem
2nd intention: try to solve it
3rd intention: try to understand how to solve it :)

#3 neoaddict

neoaddict
  • Members
  • PipPipPip
  • Advanced Member
  • 35 posts

Posted 24 April 2006 - 09:54 PM

Thanks.

Now I need to work on what to put in the PHP files - don't even have a clue to what to put in checkcookie.php.

Any suggestions? (I know this is the JS forum - but I can't post in the PHP forums for some reason..)

Also, do you know how to make text change in a div using Javascript when someone clicks on it without reloading the page? (AJAX maybe?)

#4 GBS

GBS
  • Members
  • PipPipPip
  • Advanced Member
  • 108 posts

Posted 25 April 2006 - 02:04 PM

hmm, for the php part, you have to check the php forum, & also, I'm not good enough to play with cookies things for now,... [long time without php scripting there,,, :) ]

For the JS part, I can show you some JS examples to hide/change elements,,
You don't need AJAX to make text change in a div, after some onclick/onchange/etc... events,
This code could help you to start:
<html>
<body>
<script>
function SayHello()
{
document.getElementById('text1').innerHTML="Hello the world :)";
}
function AssignValue(node)
{
node.setAttribute("value",node.value);
document.getElementById('text2').innerHTML="you said: <b>"+node.getAttribute("value")+"</b>";
}
function Hide(node)
{
node.style.visibility="hidden";
document.getElementById('showagain').style.visibility="visible";
}
function Show()
{
document.getElementById('showagain').style.visibility="hidden";
document.getElementById('hideme').style.visibility="visible";
}
</script>
<input type="button" value="click me" onclick="SayHello()">
<div id="text1"></div>
<br>
Type some text:
<input id="input1" type="text" onchange="AssignValue(this)">
<div id="text2"></div>
also, to hide/show some elements:
<input id="hideme" type="button" value="Hide me" onclick="Hide(this)"><br>
<input id="showagain" type="button" style="visibility:hidden;" onclick="Show();" value="show me back">
<script>
document.getElementById('input1').value="";
</script>
</body>
</html>
'innerHTML' changes the value of an element & 'style.visibility' makes visible or not an element,

Good luck,,
l8tr,
Sorry for my english,... I do my best, but sometimes,...
1st intention: understand the problem
2nd intention: try to solve it
3rd intention: try to understand how to solve it :)

#5 neoaddict

neoaddict
  • Members
  • PipPipPip
  • Advanced Member
  • 35 posts

Posted 25 April 2006 - 02:31 PM

Thanks, that worked. XD

Now to ask on the PHP Help forums.





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users