Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    using prototype: submit button in form called by ajax not working

    I have a button which calls a form via Ajax.Updater. The call works perfectly fine:

    <a href="javascript:void()" onclick="createMessage()">Create Message</
    a>
    <script>
    function createMessage() {
    new Ajax.Updater( 'content', 'message.php', { method: 'post' } );
    }

    </script>

    This is the message.php file:

    <html>
    <head>
    <script language="JavaScript" type="text/javascript"
    src="prototype.js"></script>
    </head>
    <body>
    <form id="FYIForm">
    <table>
    <tr><td>Message: </td><td colspan="2"><textarea cols="39" rows="8"
    name="info" id="info"></textarea></td></tr>
    <tr><td></td><td><input type="button" onclick="addMessage()" value="Add FYI" class="def"></td></tr>

    </table>
    </form>
    <script>
    function addMessage() {
    new Ajax.Updater( 'fyi', 'addmessage.php', { method: 'post',
    parameters: $('FYIForm').serialize() } );
    $('FYIForm').reset();
    }

    </script>
    </body>
    </html>

    The problem is that the addMessage() function does not execute. It
    does not make a call to my addmessage.php file.

    Any help would be greatly appreciated!! Thanks!!
    Last edited by Geoff-CED; 04-29-2008 at 05:42 PM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Where is the definition of function addMessage() ?
    BTW, please read this sticky, http://www.codingforums.com/showthread.php?t=82672
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry about that. Here's the request again:

    I have a button which calls a form via Ajax.Updater:

    Code:
    <a href="javascript:void()" onclick="createMessage()">Create Message</
    a>
    <script>
    function createMessage() {
      new Ajax.Updater( 'content', 'message.php', { method: 'post' } );
    }
    
    </script>
    This is the message.php file:

    Code:
    <html>
    <head>
    <script language="JavaScript" type="text/javascript"
    src="prototype.js"></script>
    </head>
    <body>
    <form id="FYIForm">
    <table>
    <tr><td>Message: </td><td colspan="2"><textarea cols="39" rows="8"
    name="info" id="info"></textarea></td></tr>
    <tr><td></td><td><input type="button" onclick="addMessage()"
    value="Add FYI" class="def"></td
    ></tr>
    
    </table>
    </form>
    <script>
    function addMessage() {
      new Ajax.Updater( 'fyi', 'addmessage.php', { method: 'post',
    parameters: $('FYIForm').serialize() } );
      $('FYIForm').reset();
    }
    
    </script>
    </body>
    </html>
    The problem is that the addMessage() function does not execute. It
    does not make a call to my addmessage.php file.

    Any help would be greatly appreciated!! Thanks!!
    Last edited by Geoff-CED; 04-29-2008 at 05:46 PM.

  • #4
    New Coder
    Join Date
    Jan 2007
    Posts
    38
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You might try this:
    Code:
    <a href="javascript:void()" onclick="createMessage()">Create Message</
    a>
    <script>
    function createMessage() {
      new Ajax.Updater( 'content', 'message.php', { method: 'post', evalScripts: true } );
    }
    
    </script>
    See also:
    http://www.prototypejs.org/api/ajax/updater

    I don't really know if this is your answer or not, just my best guess from reading the documentation. I hope it at least points you in the right direction.

  • #5
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    When JavaScript is added via innerHTML, the parser does NOT evaluate it. So you need to strip out the JavaScript and eval it. So the previous solution should be correct with specifing JQuery's evalScript.

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #6
    New Coder
    Join Date
    Mar 2007
    Location
    Bulgaria, Plovdiv
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I have similar problem with jQuery.

    in test.php i have
    Code:
    <!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" xml:lang="en" lang="en">
    	<head>
    		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    		<title>test forms</title>
    		<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
    		<script type="text/javascript">
    			$ ( document ) . click ( function ( ) {
    			
    				$ ("#first") . submit ( function ( ) {
    					var test = $('form#first').serialize();
    					$ . ajax ( {
    						type: "POST" ,
    						url: "testresult.php" ,
    						data: test ,
    						success: function ( data ) {
    							alert ( data ) ;
    						}
    					} ) ;
    					return false;
    				} ) ;
    
    				$ ("#second") . submit ( function ( ) {
    					var test = $('form#second').serialize();
    					$ . ajax ( {
    						type: "POST" ,
    						url: "testresult.php" ,
    						data: test ,
    						success: function ( data ) {
    							alert ( data ) ;
    						}
    					} ) ;
    					return false;
    				} ) ;
    			
    			});
    			function loadFirst ( ) {
    				$ ( '#loader' ) . load ( 'first.php' ) ;
    			}
    			function loadSecond ( ) {
    				$ ( '#loader' ) . load ( 'second.php' ) ;
    			}
    		</script>
    	</head>
    	<body>
    		<p><a onClick="javascript: loadFirst();">First</a> | <a onClick="javascript: loadSecond();">Second</a></p>
    		<div id="loader">
    		</div>
    	</body>
    </html>
    first.php and second.php are

    Code:
    first.php
    <form id="first" method="post">
    <input id="firstId" name="firstId" type="text" />
    <input id="firstSend" type="submit" value="First" />
    </form>
    
    second.php
    <form id="second" method="post">
    <input id="secondId" name="secondId" type="text" />
    <input id="secondSend" type="submit" value="Second" />
    </form>
    and my testresult.php is
    PHP Code:
    <?php

        print_r 
    $_POST ) ;

    ?>
    There. So i go and click on First | Second in test.php. The forms under it are changing good. If i change
    Code:
    $ ( document ) . click ( function ( ) {
    with
    Code:
    $ ( document ) . ready ( function ( ) {
    the script will stop work and my forms submits normal way. I red about liveqery, that updates DOM but i cannot make it work . However my forms work this way, but with one BIG BUG.

    When you press onsubmit button, it will js submit it 1 time. When you press it again, instead of 1, submits it 2 times.. and so on. Like this:

    First press = One Submit
    Second press = Two Submits
    Third press = Three Submits
    ...
    N press = N submits

    So if i press it 5 times, the form should be submitted 5 times, but infact it submits it 15 times.. any comments?

  • #7
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    because everytime you click the page it adds more event handlers to things. Why in the world are using assigning the submits onclick?

    WRONG:
    Code:
    $ ( document ) . click ( function ( ) {
    You should be ready and not click

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #8
    New Coder
    Join Date
    Mar 2007
    Location
    Bulgaria, Plovdiv
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Yea, i know that the form need to be ready, but im loading it from external file. I need to update the DOM so jquery knows its ready.. How to update it..I tried different types of loading, no success

    no different between

    Code:
    function loadSecond ( ) {
    	$ ( '#loader' ) . load ( 'second.php' ) ;
    }
    and
    Code:
    function loadSecond ( ) {
    	$ . ajax ( {
    		url : 'second.php' ,
    		success : function ( data ) {
    		$ ( "#loader" ) . html ( data ) ;
    		}
    	} ) ;
    }
    EDIT:
    I found solution with livequery:

    Code:
    	$ ( 'form' ) . livequery ( 'submit' , function ( event ) {
    
    		var id = event.target.id;
    
    		if ( id == 'first' ) {
    			functions for first
    			return false;
    		}
    		
    		else if ( id == 'second' ) {
    			functions for second
    			return false;
    		}
    				
    		else if ( id == '...' ) {
    			functions for ...
    			return false;
    		}
    
            return false;
    		
        } ) ;
    and so on for every single submit form loaded throught ajax in the html
    Last edited by xspy; 06-10-2009 at 02:53 PM. Reason: found solution


  •  

    Posting Permissions

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