Develop Reference

How to get the popup dialog box text field value

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

Keeping the current accordion pane open after ASP.NET postback

I have problem with keeping the active according open after the post-back of ASP.NET page.
Here's the script:
$(document).ready(function() {
$('.accordionButton').click(function() {
//Remove the "accordionOn" calss from all button
$('.accordionButton').removeClass('accordionOn');
//Close all open divs
$('.accordionContent').slideUp('normal');
//Open the div
if ($(this).next().is(':hidden') == true) {
//Add the "accordionOn" class to the button
$(this).addClass('accordionOn');
//Open div
$(this).next().slideDown('normal');
}
});
});
Here's the mark-up:
<div id="accordionWrapper">
<div class="accordionButton">
Hearder 1</div>
<div class="accordionContent">
Content 1
<asp:Label ID="lblName" runat="server"></asp:Label>
<br />
<asp:Button ID="btnSayHello" runat="server" Text="Say Hello" />
</div>
<div class="accordionButton">
Hearder 2</div>
<div class="accordionContent">
Content 2
</div>
<div class="accordionButton">
Hearder 3</div>
<div class="accordionContent">
Content 3
</div>
</div>
I'd like to persist the active accordion, the current open div, to stay open during the post-back of ASP.NET.
Thank you.

Post back index of selected pane, and restore on page load as
$('.accordionButton').eq(index).click()

You could save the accordion position in a cookie and then retrieve it with on page load and set it with something like:
$('.accordionButton').eq(index).click()
Look here on how to set/get a value in a cookie in javascript

You should save the selected pane, and select it with javascript on page load:
$(document).ready(function(){
$('.accordionButton').eq(<%= SelectedPane %>).click()
});
Or, you could youse hashes in you url as facebook does, but it'd be more complicated.
Hope this helps. Cheers

The index value can be boolean or integer
<script language="javascript" type="text/javascript">
$(function () {
var activeIndex = parseInt($('#<%=AccordionIndexHidden.ClientID %>').val());
if (activeIndex < 0)
activeIndex = false;
$("#accordion").accordion({
autoHeight: false,
event: "mousedown",
active: activeIndex,
change: function (event, ui) {
var index = $(this).children('h3').index(ui.newHeader);
$('#<%=AccordionIndexHidden.ClientID %>').val(index);
}
});
});
</script>
Remember to start with index less than 0
<asp:HiddenField ID="AccordionIndexHidden" runat="server" Value="-1" />

Can't find form on returned HTML

I have a main page consisting of a link and a div with id 'containerDiv'.
When you press the link it loads some HTML from another page using Ajax into this div.
The HTML that is returned contains a form. When the form is submitted, I wish to stay on the same page and display the resulting content in the div.
Please see a picture showing what I wish to accomplish by clicking this link.
The script on the main page:
<script type="text/javascript">
$(document).ready(function () {
$("a").click(function () {
$('#containerDiv').load(this.href + ' #contentDiv', function () {
alert($('#page2Form').id);
$('#page2Form').submit(function () {
$.post(
pageName,
this.serialize(),
function (data) {
if (data.success)
alert('done');
else
alert('error');
$('#containerDiv').html(data);
}
);
return false;
});
});
return false;
});
});
</script>
The relevant HTML on the main page:
<a id="link1" href="page1.aspx">Page 1</a>
<br />
<div id='console' style="border: 2px solid red; width: 1000px">
when the link is clicked this content is replaced with new html.
</div>
The relevant HTML on the content page:
<div id="contentDiv">
<form id="page2Form" runat="server">
<div>
<h1>
Page 2</h1>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="submit" OnClick="Submit_OnClick" />
</div>
</form>
</div>
The problem is that I can't find the form 'page2Form' on the returned HTML.
Alert ($('#page2Form'). id); returns 'undefined'
Perhaps it has something to do with that element is not loaded in the DOM.

A few things here, jQuery objects won't have a .id property, you want the id of the first element in the matched set, like this:
alert($('#page2Form')[0].id);
//or without jquery:
alert(document.getElementById('page2Form').id);
Also, make sure you're looking for it after the $('#containerDiv').html(data); call, so it's added to the DOM. If you're looking for it before it's added, then use the returning data as the context to look in, like this:
alert($('#page2Form', data)[0].id);