I have a asp:DropDownList that needs to have a search bar for the user to search through the dropdown.
If I remove the line 'dropdownParent: $("#ModalPanelCard")' the dropdown displays and I can search on it, but it appears to be behind the modal. Once I reference the dropdownParent, I can't even select the dropdown - almost like it isn't calling the select2. Am I referencing the incorrect parent?
Frontend Code
<asp:Panel runat="server" ID="ModalPanelCard">
<div class="col-lg-6">
<asp:DropDownList ID="selCustomerCard" runat="server"></asp:DropDownList>
</div>
</asp:Panel>
Script
<script>
$('#<%= selCustomerCard.ClientID %>').select2({
dropdownParent: $("#ModalPanelCard")
});
</script>
Try the following:
<script>
$('#<%= selCustomerCard.ClientID %>').select2({
dropdownParent: $("#<%= ModalPanelCard.ClientID %>")
});
</script>
Just making sure the ID is right from ASP. ASP can add extra text to your HTML id, which is why we need to make sure it's the same ID.
Related
Does anyone know if there is a way to prevent the Ajax CalendarExtender from displaying recently selected dates (like the 2018-03-05, etc. in below screenshot)? I also wasn't sure if this was a browser feature, but I have unselected all of the predictive options in my Chrome browser, cleared all history/cache, shut the browser down completely and it's still showing the dates. This is an ASP.NET, C# application.
I've never had much success with getting jQuery to work, but here is what I have so far:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$('tbStartDate').on('click', function(e) {
e.preventDefault();
$(this).attr("autocomplete", "off");
});
$('tbEndDate').on('click', function(e) {
e.preventDefault();
$(this).attr("autocomplete", "off");
});
</script>
<asp:TextBox ID="tbStartDate" runat="server"></asp:TextBox>
<asp:CalendarExtender runat="server" TargetControlID="tbStartDate"></asp:CalendarExtender>
<asp:TextBox ID="tbEndDate" runat="server"></asp:TextBox>
<asp:CalendarExtender runat="server" TargetControlID="tbEndDate"></asp:CalendarExtender>
But I'm getting the "Uncaught TypeError: $(...).on is not a function at VendorFreightCalc.aspx:16, which points at the first jQuery line above.
Please have a look at this question:
Disable autocomplete for all jquery datepicker inputs
Basically, you want to turn off autocomplete for that field.
(UPDATE)
Maybe try the non-jquery options for turning off autocomplete.
<input type="text" name="field1" value="" autocomplete="off" />
I would like to set the jquery dialog title using an asp.net label . Is it possible?
I have tried something like this :
$(Div1).dialog('option', 'title', 'Title Name');
But the Title Name here is static. I would like to use my asp.net label here instead of the 'Title Name'.
I also have my code updated below :
Asp.Net code :
<div id="Div1" class="InsertBar">
<asp:Label ID="Label2" runat="server" Visible="true" Font-Bold="true"></asp:Label>
<asp:Panel ID="Panel1" runat="server" HorizontalAlign="left" ScrollBars="Auto">
<asp:GridView>
*******GRIDVIEW CODE ************************
</asp:GridView>
</asp:Panel>
</div>
Java Script Code :
<script type="text/javascript">
function ViewModelPopup1() {
$(Div1).dialog('option', 'title', $('#<%=Label2.ClientID%>').val());
}
</script>
The reason I am using a label here (thought I would mention it):
I have an asp.net grid view. I am displaying the gridview in a jquery dialog. I have to fetch a value from the
grid view and use it as a title to the jquery dialog.
I am fetching the value from the grid view and storing it in a label.
I would now want to assign the value of the label to the jquery dialog title.
Does anyone know how I can do this ? or have any ideas
Try this:
$(Div1).dialog('option', 'title', $('#<%=Label1.ClientID%>').text());
Note: Change Label1 to match the name of your ASP.NET Label control.
I'm creating an online application form.
In front page, There are First Name, Last Name, Email etc... form inputs. What I want is that
if user fills the form and click on the submit, I want to show him the print preview page with values which user filled... Is it possible? I'm using ASP.Net C#
If you can use jquery this code is good
$(document).ready(function () {
window.print();
});
and you can see these
http://www.designplace.org/tutorials.php?page=1&c_id=27
http://www.alistapart.com/articles/goingtoprint/
https://web.archive.org/web/20211029043752/https://www.4guysfromrolla.com/webtech/061103-1.shtml
If you can use javascript, then try this
<script type="text/javascript">
function CallPrint(strid) {
var prtContent = document.getElementById(strid);
var WinPrint = window.open('', '', 'letf=0,top=0,width=850,height=800,toolbar=0,scrollbars=1,status=0');
WinPrint.document.write('<html><head><title>Popup</title>')
WinPrint.document.write('</head><body>');
WinPrint.document.write('</body></html>');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
}
</script>
Take a print button on the page
<input id="btnPrint" type="button" value="Print" runat="server"
onclick="javascript:CallPrint('divPrint')"/>
and Place your Controls which are to be printed within a div
<div id="divPrint">
//Your controls
</div>
I have three linkbuttons when the user selects the current link it should be red.but at present it even makes the visited link also red which should not be the case.can any one help regarding this?
<li>
<asp:LinkButton ID="lnkCat1" runat="server"
OnClick="lnkCat1_Click" CssClass="mylink"
OnClientClick="return changeColor();"></asp:LinkButton></li>
<script type="text/javascript">
function changeColor(e) {
e.style.color = "red";
}
}
</script>
try this code:
Please include jquery first
css
.red {
color: red;
}
javascript:
<script type="text/javascript">
function changeColor(e) {
$('.red').removeClass('red');
$(e).addClass("red");
}
</script>
this is raw javascript code, i.e. you don't need libraries like jQuery.
<li>
<asp:LinkButton ID="lnkCat1" runat="server"
OnClick="lnkCat1_Click" CssClass="mylink"
OnClientClick="return changeColor(this); return false;"></asp:LinkButton></li>
<script type="text/javascript">
function changeColor(e) {
e.style.color = "red";
}
</script>
this line
OnClientClick="return changeColor(this); return false;"
will pass the link element to the javascript function changeColor, and immediately return false, so the link's default action (visiting another page) never happens. (this may be different for IE)
your actual function also had an extra } in it.
I'd use something like Firebug or Chrome's developer tools, so you can view javascript errors as they appear
im looking to select the follow element by id toggleThisDiv. The markup looks like:
<li id="liCategory" runat="server">
<asp:HyperLink ID="lnkCategory" runat="server">
<span><asp:Literal ID="litCategory" runat="server" Visible="true" /></span>
<asp:Image ID="imgMan" runat="server" Visible="false" /></asp:HyperLink>
<asp:Button ID="btnToggleDiv" runat="server" Text="+" Visible="false" />
</li>
<div id="toggleThisDiv" runat="server" style="display:none;margin-top:-16px;">
And the jQuery:
$(document).ready(function () {
$('[id*="btnToggleDiv"]').click(function () {
$(this).next().slideToggle(100);
return false;
});
});
This works when the button is outside of the listitem but this is all inside a repeater and if i leave it like that, all of the buttons created will be next to each other instead of within their associated list item.
I'm looking for something within jQuery that would allow me to select the next div (toggleThisDiv), is this possible?
Thankyou
Use unique ID's, or classes if generating elements where the same identifier will be used.
To target an element outside the current parent of the clicked element you can find the closest parent that matches a selector, and then the next element etc.
$(document).ready(function () {
$('[class*="btnToggleDiv"]').on('click', function () {
$(this).closest('li').next('div').slideToggle(100);
return false;
});
});
Use something like this to select the toggleThisDiv
$('#<%= toggleThisDiv.ClientID %>')
When the website is generated from your asp code, your IDs will be different than what you have given them. This is because they are run at server. Anytime that you are using runat server, use the format above to find the generated ID.
You should use a class inside to repeater though.