非常に簡単な背景:
Jquery Autocompleteを使用して、データベースからアイテムの値を検索しています。その値は、何らかの方法で同じフォーム内の隠しフィールドに渡され、データベースに挿入されます。
これを少し複雑にしているのは、私が Jquery Ui Tabs を使って作業していることです。これは、これまであまり楽しくありませんでした。
したがって、タブを作成するファイル内のコードは次のとおりです。
<script type="text/javascript">
function findValue(li) {
// if( li == null ) return alert("No match!");
// if coming from an AJAX call, let's use the CityId 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;
}
function selectItem(li) {
findValue(li);
}
function formatItem(row) {
return row[0];
}
function lookupAjax(){
var oSuggest = $(".role")[0].autocompleter;
oSuggest.findValue();
return false;
}
function lookupLocal(){
var oSuggest = $("#role")[0].autocompleter;
oSuggest.findValue();
return false;
}
</script>
同じファイルがタブを作成し、Jquery オートコンプリートを開始するコールバックも持っています
<script type="text/javascript">
$(function() {
$("#tabs").tabs({
load: function(event, ui) { setTimeout( function() { $(".title").focus(); }, 500 );
var ac = $(".role").autocomplete(
"/profile/autocomplete",
{
delay:10,
minChars:1,
matchSubset:1,
matchContains:1,
cacheLength:10,
onItemSelect:selectItem,
onFindValue:findValue,
formatItem:formatItem,
autoFill:true
}
);
ac[0].autocompleter.findValue();
}
});
});
</script>
次に、実際のタブコードにはフォームがあります
<?php $tab_id = $this->uri->segment(4);
$hidden = array('tab_id' => $tab_id);
$attributes = array('name' => 'additem');
echo form_open('profile/new_item', $attributes, $hidden); ?>
<input type="hidden" value="" name="rolehidden"/>
<?php echo validation_errors(); ?>
<table width="100%" padding="0" class="add-item">
<tr>
<td>Title: <input class="title" type="text" name="title" value="<?php echo set_value('title'); ?>"></input></td>
<td>Role: <input class="role" type="text" name="role" size="15"></input></td>
<td>Year: <input type="text" name="year" size="4" maxlength="4"></input></td>
<td align="right"><input type="submit" value="Add"></input></td>
</tr>
</table>
</form>t
やりたいことは、sValue を取得して、フォームの非表示フィールドの値にすることだけです。
また、JQuery タブには複数のタブがあり、それらはすべて同じ形式であることにも言及する必要があります。これは、すべてのタブで同じ名前/ID/クラスを持ついくつかの異なる入力フィールドがあることを意味します。
これが ID 属性の問題であることはわかっていますが、名前属性にも同じことが当てはまるかどうかはわかりません。
Javascript と Jquery の非常に多くの異なるコード スニペットを試したので、もう考えられません。
BREAKTHROUGH ...しかし、まだ問題があります
$("[name='rolehidden']").val(sValue);
ちょうど突破口がありました。このコードは機能します...ただし、<input ="text">
要素でのみ。<input ="hidden">
回避策はありますか、それとも CSS を使用してテキスト入力ボックスを非表示にする必要がありますか?
助けてください
ティム