私はjqueryで遊んでいて、ページを更新せずに情報を送信するフォームを作成しましたが、従ったチュートリアルでは、最初に人々が編集するフォームを表示する必要がありますが、やりたいことは少し異なります.
ユーザー プロファイル ページを表示し、各項目の横に小さな編集リンクを配置して、編集をクリックするとテキスト フィールドが表示されるようにしたいと考えています。更新せずにフォームを送信できると思いますが、更新せずに「編集」ボタンをクリックしたときにフォームを表示するにはどうすればよいですか?
これをどのように達成できるか、またはこれを行う方法を学ぶために何を検索すればよいかについてのアイデアはありますか? jquery サイトでサンプル アイテムを確認しましたが、クリックしても非表示/非表示にならなかったようです。
これは、私がコンセプトをどのように処理するかの簡単な例です。投稿と検証、その他すべての小さなサーバー側スクリプトなどでフォローアップしますが、これは全体的な足がかりとして機能します. 覚えておかなければならないことは、javascript/jquery はすべて煙と鏡であり、すべてクライアント側で処理されるため、非表示であろうとなかろうと、画面上にあるものを本質的に操作する必要があるということです。この場合、1 つはデフォルトで表示され、もう 1 つは非表示になっている 2 つの要素があり、一方が選択されたときに他方を非表示にするロジックを作成し、どちらかでそれぞれ必要なことを行います。
<div id="wrapper">
<div id="container">
<div id="storedvalue"><span>Hello</span> [<a href="javascript:void(0);" id="editvalue">edit</a>]</div>
<div id="altervalue" style="display:none;"><input type="text" name="changevalue" id="changevalue" value="Hello"> [<a href="javascript:void(0);" id="savevalue">save</a>]</div>
</div>
</div>
<script type="text/javascript">
$('#editvalue').click(function(e){$('#storedvalue').hide();$('#altervalue').show();});
$('#savevalue').click(function(e){
var showNew = $('#changevalue').val();
$('#altervalue').hide();
$('#storedvalue').show();
$('#storedvalue span').text(showNew);
});
</script>
最も簡単なことは、次のようなものになると思います。
HTML
<form id="form1" style="display: none;">
</form>
<a id="editButton" href="javascript:void(0)">Edit</a>
<a id="closeButton" href="javascript:void(0)" style="display: none;">Close</a>
JavaScript (ページに必ず jQuery を含めてください)
$(function() {
$("#editButton").click(function() {
$("#form1").show();
$("#editButton").hide();
$("#closeButton").show();
});
$("#closeButton").click(function() {
$("#form1").hide();
$("#editButton").show();
$("#closeButton").hide();
});
});
show()メソッドとメソッドを使用して、拡大遷移効果を追加することも簡単hide()です。次のように、目的の遷移期間を関数に (ミリ秒単位で) 渡すだけです。
$("#form1").show(500);
ページを更新しないと HTML フォームを送信できません。ただし、JavaScript (ひいては jQuery) を使用して、同様の GET または POST 要求を送信できます。jQuery の.appendメソッドを使用して必要なマークアップを挿入し、その場で入力を作成することもできます。jQuery を使用して、フィールドに入力された値にアクセスすることもできます (通常は id によって行われます)。
あなたが必要とするものと同様に私が取り組んでいるもの：
(この特定のコードは、可視フォームからいくつかの入力を取得し、後で使用するために非可視フォームに集約します)
jQuery('#submitButton').click(function(){
jQuery('#prev_request').append('<input type="hidden" name="sort_order" value="'+jQuery("input[@name=sort_order]:checked").val()+'" />');
jQuery('#prev_request').append('<input type="hidden" name="sort_by" value="'+ jQuery("#sort_by option:selected").val() +'" />');
});
失われた魂、
UpdatePanel コントロール内で asp DataGrid を使用します。
.ascx:
<asp:UpdatePanel ID="yourUPpanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:DataGrid ID="yourDG" runat="server" AutoGenerateColumns="False" CellPadding="2" AllowSorting="False" AllowPaging="False" EnableViewState="false" onItemCommand="yourDG_CellClick">
<FooterStyle CssClass="cssFooter"></FooterStyle>
<AlternatingItemStyle CssClass="CssAltItem"></AlternatingItemStyle>
<ItemStyle CssClass="cssGridItem"></ItemStyle>
<HeaderStyle CssClass="GridHeader"></HeaderStyle>
</asp:DataGrid>
<asp:Panel ID="yourAdditionalStuff" runat="server" Visible="false">
<table>
<tr>
<td>
<asp:TextBox ID="yourTXT" runat="server" Width="100px"/>
</td>
</tr>
</table>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
.vb
Public Sub yourUPpanel_Load(ByVal sender As Object, ByVal e As EventArgs) Handles yourUPpanel.Load
If cnADO Is Nothing Then blahblah.getConnection("yourserver", cnADO) 'whatever the case may be here
Try
Dim da As SqlDataAdapter
Dim cmd3 As New SqlCommand
cmd3.Connection = cnADO
cmd3.CommandType = CommandType.StoredProcedure
cmd3.CommandText = "SP to populate GRID" 'whatever the case may be here
daPeople = New SqlClient.SqlDataAdapter
daPeople.SelectCommand = cmd3
If yourDG.Columns.Count <= 0 Then
Dim btnc As New ButtonColumn
btnc.ButtonType = ButtonColumnType.LinkButton
btnc.HeaderText = "Edit"
btnc.DataTextField = "primarykey"
btnc.DataTextFormatString = "<img border='0' src=" & ResolveUrl("~/images/edit.gif") & ">" 'whatever the case may be here
btnc.CommandName = "Edit"
btnc.ItemStyle.HorizontalAlign = HorizontalAlign.Center
yourDG.Columns.Add(btnc)
Dim bc As New BoundColumn
bc = New BoundColumn
bc.DataField = "sqlColumnName"
bc.HeaderText = "First"
yourDG.Columns.Add(bc)
End If
Dim dt As New DataTable
yourDG.Fill(dt)
yourDG.DataSource = dt
yourDG.DataBind()
'lbtnEditAddPerson.Visible = True
Catch ex As Exception
Finally
If Not cnADO Is Nothing Then
If cnADO.State = ConnectionState.Open Then
cnADO.Close()
End If
End If
End Try
End Sub
Protected Sub yourDG_CellClick(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs)
Dim cmd As String = e.CommandName.ToString.ToUpper
If cmd.ToUpper = "EDIT" Then
Using cnADO As SqlConnection = New SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings("yourserver").ToString) 'whatever the case may be here
Using scmd As New SqlCommand("", cnADO)
scmd.CommandText = "YOURTEXTHERE"
Using dr As SqlDataReader = scmd.ExecuteReader()
If dr.Read Then
'fill textbox for load
End If
End Using
End Using
End Using
yourAdditionalStuff.Visible = True
ElseIf cmd.ToUpper = "ANOTHERCOMMAND" Then 'if you want to...allows for extensibility (would need another column tho)
End If
End Sub
これはフレームワークですが、必要なものに非常に近い必要があることに注意してください（または、少なくとも検索するものを提供します）。私は実際にこのアプローチを使用したので、それが機能することを確認できます。データベースを使用していない場合 (つまり、表示されるテキストボックスにユーザーが入力したものを保存/ロードする必要がない場合) は、単純化する必要があります。ただし、これでグーグルになるはずです。それが役に立てば幸い！
-sf
編集：クリスのコメントによると、私は次のように思います：
function hideOnClick(){
var d = document.getElementById('<% =yourtextbox.ClientID %>');
if(d.style.display == "none"){
d.style.display = "inline";
}else{
d.style.display = "none";
}
}
表示/非表示を切り替えるクライアント側の JavaScript だけが必要な場合に役立ちます。必要なのは、それを編集ボタンに添付することだけです。