PDA

View Full Version : Resolved Dynamic Ajax Content and form post method



Patrixer
02-26-2012, 01:07 PM
1) Script Title: Dynamic Ajax Content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

3) Describe problem:
Hello, Firstly I'd like to something about me, because it's my first post on this forum. So I'm Patrick from Poland and I'm web-developer (at least I'm trying to be one ;) ).
But my problem:
I'm using this script on my page, it work's great with loading content, using colorbox (gallery, slodeshow plugin). But Last thing i want to make there, is web-based contact form.
I've made one and it works on other site without ajax loading.

When "contact.inc" file is loaded to specific div, I can see my form, but when I submit it, it opens "send.inc" file but doesn't execute code there. I've found simillar problem on this forum: here (http://www.dynamicdrive.com/forums/archive/index.php/t-62617.html) but in my case it doesn't work.
When I have:

<form action="javascript:ajaxpage('incl/send.inc','content')" method="post">
It opens send inc in content div.
When I have (copied from that thread):

<form action="#" onsubmit="$.ajax({url:'incl/send.php', data: $(this).serialize(), cache: false, type: 'post', success: function(data){$('content').html(data);}});return false;">
It refreshes whole page and show "GET" string:

...something?nazwa=name&wiadomosc=msg&temat=topic&mail=email&telefon=123456789#

Any suggestions ?

jscheuer1
02-26-2012, 01:52 PM
That indicates that the onsubmit action is not occurring. Without seeing the live page I cannot be certain though why that's the case. It could be because the jQuery tag:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

isn't present where required. It should be on the 'top' page in its head section. But it could be any number of other things.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

Patrixer
02-26-2012, 02:07 PM
Thank you for your reply :)
I'll add some code here, and if it is still not enough, I'll send you PM (I don't like showing uncompleted project :) )
One, main site, index.php file, header:


<head>
...
<link rel="Stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" href="colorbox.css" media="screen" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="jquery.colorbox.js"></script>
<script>
function zdjecie(){
$(document).ready(function(){
$(".group2").colorbox({rel:'group2', transition:"fade"});
});
}
</script>
... slideshow script here, doesn't matter...
<script type="text/javascript">

/***********************************************
* Dynamic Ajax Content- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

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
}
}
}

</script>
</head>


Contact.inc file:

<form action="javascript:ajaxpage('incl/send.inc','tresc')" method="post">
<div class="formularz">
<table border=0>
<tr>
<td>
<label>
<input type="text" class="wpis" name="nazwa" id="Imię i Nazwisko" value="Imię i Nazwisko" onFocus="if(this.value == 'Imię i Nazwisko') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Imię i Nazwisko';}" maxlength="50" />
</label>
</td>
<td rowspan="4">
<label>
<textarea class="wiadomosc" name="wiadomosc" id="wiadomosc" value="Zadaj nam pytanie..." onFocus="if(this.value == 'Zadaj nam pytanie...') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Zadaj nam pytanie...';}" style="overflow:auto, hidden"></textarea>
</label>
</td>
</tr>
<tr>
<td>
<label>
<input type="text" class="wpis" name="temat" id="Temat" value="Temat" onFocus="if(this.value == 'Temat') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Temat';}" maxlength="30"/>
</label>
</td>
</tr>
<tr>
<td>
<label>
<input type="text" class="wpis" name="mail" id="Mail" value="Adres e-mail" onFocus="if(this.value == 'Adres e-mail') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Adres e-mail';}" maxlength="40"/>
</label>
</td>
</tr>
<tr>
<td>
<label>
<input type="text" class="wpis" name="telefon" id="Telefon" value="Telefon kontaktowy" onFocus="if(this.value == 'Telefon kontaktowy') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Telefon kontaktowy';}" maxlength="12"/>
</label>
</td>
</tr>
</table>
<center>
<input type="submit" class="button" value="Wyślij"/>
<input type="reset" class="button" value="Wyczyść"/>
</center>
</div>
</form>

And send.inc file:

<?php
$nazwa = $_POST['nazwa'];
$temat = $_POST['temat'];
$mail = $_POST['mail'];
$telefon = $_POST['telefon'];
$wiadomosc = $_POST['wiadomosc'];
if ($nazwa =! '' && $temat =! '' && $mail =! '' && $wiadomosc =! '')
{
$to = 'my@mail.com';
$subject = $_POST['temat'];
$message = $_POST['wiadomosc'];
$headers = 'From: ' .$_POST['mail']. "\r\n" .
'Imie i nazwisko: ' .$_POST['nazwa']. "\r\n" .
'Adres E-mail: ' .$_POST['mail']. "\r\n" .
'Telefon: ' .$_POST['telefon'];
mail($to, $subject, $message, $headers);
echo 'Mail wyslany pomyslnie';
}
else
{
echo 'Podaj Imie, nazwisko, temat, mail oraz wiadomosc';
}

?>

jscheuer1
02-26-2012, 04:20 PM
I Still cannot be 100% sure of the problem. But I think this will fix it, let me know. Where you have:


... slideshow script here, doesn't matter...

That might actually matter. If it's Dynamic Drive's Ultimate Fade-in Slideshow, or any script that puts jQuery into noConflict mode, or even if there's anywhere else on or associated with the page any code that puts jQuery into noConflict mode, that would be the main problem. It would cause the exact result you are reporting.

And I do see one other minor problem regardless. This wouldn't cause the GET response you reported, but will need to be fixed if you want the response to show up in the tresc division.

To fix both do:


<form action="#" onsubmit="jQuery.ajax({url:'incl/send.php', data: jQuery(this).serialize(), cache: false, type: 'post', success: function(data){jQuery('#tresc').html(data);}});return false;">

It substitutes in three places the literal jQuery for the $ token (which presumably has been removed form the global scope), and substitutes '#tresc' for 'content' as the selector for the response from the incl/send.php page. If you really wanted it to go to the division with the id of content, it should be '#content' anyway. jQuery selectors are like css, requiring # to connote id.

One other possible problem. The path in the url:


'incl/send.php'

is relative. So it must be valid in relation to the index.php file's location. Is it?

From what you've said, I think that part is OK, but it never hurts to be sure.

The browser cache may need to be cleared and/or the page refreshed to see changes.

Patrixer
02-26-2012, 05:12 PM
I've sent you an invitation to contacts, because I can't send Private Message.
I've uploaded whole site to my ftp so I can give you a link.
Slideshow script isn't from this site, anyway, it's in source code.
And incl/send.inc is relative to index.php, not to contact.inc, so yes :)
But still doesn't working.
As I mentioned in first post, I saw your answer in simillar topic and copied that "form" you gave, but it didn't work.

jscheuer1
02-26-2012, 06:14 PM
That's not how the invitation works. It's just a friend request and separate from the PM system. Once you have 5 posts and 15 days of membership you can use the PM system. So you are a ways from the 15 days part. Being only 2 posts shy of the 5 needed doesn't help with that. You need both. What you can do is add an email contact in your user profile. No one except users here with 5 posts/15 days can see it. It's not indexed by search engines and not available to spammers.

In the meantime, try downgrading jQuery to version 1.6.4. Version 1.7.0 wasn't real stable and 1.7.1 (the latest on Google) still has some issues.

Change:


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

to:


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

Patrixer
02-26-2012, 07:20 PM
Ok thank you, I will change it now and tell if it's working.
I Edited my profile, so now people can send me e-mails. I also add skype.
If you have some free time, please, e-mail me, so I could send you link to my page.
Thank you anyway for every advice you gave me so far!

@edit
Ok, it's working! But the thing is that not 1.6.4 version helped, because I uploaded everything to my server and forgot to change 1.6.4 on server's index.php.
Anyway that stupid error/mistake was... I was including "incl/send.inc" not "incl/send.php". Now I've changed it and everything is ok!
Thank you for you help!
And if you still want to see my site, do not hesitate to write an email :)
Thank you once again!

jscheuer1
02-26-2012, 08:34 PM
What I said about jQuery versions is still valid, but will change. There will be a 1.7.2 or later at some point and that will be better than 1.6.4. For now though 1.6.4 strikes me as the best available version for production. The differences are minor, affecting only some scripts in some browsers.

If none of the code you have puts jQuery into noConflict mode, you can use the $ token in place of jQuery in the onsubmit code. But using jQuery instead of $ is always OK, unless there are other more serious problems or jQuery is in extreme noConflict mode. In both of which cases $ won't work either.

And no I don't need to see the site unless you want more help from me on it. At least we have an avenue of communication there if we need it. And by that point, if it happens, you'll probably qualify for PM as well.