I have gridview where i am editing row in a separate popup window by using a jquery ui dialogue.My question is Can we have a seperate window for each row edit in gridview.I am using a usercontrol for adding data and same user control is used in popup window by using different DIV
i am posting code what i have done
This is where i am entering data in to database,DIV is addID user control is TestUserControl
<div id="addID" class="divTable">
<div class="divRow">
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<uc1:TestUserControl runat="server" ID="idAdd" />
<div>
</div>
This is the div ,idMain responsible for editing which i will popup in jquery dialgue
<div id="idMain" style="display: none; background-color: #EEEEEE" class="divTable">
<div class="divRow">
<asp:UpdatePanel ID="updatePnlEdit" runat="server">
<ContentTemplate>
<div id="iForm" class="divRow">
<div class="divRow">
<uc1:TestUserControl runat="server" ID="IdUserControl" />
<div>
following is the jquery i am using to popup
function showIdDetails(divobj, pagetitle, width, height) {
$("#" + divobj)
.dialog({
open: function () {
$(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar").addClass("ui-state-error");
},
title: pagetitle,
appendTo: "form",
modal: false,
draggable: true,
resizable: true,
width: width
})
Finally i will call showIdDetails function in gridview row command as like shown below
ScriptManager.RegisterStartupScript((sender as Control), this.GetType(), "alert", "showIdDetails('idMain','ID DETAILS','600','400');", true);
As of now what is happening is foreach edit click i am popping up single window which contains the row i clicked.And what i want is foreach click i want to popup seperate window contains corresponding row,how to do it?
Related
I have one popup dialog box,in that dialog box ,i have added one text field.now onclicking the add button,i want to get the text box value and i want to post that value into another asp page.iam not getting how do it..
Here is my code.
Button code:-
<asp:Button ID="button2" ClientIDMode="Static" runat="server" Text="Add" />
<div>
<div id="popup" style="display:none">
Name:
<asp:TextBox ID="coname" runat="server" />
</div>
</div>
This is my javascript code .
<script type="text/javascript">
$(function(){
$("#button2").click(function () {
$("#popup").dialog({
title: "Name",
width: 430,
height: 250,
modal: true,
buttons: {
Add: function () {
$(this).dialog('close');
}
}
});
});
})
</script>
Well, you should just do something more than just "close dialog" in your Add part...
Try first, something like :
//... JS Add : function() part
console.log($('#coname').val());
$(this).dialog('close');
This displays the user's entry...
If you have to do something with it, then just handle it there before closing the dialog^^
jQuery dialog with tabs disappear when a page of the GridView is changed. When the page is rendered i have a button that on click pops a jQuery dialog with tabs, but on this page I also have a GridView and if i change the page of the grid view and then click again on the button that should display the jQuery dialog with the tabs - the tabs are not displayed. Instead the dialog pops up but the tabs are just displayed as list items. Here is my aspx code and the javascript function:
<div id="returning_dialog_form" title="Returning">
<asp:UpdatePanel ID="UpdatePanel4" runat="server">
<ContentTemplate>
<ul>
<li>Item</li>
<li>Accessory</li>
</ul>
<div id="return_item_tab" title="Return Item">
<p>Enter the id of the item that you want to return: </p>
<asp:TextBox ID="TextBox1" runat="server" />
<br />
<asp:Button ID="return_item_button" runat="server" Text="Return item" OnClick="return_item_Click" />
</div>
<div id="return_accessory_tab" title="Return accessory">
<p>Enter the id of the accessory that you want to return: </p>
<asp:TextBox ID="TextBox2" runat="server" />
<br />
<asp:Button ID="return_accessory_button" runat="server" Text="Return accessory" OnClick="return_accessory_Click" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<script>
$(function () {
$("#returning_dialog_form").tabs();
});
</script>
And here is the code that pops the jQuery dialog:
<script type="text/javascript">
var dialogOpts = {
resizable: false,
bgiframe: true,
maxWidth: 320,
maxHeight: 320,
width: 320,
height: 320,
autoOpen: false
};
$('#returning_dialog_form').dialog(dialogOpts).parent().appendTo($("#form1"));;
$(function () {
$("#returning_dialog_form").dialog({
});
$("#return_item_button_dialog").click(function () {
$("#returning_dialog_form").dialog("open");
return false;
});
});
</script>
The GridView is placed inside a UpdatePanel if it matters.
Why is it that the tabs in the jQuery dialog are not shown when the button is clicked after a page of the GridView is been changed?
I have wright a code for open a modern pop window in asp.net that code is working good. but i also want to open pop window using select a data from deopdown list. here is a code which i have wright for open pop window when user click on button but how can i open pop using select Item from dropdonwn list that pop up says Upgrade Membership.
<asp:DropDownList ID="ddWeek" class="contact-input" runat="server" Width="400px"
AutoPostBack="True" OnSelectedIndexChanged="ddWeek_SelectedIndexChanged">
</asp:DropDownList>
<div id="modal">
<div id="headingpop2">
Select You Plane for Upgrade Membership
</div>
<div id="contentpop2">
<p>Select you plan as per you like to Upgrade</p>
<a runat="server" href="Becomeamember.aspx"
class="buttonpop green close" style="margin-top: 140px; margin-right:
230px;">
<img src="images/tick.png">Upgrade Now</a> <a style="margin-top: 140px;
margin-right: 50px;"
href="#" class="buttonpop red close">
<img src="images/cross.png">Cancel</a>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#button1').click(function (e) { // Button which will activate our modal
$('#modal').reveal({ // The item which will be opened with reveal
animation: 'fade', // fade, fadeAndPop, none
animationspeed: 600, // how fast animtions are
closeonbackgroundclick: true, // if you click background
// will modal close?
dismissmodalclass: 'close' // the class of a button or
//element that will close an open modal
});
return false;
});
});
</script>
This code is working with Button but i want it will work with dropdownlist too. any one have a any idea how can i do this please help me out.
Thank You
I have a div which contains more than 50 input submit button. I want to implement a live filtering as done in Data Tables, the problem is i cannot keep my submit buttons inside tables, so can anyone suggest some approach, so that i can filter those input buttons as i enter something in the search text box.
Also these input submit buttons are generated by c# coding inside a panel.
i tried with jquery.livesearch
Jquery
$('#searchbox').search('(".btn-pr").attr("value")', function (on) {
on.reset(function () {
$('.btn-pr').show();
});
on.empty(function () {
$('#lblemp').show();
});
on.results(function (results) {
$('.btn-pr').hide();
results.show();
});
});
but as this one was used for number of li's inside ul, the selector passed in the search function was #names li, what selector and how (in place of (".btn-pr").attr("value")) should i pass so that it searches the values of those submit buttons, and hides which doesnt match.
aspx
<div id="div_items2" style="float:right; margin-top:10px; width:500px; height:400px; margin-right:5px; overflow:auto;">
<asp:Panel runat="server" ID="pnlCategories">
<center><asp:Label ID="Label8" runat="server" Text="Estimate"></asp:Label></center><br />
</asp:Panel>
<asp:Panel runat="server" ID="pnlProducts" Visible="false" Width="100%">
<center><asp:Label ID="Label5" runat="server" Text="Estimate | Category: "></asp:Label><asp:Label ID="lblCategory" runat="server" Text=""></asp:Label></center>
<asp:Button ID="btnBack" runat="server" Text="Back" onclick="btnBack_Click" CssClass="btn-nav" /><br /><br />
</asp:Panel>
</div>
pnlProducts panel is generated with those input buttons during run.
I have a jQuery 'toggle' function on a table that I am using in conjunction with an asp.net gridview. I have pagination on my gridview and when I click on the next page, it posts back and therefore closes the Toggle/Table - I need a way of keeping it open. I have had a similar issue in the past with the Accordion function but resolved it via this method and wondered if one of you jQuery/Javascript geniuses could help:
<asp:HiddenField ID="hidAccordionIndex" runat="server" Value="0" />
<script language="javascript" type="text/javascript">
$(function () {
var activeIndex = parseInt($('#<%=hidAccordionIndex.ClientID %>').val());
$("#accordion").accordion({
autoHeight: false,
event: "mousedown",
active: activeIndex,
change: function (event, ui) {
var index = $(this).children('h3').index(ui.newHeader);
$('#<%=hidAccordionIndex.ClientID %>').val(index);
}
});
});
</script>
<div id="accordion">
<h3>Table Header 1 here</h3>
<div>
Some text here
</div>
<h3>Table Header 2 here</h3>
<div>
Here is my current code that I have the issue with:
<div class="box grid_16 round_all">
<h2 class="box_head grad_colour round_top">Client List</h2>
<div class="toggle_container" style="display:none;">
<asp:Label ID="LBLMessage" runat="server" />
<asp:GridView ID="gvClients" runat="server" CssClass="static" AutoGenerateColumns="true" AllowPaging="true" Visible="true" />
</div>
</div>
and here is the jQuery:
// Content Box Toggle Config
$("a.toggle").click(function(){
$(this).toggleClass("toggle_closed").next().slideToggle("slow");
return false; //Prevent the browser jump to the link anchor
});
Thanks in advance!
Try this:
$(function () {
$("a.toggle").click(function () {
$(this).toggleClass("toggle_closed").next().slideToggle("slow", function () {
if($(this).is(':visible')){
$('#<%=hidAccordionIndex.ClientID %>').val("1");
}
else{
$('#<%=hidAccordionIndex.ClientID %>').val("0");
}
});
return false; //Prevent the browser jump to the link anchor
});
var val = $('#<%=hidAccordionIndex.ClientID %>').val();
if (val == "1") {
$("a.toggle").click();
}
});
<asp:HiddenField ID="hidAccordionIndex" runat="server" Value="0" />
Update 1:
Check this test page. GV paging isn't functional but it does simulate the scenario. Let me know in terms of this example how it differs from what you are expecting.
Wondering if you want to use UpdatePanel and see if that helps.