Making a link display a div in a popup - javascript

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

Related

I cannot add record to database asp.net

I have a problem, I would like to add some records to database but when I'm clicking on submit button, nothing done.
Some functions for submit button:
protected void rezerwujButton_Click(object sender, EventArgs e)
{
rezerwacje nowaRezerwacja = new rezerwacje();
nowaRezerwacja.imie_klienta = imieTextBox.Text;
nowaRezerwacja.nazwisko_klienta = nazwiskoTextBox.Text;
nowaRezerwacja.email_klienta = emailTextBox.Text;
nowaRezerwacja.nrtel_klienta = telefonKomorkowyTextBox.Text;
bazaDC.rezerwacjes.InsertOnSubmit(nowaRezerwacja);
bazaDC.SubmitChanges();
}
Some forms in html:
<div id="dialog" title="Rezerwacja">
<asp:Panel ID="panel3" runat="server">
<asp:TextBox ID="imieTextBox" runat="server" placeholder="ImiÄ™"></asp:TextBox>
<asp:TextBox ID="nazwiskoTextBox" runat="server" placeholder="Nazwisko"></asp:TextBox>
<asp:TextBox ID="emailTextBox" runat="server" TextMode="Email" placeholder="Email"></asp:TextBox>
<asp:TextBox ID="telefonKomorkowyTextBox" runat="server" TextMode="Phone" placeholder="Telefon kom."></asp:TextBox>
<div id="plansza"></div>
<asp:Button ID="rezerwujButton" runat="server" Text="Zarezerwuj" OnClick="rezerwujButton_Click" />
</asp:Panel>
In this form there is a popup window.
I can't understand because before I have code in many forms and everything was alright but now unfortunately no... What's wrong with that code?
I'll add some jquery code, that open the window form:
$(document).ready( function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "puff",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( ".opener" ).on( "click", function() {
$( "#dialog" ).dialog( "open" );
});
});
Try also using onclient click on your existing button.
<asp:Button ID="rezerwujButton" runat="server" Text="Zarezerwuj" OnClientClick="clientClick();" />
Then create a hidden button with the rezerwujButton_Click function you've already built.
<asp:Button id="hidButton" runat="server" style="visibility: hidden; display: none;" onclick="rezerwujButton_Click" />
Create the following javascript function to trigger the post back on the hidden button.
function clientClick(){
__doPostBack('<%#hidButton.UniqueId %>');
}

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 function inside datalist control

$(function () {
$('a.detials').on('click', function (ev) {
$(this).next('div').toggle();
});
});
the issue here is i want to toogle the div when anchor tag click .but i have the problem with my code i don't what is wrong.i search on google to reach to this result and when i click on the anchor tag the div not open ,i need help .
$( function () {
$('a.detials').on('click', function() {
$('+ div', this).toggle();``
});
});
<asp:DataList ID="dtlRoomsPrice" Visible="false" orizontalAlign="center" runat="server" ShowFooter="False" ShowHeader="False" Width="700px" OnItemDataBound="dtlRoomsDetails_ItemDataBound">
<ItemTemplate>
ShowDetails
<div class="shoow" id="div_ID" style="width:687px;height:110px;background-color:rgb(247,239, 216);border-radius: 5px;box-shadow: 7px 6px 5px #888888; border: 2px solid gray; display:none;padding: 5px; ">
<asp:Label ID="lblAmiintiesTxt" runat="Server" CssClass="shbe_label" Text="<%$ Resources:Resource,Amenities %>" Visible="false"></asp:Label>
<asp:Label ID="lblAmiinties" runat="Server" CssClass="shbe_h2" Text='<%# Eval("Amenities") %>' Visible="true"></asp:Label>
</div>
</ItemTemplate>
</asp:DataList>
Because there's no click handler assigned for the first click. This is what's happening:
User clicks on element
Function togglee is invoked
A click handler is assigned to element
User clicks on element again
Click handler is invoked (what you wanted to happen in the first click)
(Also, another click handler is added by invoking togglee again. Which is definitely not what you want.)
I'm not sure why you're using this togglee function, but you don't need it. Remove the inline JavaScript from the element:
ShowDetails
and assign the click handler when the page loads:
$(function () {
$('a.detials').on('click', function() {
$('+ div', this).toggle();
});
});
Then the first click on that element (and any subsequent click) will invoke that click handler.

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?

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