<html>
<head>
<link rel="stylesheet" href="http://acctable.lostsys.com/accDataGrid/accDataGrid1.css" type="text/css" />
<script type="text/javascript" src="http://acctable.lostsys.com/accDataGrid/accAjax.js"></script>
<script type="text/javascript" src="http://acctable.lostsys.com/accDataGrid/accDataGrid1.js"></script>
</head>
<body>
<table cellspacing=0 class="llistaDades" id="taulaDades"></table>
<script>
var ldades=document.getElementById("taulaDades");
accDataGrid( ldades );
ldades.regByPag=10;
ldades.minRegByPag=5;
ldades.maxRegByPag=20;
ldades.stepRegByPag=5;
ldades.urlData="./data.php";
ldades.refresh();
</script>
<body>
</html>
Tag Archive for ajax
Paginación de tablas
Select ajax DOM Fill
<html>
<head>
<title>Select ajax DOM Fill</title>
<script type="text/javascript" src="XHConn.js"></script>
</head>
<body>
<script type="text/javascript">
function fill( ) {
var fnCarica = function (oGet) {
objSelect = document.getElementById('elemento-select') ;
var sJSON = oGet.responseText;
var oJSON = eval(sJSON);
var nOpt
for( nOpt=0;nOpt<oJSON.length;nOpt++) {
objSelect.options[objSelect.options.length] = new Option( oJSON[nOpt].text , oJSON[nOpt].value )
};
};
new XHConn().connect('fill.txt', 'GET', '' , fnCarica);
}
</script>
<select id="elemento-select">
<option value="valore1">etichetta1</option>
<option value="valore2">etichetta2</option>
<option value="valore3">etichetta3</option>
</select>
<button onclick="fill()">bau</button>
</body>
</html>
AJAX Form POST Request – HTML Form POST/Submit with AJAX/Javascript Example/Tutorial
post.html:
<script type="text/javascript" language="javascript">
var http_request = false;
function makePOSTRequest(url, parameters) {
http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
// set type accordingly to anticipated content type
//http_request.overrideMimeType('text/xml');
http_request.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Cannot create XMLHTTP instance');
return false;
}
http_request.onreadystatechange = alertContents;
http_request.open('POST', url, true);
http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http_request.setRequestHeader("Content-length", parameters.length);
http_request.setRequestHeader("Connection", "close");
http_request.send(parameters);
}
function alertContents() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
//alert(http_request.responseText);
result = http_request.responseText;
document.getElementById('myspan').innerHTML = result;
} else {
alert('There was a problem with the request.');
}
}
}
function get(obj) {
var poststr = "mytextarea1=" + encodeURI( document.getElementById("mytextarea1").value ) +
"&mytextarea2=" + encodeURI( document.getElementById("mytextarea2").value );
makePOSTRequest('post.php', poststr);
}
</script>
<form action="javascript:get(document.getElementById('myform'));" name="myform" id="myform">
<textarea id="mytextarea1">my test
1
2
3
Prototype Ajax Request
//Make the AJAX call
var url = '';
var params = encodeURI('');
new Ajax.Request(url, {
asynchronous: true,
method: "get",
parameters: params + 'type=eval',
onSuccess: function(request){
//evaluate
eval(request.responseText);
},
onFailure: function(request){
}
});
Simple XMLHTTP Interface
/** XHConn - Simple XMLHTTP Interface - <a href="mailto:bfults@gmail.com">bfults@gmail.com</a> - 2005-04-08 **
** Code licensed under Creative Commons Attribution-ShareAlike License **
** <a href="http://creativecommons.org/licenses/by-sa/2.0/" >http://creativecommons.org/licenses/by-sa/2.0/</a> **/
function XHConn()
{
var xmlhttp, bComplete = false;
try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }
catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
catch (e) { try { xmlhttp = new XMLHttpRequest(); }
catch (e) { xmlhttp = false; }}}
if (!xmlhttp) return null;
this.connect = function(sURL, sMethod, sVars, fnDone)
{
if (!xmlhttp) return false;
bComplete = false;
sMethod = sMethod.toUpperCase();
try {
if (sMethod == "GET")
{
xmlhttp.open(sMethod, sURL+"?"+sVars, true);
sVars = "";
}
else
{
xmlhttp.open(sMethod, sURL, true);
xmlhttp.setRequestHeader("Method", "POST "+sURL+" HTTP/1.1");
xmlhttp.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
}
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState == 4 && !bComplete)
{
bComplete = true;
fnDone(xmlhttp);
}};
xmlhttp.send(sVars);
}
catch(z) { return false; }
return true;
};
return this;
}
Respond to Ajax
# CHANGED: Don't do this.
# if request.xhr?
# render :action => "add_with_ajax"
# else
# redirect_to :controller => "catalog"
# end
respond_to do |format|
format.html {redirect_to :controller => "catalog"}
format.js {render :action => "add_with_ajax"}
end
Pull in Info from a HTML File using innerHTML
/*Executed on click. Passes the url to the function. Function opens the URL then
*the parseResponse function is called
*/
function grabFile(file) {
var request = getHTTPObject();
request.onreadystatechange = function() {
parseResponse(request);//this is what happens once complete
}
request.open("GET",file,true);
request.send(null);
}
/*Once the request state is complete and the file exists, it grabs the results
* div, and inserts the response text and innerHTML.
*/
function parseResponse(request) {
if(request.readyState == 4){
if(request.status == 200 || request.status == 304){
var results = document.getElementById("results");
results.innerHTML = request.responseText;
} else {
alert("Something Broke!");
}
}
}
Pull in News from Yahoo API Using JSON HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <title>Javascript Testing</title> <!-- CSS Links --> <link rel="stylesheet" href="css/ajax.css" type="text/css" media="screen" /> <!-- Scripts Here --> <script src="js/global.js" type="text/javascript"></script> <script src="js/yahoo.js" type="text/javascript"></script> </head> <body> <h1>Yahoo Search</h1> <form onsubmit="searchYahoo(this.query.value); return false" action=""> <fieldset> <label for="">Search For</label> <input type="text" name="query" id="query" /> <input type="submit" value="Search" /> </fieldset> </form> <div id="results"></div> </body> </html>
Ajax Parsing XML Data
function basicAJAX(file) {//pass a variable into the function
var request = getHTTPObject();
if(request){
request.onreadystatechange = function() {
parseResponse(request);
};
request.open("GET", file, true);//this is where the var is picked up, the location
request.send(null);
}
}
function parseResponse(request) {
if(request.readyState == 4){//waits for the complete before execute.
if(request.status == 200 || request.status == 304){
var data = request.responseXML;//!Important <-----------------
createInfo(data);
} else {
alert("Something Broke!");
}
}
}
function createInfo(data) {
var holder = document.getElementById("showDiv");//the holder div
while(holder.hasChildNodes()){
holder.removeChild(holder.lastChild);
}
//grab the info
var personName = data.getElementsByTagName("name");//!Important <-----------------
var personPosition = data.getElementsByTagName("position");//!Important <-----------------
var personEmail = data.getElementsByTagName("email");//!Important <-----------------
var theUL = document.createElement("ul");
//name
var nameLI = document.createElement("li");
var nameLIText = document.createTextNode(personName[0].firstChild.nodeValue);
nameLI.appendChild(nameLIText);
theUL.appendChild(nameLI);
//position
var positionLI = document.createElement("li");
var positionLIText = document.createTextNode(personPosition[0].firstChild.nodeValue);
positionLI.appendChild(positionLIText);
theUL.appendChild(positionLI);
//email
var emailLI = document.createElement("li");
var emailLIText = document.createTextNode(personEmail[0].firstChild.nodeValue);
emailLI.appendChild(emailLIText);
theUL.appendChild(emailLI);
holder.appendChild(theUL);
}
Ajax Parsing JSON Data
function basicAJAX(file) {//pass a variable into the function
var request = getHTTPObject();
if(request){
request.onreadystatechange = function() {
parseResponse(request);
};
request.open("GET", file, true);//this is where the var is picked up, the location
request.send(null);
}
}
function parseResponse(request) {
if(request.readyState == 4){//waits for the complete before execute.
if(request.status == 200 || request.status == 304){
var data = eval('('+request.responseText+')');//!Important<----------
createInfo(data);
} else {
alert("Something Broke!");
}
}
}
function createInfo(data) {
var holder = document.getElementById("showDiv");//the holder div
while(holder.hasChildNodes()){
holder.removeChild(holder.lastChild);
}
//grab the info
var name = data.person.name;//!Important<----------
var position = data.person.position;//!Important<----------
var email = data.person.email;//!Important<----------
var theUL = document.createElement("ul");
//name
var nameLI = document.createElement("li");
var nameLIText = document.createTextNode(name);
nameLI.appendChild(nameLIText);
theUL.appendChild(nameLI);
//position
var positionLI = document.createElement("li");
var positionLIText = document.createTextNode(position);
positionLI.appendChild(positionLIText);
theUL.appendChild(positionLI);
//email
var emailLI = document.createElement("li");
var emailLIText = document.createTextNode(email);
emailLI.appendChild(emailLIText);
theUL.appendChild(emailLI);
holder.appendChild(theUL);
}