Page 1 of 1

Sending dynamic trigger through AJAX includes 4 dynamic form

Posted: Tue Dec 25, 2007 6:30 pm
by JAB Creations
I feature a few dozen tracks from almost as many artists at my website and would like to make it easy for my visitors to be able to email them from my website. However I would like to do so with a dynamic contact form.

I have already setup AJAX to essentially do a serverside to clientside "includes" (essentially replacing XHTML in a layer). Here is an example of how I do my AJAX "includes"...

Code: Select all

ajaxpage('includes/ajax-site-options-audio.php', 'promptsajax');
What would be an easy method for passing some sort of variable? I've seen stuff like contact.php,jane and I'm familiar with HTTP GET though I would appreciate recommendations!

Posted: Tue Dec 25, 2007 9:54 pm
by Kieran Huggins
Check out the jQuery load() method:

http://visualjquery.com/1.1.2.html

Look for it in the "ajax" section - it does exactly what you want, and can take an optional object of custom parameters you want to send along with the request.

Oh jQuery, is there nothing you can't do?

Posted: Tue Dec 25, 2007 10:18 pm
by JAB Creations
It's a great suggestion and I do heart jQuery, however my site is intended to eventually add other DHTML libraries and I'm trying to reserve using them for visual effects. I'm thinking an HTTP GET query with a PHP script that divides the strings by their commas is what my friend was trying out...so hence I don't need to specify a value, just a property. I'm guessing string,string,string,string counts as one HTTP property?

Posted: Tue Dec 25, 2007 10:27 pm
by Kieran Huggins
You could explode QUERY_STRING by commas...

On the note of reserving libraries for visual effects, I would consider ALL ajax/JS behaviours to be a progressive enhancement (i.e. don't require them). I don't see a reason to differentiate between them.

Posted: Wed Dec 26, 2007 11:26 am
by JAB Creations
I'm going with an HTTP GET property and value if I can. The issue is that when I call the contact form XHTML includes file via AJAX *with* an HTTP query it does not take effect, not sure why? Here is the function, and then the actual AJAX code I'm using to do "includes". Remember, the PHP file that is called by the AJAX includes is what reads the nameis HTTP query. I am pretty sure the AJAX script is somehow blocking the HTTP query though?

AJAX Function

Code: Select all

ajaxpage('templates/ajax-site-contact-email.php?nameis=john', 'promptsajax');
AJAX JavaScript

Code: Select all

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

Posted: Wed Dec 26, 2007 1:32 pm
by Kieran Huggins
Maybe I'm not exactly sure what you're trying to do, but I'm pretty sure load() would solve your problems entirely.

Can't pass an HTTP query via AJAX!

Posted: Wed Dec 26, 2007 1:42 pm
by JAB Creations
The load() function doesn't appear any where in my live copy of jQuery? If it did I'd try to get it to work independent of jQuery though.

What I'm now trying to do is get an HTTP query to work via AJAX request instead of a normal (initial) GET request.

Code: Select all

ajaxpage('templates/ajax-site-contact-email.php?nameis=john', 'promptsajax');
Pay attention to ?nameis=john, it's the HTTP query I want to pass along, or something, anything really. This is the AJAX function to call a file and stick it's XHTML code in to the layer.

It's a contact form. I want to setup an array of people with corresponding email addresses. If an HTTP query with a name isn't set it defaults to sending me the email written by the visitor. However if the PHP contact script sees an HTTP query defining someone else's name then the form will send the email to them instead.

So obviously if I load a normal page like contact.php?contact=john then the contact form will fill in the value, the value will be posted, the PHP form sees the post with the additional contact name set, and sends that person the email instead. That way I can setup my current contact script to handle email for artists. However I don't want to reload the whole page because I can't pass an HTTP query via AJAX. That is the issue I would like to resolve please. 8)

Posted: Wed Dec 26, 2007 1:57 pm
by Kieran Huggins
Personally, I would use either a select box (who would you like to send mail to?) or set a hidden form field via javascript (not ajax). Does that work for you?

Posted: Wed Dec 26, 2007 2:08 pm
by JAB Creations
Two Clicks for a one click function = *dies a dramatic death*

I'm trying to find any mention of passing an HTTP query through AJAX. I found this if it helps the cause any?
The fully formatted URI must be valid as defined by RFC 3986. The first part should just be the path to the program /cgi-bin/ACD.ACD.js? and doesn't need any escaping. The query-string (which begins just after the question mark) needs to be escaped using percent-encoding.

Posted: Wed Dec 26, 2007 2:42 pm
by Kieran Huggins
I don't think I've fully understood, maybe not enough coffee today.

AJAX requests are HTTP requests, GET, POST, PUT, DELETE, etc...

With GET requests you can pass variables in the URL itself (http://some.server.com/page.php?name1=val1&name2=val2) and with POST requests they're sent in the request body instead.

I really can't recommend using an AJAX library enough, when you want ajax! That being said, it sounds like your contact form would be best kept in a form.

Posted: Wed Dec 26, 2007 5:12 pm
by JAB Creations
The HTTP query (?query_property=query_value) does not work for me using the AJAX request. On a normal request (initial page load) it does. There are multiple artists per playlist page on my site. Why reload all the content on that page to call a contact form on a layer? Why duplicate the same contact form file for each artist? Therefor an HTTP query sent deciding who the receiver of the email (from the contact form) would work best...if only the HTTP query would be read by the contact form called by AJAX. Maybe I'm speaking designer to developers and I'm not using correct terminology someplace?