AJAX/Dojo help

Sharp101

ok, so I'm trying to set up one button to link to a php script that will read from a file and display the results on the page. Running the php file itself will diplay what I want, but I cant integrated it into the html page properly.....

The Javascript:

<script type="text/javascript" src="/dojoSrc/dojo.js"></script>

<script type="text/javascript">
	dojo.require("dojo.dnd.*");
	dojo.require("dojo.event.*");
	dojo.require("dojo.widget.*");
	dojo.require("dojo.widget.Button");
        
	function byId(id){
		return document.getElementById(id);
	}
	
	function buttonReadPressed()
    {
        
        // bind button to script, function and form
        dojo.io.bind({
                       url: 'test2.php',
                       handler: updateStatus,
                    });
    }
    
	function updateStatus(msg)
	{		
	msg = "<p>"+msg+"</p>"
	if(elem = document.getElementById("thread1"))
	elem.innerHTML = msg;
		}

function init(){
		var readButton = dojo.widget.byId('readButton');
		dojo.event.connect(readButton, 'onClick', 'buttonReadPressed')
	}

	dojo.event.connect(dojo, "loaded", "init");
</script>

the associated html

<button dojoType="button" id="readButton">View Sample Post</button>
<div id="thread1"></div>

what happens when I click the button is that just the word "load" is returned, like so

Before Click:


After Click:



I dont really think I need to post the php, because like I said, it runs fine..... I just can't get it's output to show up on the main page.

Any Ideas?

RoundBoy

I have no idea about dojo ... but I *do* know that you need to look at the readystate of the httprequest in the background that is being made.

What is writing the 'load' text? is that what you are using as a placeholder until the real article is loaded .. or is that the output of the php script?

Ramius

I just took a short tour through the dojo api documentation.

I don't know what sort of project you are using this in but wow there sure are some simpler more intuitive js frameworks out there.


Anyways, I see something that looks like this:

dojo.io.bind({
    url: "http://foo.bar.com/sampleData.txt",
    load: function(type, data, evt){ /*do something w/ the data */ },
    mimetype: "text/plain"
});

and something else that looks like this:

dojo.io.bind({
    url: "http://foo.bar.com/sampleData.txt",
    handle: function(type, data, evt){
        if(type == "load"){
            // do something with the data object
        }else if(type == "error"){
            // here, "data" is our error object
            // respond to the error here
        }else{
            // other types of events might get passed, handle them here
        }
    },
    mimetype: "text/plain"
});

In both cases, it looks like the callback function (updateStatus(msg) in your code) should receive 3 params. The first tells the type of io that occurred, the 2nd is the actual data. That is why you are getting the word "load" because you only have one param on your callback.

Sharp101

RoundBoy wrote: »

What is writing the 'load' text? is that what you are using as a placeholder until the real article is loaded .. or is that the output of the php script?

Thats the thing, this 'load' comes from nowhere.



Thanks Ramius, I'll see what I can do with that. Appreciate it!

RoundBoy

i am currently putting an 'ajax site', but i am doing it the old fashioned way..

Taking it by basics:

1) you make an HTTPRequest object
2) you request a url with it (in this case, a php page with arguments, etc)
3) the page returns text or xml, which another function processes ONLY when the requeststatus = 4 (done)

What I can figure out from the above, is that you have a div that you will write to, and the innerHTML will be replaced with whatever the php script returns from its article lookup .. .

in the updateStatus function, I would suggest a good starting point would be to alert(msg); to see exactly what is coming out of that result.

everything else i got is ajax specific, i just don't know anything about dojo

Sharp101

Yeah, I knew it was something simple.

I used code from another project that bound a different function to the button, and that function then called my updatestatus function. I copied the code, but left out the middle function, and forgot to update the updatestatus function from

function updateStatus(msg)
{}

to

function updateStatus(type, data, evt)
{ msg = data; }

just having it the first way made msg = type, which (apparently) is always 'load'.

Thanks Ramius, and the rest. You guys helped.