using ajax in zend framework 1.12

Question

I'm beginner in zend framework and ajax I try to do a simple code with ajax and zend , it contain a div , text and button when the button is pressed the value of the text is populated into the div however when I press the button nothing is happened :S here is my codes please help me

this is the layout

/index/test.phtml

---

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

<!--for display text and submit fields i use viewHelpers it's very comfortable  and       easy way.-->
<div class="submit_area">
  <?php echo $this->formText('message', 'empty', array('size' => 32, 'id' => 'message')) ?>
  <?php echo $this->formSubmit('submitTo', 'submit', array('id' => 'submitTo')) ?>
  <div class="show-msg"></div>
</div>

<script >
//for send data i'll use jquery library
$(document).ready( function() {
  <?php echo "ready" ?>
  //By clicking on button submit condition makes validate on empty message 
  //unless field message will be not empty  , the programm make send data to
  //controller via ajax
  $("#submitTo").click(function() {
    var message = $('#message').val();
    if (message != '') {
      //run ajax 
      $.post('index/ajax', {'message' : message},
        //callback function
        function (respond) {
          //put respond in class show-msg                          
          $(".show-msg").html(respond);                  
        }
      );
    }                    
  });
});
</script>

--------------------------------------------

and this is the code in controller

---

class IndexController extends Zend_Controller_Action
{

    public function init()
    {
        /* Initialize action controller here */
    }

    public function checkAction()
    {
        // action body  
        $request = $this->getRequest()->getPost();

        //referring to the index
        //gets value from ajax request
        $message = $request['message'];

        // makes disable renderer
        $this->_helper->viewRenderer->setNoRender();

        //makes disable layout
        $this->_helper->getHelper('layout')->disableLayout();

        //return callback message to the function javascript
        echo $message; 
    }

    public function testAction()
    {
        // action body      
    }
}

Answer 1

Are you getting any error?

There are a couple of things I can see in your code that might be wrong.

1. The click() event doesn't return false so probably your form is submitted before the Ajax call takes place.

2. The Ajax URL points to /index/ajax which means the IndexController should have an ajaxAction. You should point the post() request to /index/check.

You might also want to have a look at ContextSwitch and AjaxContext

Indeed what @Boulevard said is also correct, that echo breaks your JS.

Answer 2

Your code error on javascript syntax. Try removing this line:

  <?php echo "ready" ?>

And add javascript close tag:

</script>