（私はasp.netで働いています）jquery.toggle（プラス/レスボタン）でdivを作成する方法を探しています
div のコンテンツは、div が表示されている場合にのみ読み込む必要があります (ページの読み込み時に非表示にする必要があります)。
div のコンテンツを含むページが「必要」でしたか
または、div 内で updatepanel を使用できます。そして、パネルを呼び出してコンテンツをロードします。
ユーザーが必要に応じてロードできるページに複数のブロック div があるため、ページをリロードする必要はありません。そして、それぞれの内部にデータが多すぎます。
どんなヒントでも、
あなたをタンクに入れます
私は定期的に ajax を使用して Web サービスまたは pagemethod (実際には Web サービスです...) からそのようなコンテンツをロードします。展開アイコン (+) をクリックすると、サービスが呼び出され、データが (JSON として) 返され、次に適用されます。ページがロードされ、クリックイベントで表示に切り替えられたdivに挿入されたときに非表示のdiv内にロードされたテンプレート...
これがあなたのニーズに合っているなら、素晴らしいです。そうでない場合は、達成しようとしていることをより具体的にしてください。
[編集: 要求に応じたコード サンプル]
<div>
<asp:Repeater ID="CategoryRepeater" runat="server">
<HeaderTemplate><div id="CategorySpace"></HeaderTemplate>
<ItemTemplate>
<div id="CategoryHeaderRow_<%# Eval("CATEGORY_NM").ToString().Replace(" ","_").Strip("(,),-,/") %>" class="CategoryHeader">
<input type="hidden" id="CategoryID" runat="server" value='<%# Eval("CATEGORY_ID") %>' />
<!-- THIS IS THE EXPANSION ICON -->
<input type="button" id="expandCategory_<%# Eval("CATEGORY_NM").ToString() %>" class="CategoryExpandButton" value="+" onclick="expandCategory(this,'<%# ((CRMS.PageBase)this.Page).UserId %>','<%# Eval("CATEGORY_ID") %>');" isloaded="<%#(string)Eval("LOAD_ON_DEMAND_CD")=="N"?"Y":"N" %>" />
<span id="CategoryCount_<%# Eval("CATEGORY_NM").ToString().Replace(" ","_").Strip("(,),-,/") %>" class="CategoryLabel" style="width:50px;"><%# Eval("Count_Qy")%></span>
<span id="CategoryName" class="CategoryLabel"><%# Eval("CATEGORY_NM") %></span>
<img id="InfoIcon_<%# Eval("CATEGORY_NM") %>" src="images/InfoIcon.png" alt="<%# Eval("CATEGORY_INFO_TX") %>" class="CategoryInfo" />
</div>
<div id="categoryItems_<%# Eval("CATEGORY_NM").ToString().Replace(" ","_").Strip("(,),-,/") %>" class="hidden itemsContainer " style="width:990px;overflow:scroll;">
<div id="categoryItems" runat="server">
</div>
</div>
</ItemTemplate>
<FooterTemplate></div></FooterTemplate>
</asp:Repeater>
</div>
拡張アイコンのクリック イベントにより、次の JavaScript が起動されます。
/*
Expands the ToDo Categories and initiates ajax call for
lazy loading ToDo Items when needed
*/
function expandCategory(sender, UserID, CategoryID) {
window.status = "";
var senderID = "#" + sender.id;
var action = $(senderID).val();
$(senderID).val($(senderID).val() == "+" ? "-" : "+");
var CategoryItemsID = "#" + sender.id.replace("expandCategory", "categoryItems");
$(CategoryItemsID).toggleClass("hidden");
if (action == "+"
&& sender.isloaded == "N") {
//Find any controls with a pq_Value attribute and
//use those values with the selected category id
//to load items.
var params = $('[pq_Value]');
var inputParameters = "";
for (x = 0; x < params.length; x++) {
inputParameters += "{" + params[x].p_Name + "|" + params[x].p_Type + "|" + $(params[x]).attr("pq_Value") + "}";
}
PageMethods.LoadCategoryItems(UserID, CategoryID, inputParameters, 0, RecieveCategoryData, RecieveCategoryError);
//Set Is Loaded to (Y)es
sender.isloaded = "Y";
}
}
これを呼び出すPageMethods.LoadCategoryItems...と、コンテンツを別の JavaScript 関数に送り返す典型的な ajax 呼び出しになります。
function RecieveCategoryData(msg) {
var msgs = msg.split('||');
if (msgs.length == 7) {
var category_name = msgs[0].replace(/ /g, "_");
//strip undesirable characters from the name: (,),-,/
category_name = category_name.replace(/\(/g, "").replace(/\)/g, "").replace(/\-/g, "").replace(/\//g, "");
var UserID = msgs[1];
var jsonData = jQuery.parseJSON(msgs[6]);
var container = $("#categoryItems_" + category_name);
var categoryCountLabel = $("[id*=CategoryCount_" + category_name + "]")[0]
var categoryCount = categoryCountLabel.innerText;
if (parseInt(msgs[4]) < 52) {
var header = $("#" + category_name + "_Header").html();
$(container).html(header);
}
//var ItemContainer = $("#" + category_name + "_Items");
var templateText;
var x = 0;
var y = 0;
var fieldName;
var fieldToken;
var jsonValue;
for (i = 0; i < jsonData.length; i++) {
templateText = document.getElementById(category_name + "_Template").innerHTML;
//templateText = $("#" + category_name + "_Template").html();
templateText = templateText.replace("[{ACTIVE_USER_ID}]", UserID);
templateText = templateText.replace("[{numDataRow}]", i % 2 == 0 ? "evenDataRow" : "oddDataRow");
//templateText = templateText.replace("[target]","'" + targetString + "'");
x = templateText.indexOf('[{');
while (x < templateText.length && x > -1) {
y = templateText.indexOf('}]', x + 2);
fieldToken = templateText.substring(x, y + 2);
fieldName = fieldToken.replace('[{', '').replace('}]', '').toUpperCase();
jsonValue = jsonData[i][fieldName];
if (fieldName == "REMARK_TX" && jsonValue != null) {
jsonValue = jsonValue.substring(0, jsonValue.length <= 35 ? jsonValue.length : 35);
}
if (jsonValue != null &&
jsonValue.toString().indexOf("\Date") > -1
) {
if (fieldName != "UPDATED_DT") {
jsonValue = new Date(parseInt(jsonValue.substr(6))).format("MM/dd/yyyy");
} else {
jsonValue = new Date(parseInt(jsonValue.substr(6))).format("MM/dd/yyyy h:mm:ss tt");
}
} else if (jsonValue == null) {
jsonValue = "";
}
//identify if the value is blank and it is being inserted
//into a hyperlink (determined by the ");" following the
//replacement token.
//If so, insert the "disabled='true'" attribute to the string.
if (jsonValue == ""
&& templateText.substring(y + 2, y + 4) == ");") {
var strDisable = " disabled='true'";
var split = y + 5;
var beginning = templateText.substring(0, split);
var ending = templateText.substring(split);
templateText = beginning + strDisable + ending;
}
templateText = templateText.replace(fieldToken, jsonValue);
x = templateText.indexOf('[{');
}
//$("#" + category_name + "_Items").append(templateText);
$(container).append(templateText);
}
if (parseInt(msgs[4]) < parseInt(msgs[5])) { //if there are more records remaining to get...
PageMethods.LoadCategoryItems(msgs[1], msgs[2], msgs[3], msgs[4], RecieveCategoryData, RecieveCategoryError);
}
if (getParameterByName("showCount")) {
if (parseInt(msgs[4]) < parseInt(msgs[5])) {
window.status = "Loading " + msgs[4] + " of " + msgs[5] + ".";
} else if (parseInt(msgs[4]) == parseInt(msgs[5])) {
window.status = "Load Complete: " + msgs[5] + " records.";
} else { //if (parseInt(categoryCount) != parseInt(msgs[4]
window.status = "expecting records: " + categoryCount + " showing records: " + parseInt(msgs[4]);
}
}
//format currency cells to $x,xxx.cc
//var test = $(".jq_currFormat");
$(".jq_currFormat").each(function () {
var num = $(this).text();
if (num.indexOf("]") == -1) {
num = num.toString().replace(/\$|\,/g, '');
if (isNaN(num)) num = "0";
sign = (num == (num = Math.abs(num)));
num = Math.floor(num * 100 + 0.50000000001);
cents = num % 100;
num = Math.floor(num / 100).toString();
if (cents < 10) cents = "0" + cents;
for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++)
num = num.substring(0, num.length - (4 * i + 3)) + ',' + num.substring(num.length - (4 * i + 3));
$(this).text((((sign) ? '' : '-') + '$' + num + '.' + cents));
$(this).removeClass("jq_currFormat");
}
});
}
}
この関数は、表示されているデータのカテゴリのテンプレートを識別してコピーし、データ トークンを見つけて JSON の実際の値に置き換えます。
私はこれを何度も行ってきましたが、通常はdivをjavascriptの一番上に隠してから、意味のあるイベントで表示します。div をどのようにロードするかに違いはありません。ASP.NET がコントロール名を書き換える方法をまだ使用しているため、適切な div を見つけることだけが面倒です。これは、jQuery でセレクターを使用して終了することで簡単に修正できます。
HTH
確かに、そのために UserControl を使用できます。
これは A のコードです。
<tr>
<td>
<asp:UpdatePanel runat="server" ID="uppShowB" UpdateMode="Conditional">
<ContentTemplate>
<br />
<asp:LinkButton runat="server" ID="btnShowB" Text="(+)"
OnClick="btnShowB_Click"></asp:LinkButton>
<wuc:BControl runat="server" ID="wucBControl" />
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
//Invocation of the javascript function that will show ControlB as a jquery Dialog
protected void btnShowB_Click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this.uppShowB, typeof(UpdatePanel), "popupB", "ShowB('" + this.wucBControl.GetPanelId() + "," + this.btnShowB.ClientID + "');", true);
}
ControlB では、すべてを Panel 内に配置し、そのスタイルに display:none があることを確認する必要があります
<asp:Panel runat="server" ID="pnlBPanel" CssClass="Invisible">
</asp:Panel>
//and in the css:
.Invisible
{
display: none;
}
//and in the cs:
public string GetPanelId()
{
return this.pnlPopUpDetalles.ClientID;
}
最後に、ControlB を表示する JavaScript 関数: (タイトルなしで、トグル (+) ボタンの下に表示されます。座標の調整が必要かもしれません)
function ShowB(panelClientId, btnToggleClientId)
{
ancho = 250;
alto = 'auto';
var x = $("#btnToggleClientId").offset().left + $("#btnToggleClientId").outerWidth() - ancho;
var y = $("#btnToggleClientId").offset().top + $("#btnToggleClientId").outerHeight() - $(document).scrollTop();
var $dialog = $("#panelClientId")
.dialog({
autoOpen: false,
hide: "puff",
width: ancho,
height: alto,
draggable: false,
resizable: true,
closeOnScape : true,
position: [x,y]
});
$dialog.dialog("open");
$("#panelClientId").siblings(".ui-dialog-titlebar").hide();
$("#panelClientId").focus();
$("body")
.bind(
"click",
function(e){
if(
$("#panelClientId").dialog("isOpen")
&& !$(e.target).is(".ui-dialog, a")
&& !$(e.target).closest(".ui-dialog").length
)
{
jQuery("#panelClientId").dialog("close");
}
});
return false;
}
一部の情報を非表示/表示したいだけの場合は、このように div 内のデータを非表示および表示することで使用できます
<a href="#" id="link">Show</a>
<div id="divMore" style="display:none;">
<p>some content goes here</p>
</div>
そしてスクリプトは
$(function(){
$("#link").click(function(){
if($(this).text()=="Show")
{
$("#divMore").slideDown();
$(this).text("Hide");
}
else
{
$("#divMore").slideUp();
$(this).text("Show");
}
});
});
ここに1つのサンプルがありますhttp://jsfiddle.net/VdPAz/8/
ページ内の要素に基づいて大規模な動的コンテンツを表示する必要がある場合 (例: ユーザー名をクリックしたときにテーブルに支払い履歴を表示する)、そのデータを取得するために jQuery ロードを実行できます。
var userId=5; // read from the page/source of click
$("#divMore").load("getuserdata.php?userid="+userId);