AJAX Suggest with Progress

[xscottehx]

Hi All,

I have created the javascript which i am happy is working. I use the http.open("GET","programname"+paramstring,true).

In my program that is called i am looking for a program that begins with the description entered in the search box. when i run the program the html input box runs fine when i start typing nothing happens. There are definately results. I am using the {&OUT} tag to output the results.

Is this the correct way to output the returntext or is it to do with the http.open command i am using?

Any help would be appreciated. Using progress v10.2b patch 03.

Thanks,

xscottehx

 

[medu]

well, is not very clear to me what do you want to achieve but i'll presume you want to display that text that you {OUT} somewhere in the page from which you triggered the ajax call.

after you call 'open' method on the xmlhttprequest object you still have to call 'send' in order to have it fire the request but before that you might also want to set the onreadystatechange property to point to some call-back function you define... in that function you can trap the readystate (should be 4 for success) and also check the status (http status code, should be 200)... if all went fine you can get your text send from webspeed program from responseText property.

this really doesn't have much to do with Progress, you might find better answers on javascript related forums if that info does not get you going.

 

[xscottehx]

I have already got all of this contained in my javascript:

function showProg(dsc)
{
var xmlhttp;
if (dsc.length==0)
{
document.getElementById("progAction").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}


xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("progAction").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_prog_srch.p?dsc="+dsc,true);
xmlhttp.send();
}

I am quite happy that the javascript is correct, would you agree?

Thanks again,

Scott

 

[medu]

function showProg(dsc)
{
  var xmlhttp;
  if (dsc.length==0)
  { 
    document.getElementById("progAction").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  }
  else
  {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }


  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      document.getElementById("progAction").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","ajax_prog_srch.p?dsc="+dsc,true);
  xmlhttp.send();
}

well, the code does look alright (try to use the code block for readability)... the only thing you might check is if the URL you provide is OK, you use a relative URL (relative to current page) so it actually depends what is the URL of the calling page and it this leads to the URL you expect to have in the end.

you might want to use firebug in firefox or developer tools in IE or Chrome to see what is the URL your request is using but first you might want to put a simple alert in the callback and see what the status is.

 

[xscottehx]

Originall the url was incorrect which i adjusted then the error message disappeared, so i can assume that it is finding the url. the url will not run by itself simply because all the program does it output some html which expects the surrounding head and body tags etc. I am going to test using wget to see if it returns anything once called.

Any more help welcome,

Thanks

Scott

 

[medu]

Well, when you assume it's working and it's not then it must be something wrong with the assumption isn't it?

As I've said before you should try to debug the javascript code you write, you should definitively get a browser that has support for web developers and see what is happening there... you might try to put some alert messages in there for start, are you sure you even get to do that ajax call?

  xmlhttp.onreadystatechange=function()
  {
     alert('state: ' +  xmlhttp.readyState + ' , status: ' +  xmlhttp.status);
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
       alert('response: ' +  xmlhttp.responseText);
      document.getElementById("progAction").innerHTML=xmlhttp.responseText;
    }
  }

See if you ever get something out of this, if you get a wrong status code then the URL is not good; if you get the response text then you might be looking for wrong html element (progAction)...

Not much more that we can do for you as we really don't have your environment at hand, but we can always give paid support

Marian

 

[xscottehx]

Thanks for your help medu,

After using a wget it wouldnt return anything. The url was correct however i made a shcoolboy error in not specifying an output type. After specifying the output type in my .p it now works a treat.

xScottehx

 

[webguy]

There is a reason jquery is becoming the number one javascript library around. For implementing ajax (cross browser) it cant be more simple then this.

Want to load some external html into a div

$('#content').load('test.html');
 
where #content is the id of the div you will load with your html from test.html. test.html could be another webspeed page that outputs the text you want to load.

Or you need more control?

$.ajax({
    url: 'test.html',
    type: 'POST',
    dataType: 'html',
    timeout: 1000,
    error: function(d){
        alert('There was an error grabbing data');
    },
    success: function(d){
        All is good do something with the html returned.
    }
});

alternatively you can use json as the dataType if you only want to capture specific pieces of data. in that case test.html could just be an output of json. Say you doa for each and output some data in json format.

$.ajax({
    url: 'json.html',
    type: 'POST',
    dataType: 'json',
    timeout: 1000,
    error: function(d){
        alert('There was an error grabbing data');
    },
    success: function(d){
        All is good do something with the html returned.
    }
});