Results 1 to 8 of 8

Thread: Dynamic Ajax Content and form post method

  1. #1
    Join Date
    Feb 2012
    Location
    Poland
    Posts
    5
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Unhappy Dynamic Ajax Content and form post method

    1) Script Title: Dynamic Ajax Content

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...jaxcontent.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 but in my case it doesn't work.
    When I have:
    Code:
    <form action="javascript:ajaxpage('incl/send.inc','content')" method="post">
    It opens send inc in content div.
    When I have (copied from that thread):
    Code:
    <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:
    Code:
    ...something?nazwa=name&wiadomosc=msg&temat=topic&mail=email&telefon=123456789#
    Any suggestions ?
    Last edited by Patrixer; 02-26-2012 at 07:58 PM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Patrixer (02-26-2012)

  4. #3
    Join Date
    Feb 2012
    Location
    Poland
    Posts
    5
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    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:
    Code:
    <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:
    Code:
     <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:
    Code:
    	 <?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';
    			}
    		
        ?>

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <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:

    Code:
    '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.
    Last edited by jscheuer1; 02-26-2012 at 04:28 PM. Reason: English usage
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Patrixer (02-26-2012)

  7. #5
    Join Date
    Feb 2012
    Location
    Poland
    Posts
    5
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    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.

  8. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

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

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Patrixer (02-26-2012)

  10. #7
    Join Date
    Feb 2012
    Location
    Poland
    Posts
    5
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    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!
    Last edited by Patrixer; 02-26-2012 at 07:32 PM.

  11. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  12. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Patrixer (02-26-2012)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •