Displaying a message in a dialog box using AJAX, jQuery, and CakePHP

Posted by LainIwakura on Stack Overflow See other posts from Stack Overflow or by LainIwakura
Published on 2011-11-30T01:48:55Z Indexed on 2011/11/30 1:50 UTC
Read the original article Hit count: 384

Filed under:
|
|
|
|

I have a form, and when users submit this form, it should pass the data along to a function using AJAX. Then, the result of that is displayed to the user in a dialog box. I'm using CakePHP (1.3) and jQuery to try and accomplish this but I feel like I'm running into the ground.

The form will eventually be used for uploading images with tags, but for now I just want to see a message pop up in the box..

The form:

<?php                                                                                                                                                                                                                                                                             
  echo $this->Form->create('Image', array('type' => 'file', 'controller' => 'images', 
                           'action' =>   'upload', 'method' => 'post'));
  echo $this->Form->input('Wallpaper', array('type' => 'file'));
  echo $this->Form->input('Tags');
  echo $this->Form->end('Upload!');
?>

The AJAX:

$(document).ready(function() {
  $("#ImageUploadForm").submit(function() {                                                                                                                                                                                                                                   
    $.ajax({
      type: "POST", url: "/images/upload/",
      data: $(this).serialize(),
      async: false,
      success: function(html){
        $("#dialog-modal").dialog({
          $("#dialog-modal").append("<p>"+html+"</p>");
          height: 140,
          modal: true,
          buttons: {
            Ok: function() {
              $(this).dialog('close');
            }
          }
        })
      }
    });
    return false;
  });
});

NOTE: if I put $("#dialog-modal").dialog({ height: 140, modal: true }); OUTSIDE of the $.ajax but inside the $("#ImageUploadForm").submit(function() { and comment out the $.ajax stuff, I WILL see a dialog box pop up and then I have to click it for it to go away. After this, it will not forward to the location /images/upload/

The method that AJAX calls:

  public function upload()
  {
    $this->autoRender = false;

    if ($this->RequestHandler->isAjax())
    {   
      echo 'Hi!';
      exit();
    }   
  }

$this->RequestHandler->isAjax() seems to do either absolutely nothing, or it is always returning false. I have never entered an if statement with that as the condition.

Thanks for all the help, if you need more information let me know.

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about AJAX