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

How to disable Pop Up in javascript

I am new to Javascript. My req is to not show the pop up if i get list from server side as empty list. Before this requirement i was doing something like below code where as soon as user hits the URL, the popup comes as i have used window.onload . Now the requirement got changed and i need to show pop up only when there is some data from backend. Please help me on this.
<script>
window.onload = function () {
$('#homePopup').bPopup({
easing: 'easeOutBack', //uses jQuery easing plugin
speed: 550,
transition: 'slideDown'
})
}
</script>
<div id="homePopup"><span class="buttonCloseModal b-close"><span>X</span></span>
<h1>Notifications</h1>
<div class="ListContainerScroll">
<div>
<asp:Repeater ID="rptrNotification" runat="server" OnItemDataBound="rptrNotification_ItemDataBound">
<ItemTemplate>
<div>
<asp:Literal ID="litNotificationTitle" runat="server" Text='<%# Bind("Title") %>'></asp:Literal>
</div>
<div>
<asp:Literal ID="litNotificationDesc" runat="server" Text='<%# ((SPListItem)Container.DataItem)["NotificationDescription"] %>'></asp:Literal>
</div>
</ItemTemplate>
</asp:Repeater>
<div class="noDataAvailable" runat="server" id="divNoDataAvailable" visible="false"></div>
</div>
</div>
</div>
I am doing this code in .ascx

A piece of code you have put inside function of the onload event of the window you are going to put inside ajax success callback (i guess you are requesting data with jQuery ajax)
$.ajax({
url: 'http://myawesomeurl.net',
success: function (ajaxResponse) {
//your code start
$('#homePopup').bPopup({
easing: 'easeOutBack', //uses jQuery easing plugin
speed: 550,
transition: 'slideDown'
})
);
//your code end
}
});

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?

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
});

Javascript in update panel doesn't work after partial postback

<script type="text/javascript">
$(function () {
$('.datePicker').datetimepicker({ dateFormat: 'dd/mm/yy' });
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:TextBox ID="TextBox1" class="datePicker" runat="server"></asp:TextBox>
<asp:UpdatePanel ID="holder" runat="server" UpdateMode="Always" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:DropDownList runat="server" ID="ddl_RespondBy" AutoPostBack="true" OnSelectedIndexChanged="ddl_SelectedIndexChanged">
<asp:ListItem Selected="True">1 Hour</asp:ListItem>
<asp:ListItem>Other</asp:ListItem>
</asp:DropDownList>
<asp:TextBox ID="txt_RespondBy" class="datePicker" Visible="true" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddl_RespondBy" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</asp:Content>
protected void ddl_SelectedIndexChanged(object sender, EventArgs e)
{
if (ddl_RespondBy.SelectedItem.Text == "Other")
{
txt_RespondBy.Visible = true;
}
else
{
}
}
I do partial post back with the update panel, I have two text box one outside update panel and one inside, when I select other from the dropdown and try to open the calendar inside the txt_RespondBy text box it doesn't show, but the text box outside update panel shows the calendar. why is Javascript not working inside update panel after partial postback

Place your datetimepicker initialisation code in the pageLoad function, which is called whenever the page loads (asynchronously or synchronously).
<script type="text/javascript">
function pageLoad(sender, args) {
$('.datePicker').datetimepicker({ dateFormat: 'dd/mm/yy' });
}
</script>

You can use pageLoad or .live:
Reference info:
$(document).ready() and pageLoad() are not the same
.live:
Jquery .live works but not with .datepicker
$(function(){
$('.datePicker').live('click', function() {
$(this).datepicker({showOn:'focus'}).focus();
});
});
pageLoad():
function pageLoad(sender, args) {
$('.datePicker').datetimepicker({ dateFormat: 'dd/mm/yy' });
}

I understand this is a old question but then also I am posting one more answer here if someone visit this page now or in later times for help.
one can use
$(document).on()
as it makes sure that controls bind to the events whenever page loads. Its job is Similar to page load event but you can say syntax is different. And almost for anything and everything this works. I have more than 50 controls in a panel and all to perform different task and I never got into trouble.. not even once as i was using this function.
$(document).on('eventName', 'element' , function(){
//your code to perform some task;
});
eventName can be any event - like click, change, select..
And
Element - can be a name, classname, id
example - as above question -
html -
<script src="lib/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<input type="text" class="datePicker" data-provide="datepicker-inline" data-date-format="mm/dd/yyyy">
Javascript -
$(function(){
$(document).on('click', '.datePicker' , function(){
$(this).datepicker();
});
});