How to get the popup dialog box text field value - javascript

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^^

Related

Multiple jquery dialogue for each click in asp.net

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?

jQuery tabs don't work after a gridview page is changed

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?

Force a postback in Javascript for UpdatePanel?

I have a function to close a modal:
function closeModal(name) {
$(name).modal('hide');
}
But, my page also has an update panel and I need to trigger it.
I tried __doPostBack('UpdatePanel1', '') with no luck.
Thanks
The problem is this:
$(document).ready(function () {
createAutoClosingAlert('.success_alert', 6000);
if(<%# IsAPostBack() %>){
if(window.parent != null){
window.parent.closeEditModal();
window.parent.closeCalendarModal();
window.parent.closeModal('#projectModal');
window.parent.closeModal('#scheduleModal');
}
}
});
I call it from the parent so I cannot get the hidden ID.
One option is to put a hidden button inside your update panel
<div style="display:none">
<asp:Button ID="Button2" runat="server" Text="Button" />
</div>
Then call the following in your script
document.getElementById('<%=Button2.ClientID%>').click();
The button click will cause a postback.
You can also look at Page.GetPostBackEventReference

Making a link display a div in a popup

I am trying to get a link to display a div in a popup.
This my my link:
<li><a class="newAttachmentType" onclick="getFiles(true)">Move to somewhere</a></li>
and this is the div I am trying to call and put into a popup:
<div id="ddlFiles">
<label>
Select new CaseFile:</label>
<asp:DropDownList runat="server" ID="ddlCaseFilesNew" DataSourceID="dsCaseFiles"
DataTextField="Display" DataValueField="FileID" OnPreRender="ddl_PreRender" Width="300px" />
<label>
Select old CaseFile:</label>
<asp:DropDownList runat="server" ID="ddlCaseFilesOld" DataSourceID="dsCaseFiles"
DataTextField="Display" DataValueField="FileID" OnPreRender="ddl_PreRender" Width="300px" />
</div>
This is what I have tried so far in the "getFiles()":
$('.newAttachmentType').click(function () {
$('#newAttachmentDialog').dialog({
autoOpen: true,
height: 'auto',
width: 'auto',
modal: true,
buttons: {
"Save": function () {
var attachmentName = $('#txtNewAttachmentName').val();
if (attachmentName != "") {
var res;
PageMethods.addNewAttachmentType(attachmentName, reloadAttachmentTypes, res);
$(this).dialog('close');
}
},
Cancel: function () {
$(this).dialog('close');
}
},
beforeClose: function () { $('#txtNewAttachmentName').val(''); }
});
});
You are assigning the click handler inside of your onclick method. Which is too late to have any effect.
Instead of assigning a click handler like that, just execute the code directly. Basically unwrap the inner function:
$('#newAttachmentDialog').dialog({
//Your code
});

Set jQuery Toggle to be open on ASP.Net Gridview Postback

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.

Categories

Resources