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
Related
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.
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 have a nice pop up warning that says "Are you sure you want to overwrite this file? Yes No. Is there any way to do this with telerik or Ajax Tool Kit?. I want to be able to control it on the server side too with c#
Thank you
one way could be
1) create a div like a popup
2) display the popup when some events occurs (like button click)
3) if users click ok then doing somethings on server side
4) if users click no then hide the div
Here some code, sorry if there is some error but i don't have the environment on my hands.
<head>
<script type="text/javascript">
function showConfirm()
{
var popup = document.getElementbyId('popup');
popup.style.display = '';
}
function hide()
{
var popup = document.getElementbyId('popup');
popup.style.display = 'none';
}
</script>
</head>
<body>
<form runat="server" id="form1">
<div id="popup" style="display:none">
<p>bla bla bla</p>
<asp:button id="btn_ok" runat="server" OnClick="ServerRountine_Click"/>
<asp:button id="btn_ko" runat="server" onclientclick="hide();"/>
</div>
<asp:button id="btn_overwrite" runat="server" onclientclick="showConfirm();"/>
</form>
</body>
You can try:
jConfirm(message, [title, callback])
http://abeautifulsite.net/blog/2008/12/jquery-alert-dialogs/
You can put an OnClick (or OnClientClick if it's a serverside control) event on your submit button like the following:
<input type="button" value="Submit new file" onclick="if(confirm('Are you sure you want to overwrite this file?')) return false;" />
I'd prolly use asp modalpopup for this ;p
... but yeah you want to do it with ajax etc.
I think you'd love jq-ui then.
It is almost the same as above , but it will style the popup at the same time;p
$("#modEdit").dialog({//modEdit is your Div with any controls.
autoOpen: false,//Properties
width: 600,
show: "fade",
hide: "fade",
modal: true,
buttons: {//Buttons
"Save Changes": function () {
ModSaveChanges();
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
Syntax looks in short like this $(control).dialog({properties,buttons:{btn1,btn2}}); etc
really easy, I really recomend it ^^ :D
I have used it for my Mobile Apps;p
Oh and you might also then take a look into Sencha Ext ;p
so i have a lightbox in which pops up an aspx page with textboxes and two buttons (submit - disabled and cancel - enabled). I wanted to enable my submit button ontextchange. it works fine when opened separately (not as a lightbox) but when i let it run normally with the lightbox function everytime ontextchange gets triggered the whole page refreshes disabling the lightbox.
<asp:TextBox ID="textBox1" runat="server" OnTextChanged="OnTextChanged_AttributesEdited" autopostback="true">
protected void OnTextChanged_AttributesEdited(object sender, EventArgs e)
{
btnSubmit.Enabled = true;
}
now if i take out the "autopostback=true" it then will not trigger the the ontextchanged. was wondering if is it better if javascript will be the way to go for enabling the button or is there a way where i can prevent the postback when ontextchanged is triggered?
thanks a lot!
I think this would be a prime use for some jQuery in your application. Without posting back to the server for enabling / disabling a button, this would look a lot smoother, load faster and keep your current page state intact. An example might be as follows:
<script type="text/javascript">
$(document).ready(function() {
$("#textBox1").change(function() {
$("#btnSubmit").removeAttr("disabled");
});
});
</script>
Just put the above script tag in your HTML, just before closing the body tag.
An even better solution, however, would be to assign a specific CSS class to all the textboxes that should inherit that behaviour. Assuming that you assign a CSS class called "someCssClass" to all those textboxes, your script would then look something like this:
<script type="text/javascript">
$(document).ready(function() {
$("input.someCssClass").change(function() {
$("#btnSubmit").removeAttr("disabled");
});
});
</script>
I'd use jQuery as mentioned by #FarligOpptrenden, but if you don't have it and just want plain javascript, this should work.
Input within your lightbox:
<input type="text" id="textbox" onKeyUp="enableSubmitButton()" />
<input type="button" id="submitButton" value="Submit" />
<input type="button" id="cancelButton" value="Cancel" />
Javascript:
<script type="text/javascript">
function enableSubmitButton()
{
document.getElementById('submitButton').disabled = false;
document.getElementById('cancelButton').disabled = true;
}
</script>
You could also do your enabling/disabling buttons on load in javascript:
<script type="text/javascript">
window.onload = function () {
document.getElementById('submitButton').disabled = true;
document.getElementById('cancelButton').disabled = false;
}
</script>
I have the following ASPX page:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.6.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#dialog").dialog({
bgiframe: true,
autoOpen: false,
height: 300,
modal: true,
buttons: {
'Ok': function() {
$(this).dialog('close');
__doPostBack('TreeNew', '');
},
Cancel: function() {
$(this).dialog('close');
}
},
close: function() {
;
}
});
});
function ShowDialog() {
$('#dialog').dialog('open');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="TreeNew" runat="server" Text="Nuevo" OnClientClick="ShowDialog(); return false;"/>
<asp:Label ID="Message" runat="server"></asp:Label>
<div id="dialog" title="Create new user">
<p id="validateTips">All form fields are required.</p>
<asp:RadioButtonList ID="ContentTypeList" runat="server">
<asp:ListItem Value="1">Text</asp:ListItem>
<asp:ListItem Value="2">Image</asp:ListItem>
<asp:ListItem Value="3">Audio</asp:ListItem>
<asp:ListItem Value="4">Video</asp:ListItem>
</asp:RadioButtonList>
</div>
</div>
</form>
</body>
</html>
When the user click on TreeNew button appears the modal dialog, then he/she choose an option an click Ok button to do a postback.
I need that the server side execute TreeNew_Click method: How can I do that?
If I use __doPostBack('TreeNew', '') it throws me the following error: "Object expected".
UPDATE:
I found the origin for the error: the function __doPostBack is not defined. I'm not going to delete the question because I think Chris Clark's answer is so interesting.
As a rule, if you find yourself ever typing the text "__doPostBack(...", you should re-evaluate your approach.
In this case, you should just put a server-side asp.net button inside the div that you are turning into the dialog and use that instead of the generates jQuery button. That way the postback code will get wired up for you. There is one caveat however - when jQuery turns your div (I'm going to assuming it's a div) into a dialog, it rips the div out of the form element. That means you have to attach it BACK to the form BEFORE the postback occurs. You can do that in the close function of the dialog. The postback will then occur properly.
If you really want to use the generated jQuery OK button, you have a couple of options. First, you can slap a server-side asp.net button on the page and hide it, then call the asp.net button's click event from the OK button's code. Second, you can emit a javascript function form the server using Page.ClientScript.GetPostBackEventReference that will contain the __doPostBack code that you were trying to hand-write above. Then call that emitted function from the OK button's JS code.