以下にある順序付けられていないリストにソート可能な Jquery UI を組み込もうとしています。下のフォームのボタンをクリックすると、テキストが #companyassessment_set1 に挿入され、フォームが送信されます。
ソート可能な部分に JavaScript を含めようとすると、何も機能しません (既存の jquery コード + ソート可能な機能)。コードは次のとおりです。
$(document).ready(function(){
$('#menu-pages').sortable();
});
コードの残りの部分:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/jquery-ui.min.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/jquery.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-tab.js"></script>
<script>
jQuery(function () {
$('#test').click(function (e) {
e.preventDefault();
alert('test');
data = 'Benefits,Predictable hours,Up or out,Job for life,Great corporate strategic vision,Strong profitability,Performance-based,Strong alumni network,Effective managers,Fast growth,Salary and bonus,Little ranking between employees,No working on the weekends,Competitive environment,Great brand for the resume,International opportunities,Brand recognition,Smart people,Stock growth,Perks,No layoffs,Type-A employees,Fast advancement,Reasonable hours'
$("#companyassessment_set1").val(data);
$("form#new_companyassessment").submit();
});
});
</script>
<p>
<label for="companyassessment_Company Name">Company name</label><br />
<div class="field_with_errors"><input id="companyassessment_name" name="companyassessment[name]" size="30" type="text" value="" /></div>
</p>
<ul class="menu" id="menu-pages">
<li id="page_1">Home</li>
<li id="page_2">Blog</li>
<li id="page_3">About</li>
</ul>
<input id="companyassessment_set1" name="companyassessment[set1]" type="hidden" />
<input id="test" type="button" value="Set Value" />
Jquery UI コードを組み込む方法について何かアドバイスはありますか?