2012-09-09 82 views
1

我正在嘗試爲CakePHP 2.2中的元素列表上的每個項目創建一個最喜歡/明星/心臟按鈕(如Gmail中)。CakePHP AJAX請求未被識別

我有一個工作控制器和JS切換功能,但我的問題是,我的腳本的AJAX部分實際上並沒有發生;而是將頁面重定向到自身(作爲JavaScript關閉瀏覽器的一部分)和重新加載。這是我試圖避免的,所以用戶不會失去他們在頁面上的位置。

這裏是我的CakePHP控制器,聯合國收藏的物品:

class MarksController extends AppController { 
    public $components = array('RequestHandler'); 

    public function unfav($id = null) { 
     // set default class & message for setFlash 
     $class = 'flash_bad'; 
     $msg = 'Invalid List Id'; 

     if (validation($id)) { 
      //load this mark's data 
      $this->request->data = $this->Mark->read(null, $id); 
      $this->request->data['Mark']['favorite'] = '0'; 
      if ($this->Mark->save($this->request->data)) { 
       $class = 'message'; 
       $msg = 'The WatchMark has removed from favorites.'; 
      } else { 
       $msg = 'This WatchMark could not be saved. Please, try again.'; 
      } 

      $this->autoRender= false; 
      $this->autoRender = $this->layout = false; 

      // output JSON on AJAX request 
      if($this->request->is('ajax')) { 
       echo json_encode(array('success'=>($class=='flash_bad') ? FALSE : TRUE,'msg'=>"{$msg}")); 
       exit; 
      } 

      // set flash message & redirect 
      $this->Session->setFlash($msg,'default',array('class'=>$class)); 
      $this->redirect($this->referer()); 

     } else { 
      //trying to edit a mark that doesn't belong to this user: 
      throw new NotFoundException(__('Invalid mark')); 
     } // end ownedby check 
    } //end markfav method 

我有另一個類的反函數稱爲markfav(它們合併成一個單一的切換功能是另一天的任務)。

然後,在JQuery的& JavaScript端:

$(document).ready(function() { 
    // class exists 
    if($('.fav_toggler').length) { 
     // add click handler 
     $('.fav_toggler').click(function(e){ 
      $('#flashMessage').fadeOut(); 
      if($(this).hasClass("heart")) { 
       $.post('/marks/markfav/' + $(this).attr('target_id'), "ajax=1", function(response) { 
        if(response.success == true) { 
         $(this).addClass("heart").removeClass("hearttoggle"); 
        } 
       },'json'); 
      }   
      else { 
       $.post('/marks/unfav/' + $(this).attr('target_id'), "ajax=1", function(response) { 
        if(response.success == true) { 
         $(this).addClass("heart").removeClass("hearttoggle"); 
        } 
       },'json'); 
      } 
      e.preventDefault(); 
     }); 
     return false; 
    } 
}); 

我已經扔警報到我的JavaScript測試,我認爲這是執行正確的(它得到我的代碼的右邊部分,並且改變心臟& hearttoggle之間類。

我也知道,它跳過我的PHP的if($this->request->is('ajax'))塊出於某種原因(雖然我有一個AJAX刪除功能擊中了類似的條件就好了)。我測試過卸下if($this->request->is('ajax'))條件來自PHP blo ck強制它執行JSON_encode位,我只是最終得到一個包含JSON編碼數組的頁面而沒有其他東西。

如何在不使用頁面重新加載的情況下使用AJAX正確工作?


編輯:頭從呼叫/標記/ unfav/624

Request URL:http://towatchlist.com/marks/unfav/624 
Request Method:GET 
Status Code:200 OK 

Request Headers 
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3 
Accept-Encoding:gzip,deflate,sdch 
Accept-Language:en-US,en;q=0.8 
Connection:keep-alive 
Cookie:CAKEPHP=blah 
Host:towatchlist.com 
Referer:http://towatchlist.com/marks 
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_1) AppleWebKit/537.8 (KHTML, like Gecko) Chrome/23.0.1255.0 Safari/537.8 

Response Headers 
Connection:Keep-Alive 
Content-Encoding:gzip 
Content-Type:text/html 
Date:Sun, 09 Sep 2012 20:55:18 GMT 
Keep-Alive:timeout=5, max=94 
Server:Apache/2.2.22 (Ubuntu) 
Transfer-Encoding:chunked 
Vary:Accept-Encoding 
X-Powered-By:PHP/5.3.10-1ubuntu3.2 
+0

在你的動作中,執行'pr($ this)'(調試開啓),然後檢查它是否顯示請求是ajax。此外,請嘗試'$ this-> ResquestHandler-> isAjax()'。它在2.x中被棄用,但看看給出了什麼。 – rlcabral

+0

當我做'PR($ this)'時,我得到了列表中所有項目的長時間轉儲(不確定這是否正是你想要的)。所有的項目都有'[isAjax] =>'(表示未設置)。這是你正在尋找的信息嗎?我嘗試了'$ this-> ResquestHandler-> isAjax()',因爲它在我的AJAX刪除按鈕中工作,但這裏的結果沒有變化(如預期的那樣)。 – Nick

+0

是的,'[isAjax]'是我想要的。它表明您的請求不被視爲AJAX請求。你有螢火蟲或任何調試工具來檢查瀏覽器發送的請求嗎?即發送數據和請求頭。 – rlcabral

回答

1

出於某種原因X-Requested-With沒有呈現。它應該在你的請求頭表明這一點:

X-Requested-With: XMLHttpRequest 

這裏有一些問題,可以幫助:

是工作被稱爲AJAX請求與此相同的方式?

+0

謝謝!你的信息和問題幫助我弄明白了。根據您的回答,我沒有正確的標題。其原因是我仍然在試圖附加JQuery調用的項目上有一個「onclick」元素。所以'onclick'會觸發而不是JQuery ajax位。刪除'onclick'固定我的標題。 – Nick