2012-11-11 58 views
2

我正在通过教程来实现一个可排序的列表,我不知道是否正在加载json。有没有与Firebug和Firequery的方式来查看它是否被调用或者它是否是一个错误的地址?没有我能看到的错误。我使用ColdFusion一起HTML:jQuery的getJSON排序回调

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<link rel="stylesheet" href="../css/jquery-ui.css" /> 
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script> 



<script type="text/javascript"> 
$(function() { 
$sortable = $("#sortable").sortable({ 
    update: function(event, ui){ 
    updateOrder(); 
    } 
}).disableSelection(); 


function updateOrder(){ 
    $.getJSON(
    'remote.cfc?wsdl', 
    { 
     method : 'updateOrder', 
     key: '<cfoutput>#session.ajaxkey#</cfoutput>', 
     orderedList: $sortable.sortable('toArray').toString(), 
     returnformat: 'json', 
     queryformat: 'column',   
    }, 
    callback 
); 
} 
}); 

function callback(json){ 
if (json.RESULT) 
{ 
    $('#serverresult').text("Order updated to: " + json.NEWORDER); 
} 
else 
{ 
    $('#serverresult').text("Something went wrong!"); 
} 
} 
</script> 
</head> 

<body> 

<body> 
<h1>Menu List</h1> 

     <cfquery name="rsSort" datasource="#DataSource#"> 
SELECT * FROM `test-sort` ORDER by Sort 
</cfquery> 

<div class="demo"> 
<ul id="sortable"> 
<cfoutput> 
<cfloop query="rsSort"> 
<li id="id_#ID#">#Title# #ID#</li> 

</cfloop> 
</cfoutput> 
</ul> 
<div id="serverresult"> 
</div> 
</div> 



</body> 
</html> 

文件,该文件获取调用:

<cfcomponent output="false" hint="I respond to AJAX requests"> 


<cffunction name="updateOrder" output="false" access="remote"> 
<cfargument name="orderedList" required="true" type="string"> 
<cfargument name="key" required="true" type="string"> 

<cfset var ndx = ""> 
<cfset var id = 0> 
<cfset var position = 0> 
<cfset var updatedids = ""> 
<cfset var result = {result="false"}> 

<!--- do a basic security check ---> 
<cfif isAllowed(arguments.key)> 

    <!--- Prevent race conditions ---> 
    <cflock name="updateOrder" timeout="60"> 
    <cftransaction> 
     <cfloop list="#arguments.orderedList#" index="ndx"> 

     <cfset id = Val(ListLast(ndx, "_"))> 
     <cfset position = position+1> 
     <cfset updatedids = ListAppend(updatedids, id)> 

     <cfquery datasource="#DataSource#"> 
      update `test-sort` set 
      Sort = <cfqueryparam value="#position#" cfsqltype="cf_sql_integer"> 
      where 
      id = <cfqueryparam value="#id#" cfsqltype="cf_sql_integer"> 
     </cfquery> 

     </cfloop> 

     <!--- delete any items not in the list ---> 
     <cfquery datasource="#DataSource#"> 
     delete from `test-sort` 
     where id not in (<cfqueryparam value="#updatedids#" cfsqltype="cf_sql_integer" list="true">) 
     </cfquery> 

    </cftransaction> 
    </cflock> 

    <cfset result = {result="true", neworder=updatedids, position=position }> 

</cfif> 

<cfreturn result> 
</cffunction> 


<cffunction name="isAllowed" output="false" access="private" returntype="boolean"> 
<cfargument name="key" required="true"> 
<cfset var result = false> 
<!--- check that request is coming from the same browser that created the session ---> 
<cfif IsDefined("session.ajaxkey") AND (session.ajaxkey eq arguments.key)> 
    <cfset result = true> 
</cfif> 
<cfreturn result> 
</cffunction> 

</cfcomponent> 
+3

你可以看看Firebug中几个地方的ajax请求。对我来说最简单的地方是在控制台选项卡中启用“showXMLHttpRequests”。另一个地方是在'Net'标签。通过扩展请求本身将看到状态,数据发送,返回响应,头部等。如果dataType是JSON,甚至会创建一个JSON树 – charlietfl

+0

谢谢!我终于能够在Firefox中看到它,并且看到它不识别数据源变量 –

+0

我的coldfusion已生锈,但好像你正在丢失'' – charlietfl

回答

0

你几乎肯定不希望在你ajaxing到URL的WSDL?这只会返回您的CFC的WSDL XML。希望Firebug能够证明这一点。您也可以使用Fiddler来调试网络流量(适用于所有浏览器)

您可能还需要在您的cffunction中设置returnformat =“JSON”,以便让CF将您返回的结构转换为JSON。

+0

Thanks @barnyr我要删除?wsdl –

0

使用?wsdl作品对我好,我想在回调的第一行应该是:

var JSON=jQuery.parseJSON(json);

然后使用JSON而不是JSON在这个函数。