2012-01-31 76 views
0

我使用AutoSuggest作为搜索建议将项目添加到Grocerylist(groclist)。当用户选择一个建议时,它应该使用AJAX将该项目添加到GroceryList,并重新加载该购物清单上的项目。我使用Jquery AutoComplete in CakePHP发现的教程来完成自动完成功能,但我被卡住了。如何使用JQuery Autosuggest onItemSelect事件在CakePHP的HABTM表中添加条目?

如何添加关联?

$(document).ready(function(){ 
$("#autoComplete").autocomplete("/groceries/items/autoComplete", 
{ 
    minChars: 2, 
    cacheLength: 10, 
    onItemSelect: selectItem, 
    onFindValue: findValue, 
    formatItem: formatItem, 
    selectFirst: true 
}); 
}); 
// This is was here 
function selectItem(li) { 
findValue(li); 
} 


function addAssociation(li) { 

} 

function findValue(li) { 
if(li == null) {return alert("No match!");} 

// if coming from an AJAX call, let's use the product id as the value 
if(!!li.extra) {var sValue = li.extra[0];} 

// otherwise, let's just display the value in the text box 
else {var sValue = li.selectValue; } 

//alert("The value you selected was: " + sValue); 
} 

function formatItem(row) { 
if(row[1] == undefined) { 
    return row[0]; 
} 
else { 
    //return row[0] + " (id: " + row[1] + ")"; original displays Cake (id: 1) 
    return row[0]; 
} 
} 

回答

0

您应该对json对象使用ajax调用。我的意思是做一个ajax调用蛋糕中的动作(像网页一样的普通蛋糕),但是这个会返回给你一个json对象。应该使用json对象来获取所保存数据的信息,如发生错误或类似情况。

财产以后这样的:

$.ajax({ 
    type: 'POST', 
    url: url, 
    data: param, 
    dataType: "json", 
    success: function(data) { 
     if (data != null && data.error != null) { 
      alert('An error ocurred: '+data.error); 
     } 
     else { 
      yourRefreshFunction(); 
     } 
    }, 
    error: function(data) { 
     try { 
      alert('An error ocurred: '+data.error); 
     } catch (e) { } 
    } 
}); 

希望这有助于你:d

编辑:

在你的情况会是这样的(记得更改yourRefreshFunction为真正的刷新功能或在成功之后或者在它完成保存之后要做的任何事情之后): function selectItem(li){

//in your cake controller you will receive it as $this->data if you put the name like that 
var param = [ 
    { name: "data[Model][field]", value: findValue(li) } 
]; 
    $.ajax({ 
    type: 'POST', 
    url: url, 
    data: param, 
    dataType: "json", 
    success: function(data) { 
     if (data != null && data.error != null) { 
      alert('An error ocurred: '+data.error); 
     } 
     else { 
      yourRefreshFunction(); 
     } 
    }, 
    error: function(data) { 
     try { 
      alert('An error ocurred: '+data.error); 
     } catch (e) { } 
    } 
}); 
} 
+0

我有点不确定如何将这与我目前的JavaScript合并。 – Chris 2012-02-01 15:53:35

+0

@Chris我更少更新答案,这就是你需要做的 – api55 2012-02-01 19:39:42

相关问题