I have (I think) a simple problem. I'm building application with Asp.net and I want to show something (for example "!!!") after user left empty textbox. I cannot use standard validation components in Asp.net because it blocks every postback.
My attempt:
<html>
<head runat="server">
<script src="/Scripts/jquery-2.1.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.validation-control-is-not-empty').focusout(function () {
if ($(this).val() === '') {
$(this).next('.validation-alert').show();
}
else {
$(this).next('.validation-alert').hide();
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<h1>Validation test</h1>
<div>
<table>
<tr>
<td>
<asp:TextBox ID="TbName" CssClass="validation-control-is-not-empty" runat="server" />
</td>
<td>
<div class="validation-alert" style="display: none;">!!!</div>
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="TbMessage" CssClass="validation-control-is-not-empty" runat="server" />
</td>
<td>
<div class="validation-alert" style="display: none;">!!!</div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Focus lost is calling my function but the problem is that this:
$(this).next('.validation-alert')
will not find the next needed object... What am I doing wrong?
Thanks for your help.
Because .validation-alert is not the next sibling of .validation-control-is-not-empty, they are the children of same tr, so you can find the tr parent of this and then find the .validation-alert element within it.
$('.validation-control-is-not-empty').focusout(function () {
if ($(this).val() === '') {
$(this).closest('tr').find('.validation-alert').show();
} else {
$(this).closest('tr').find('.validation-alert').hide();
}
});
You can shorten it using .toggle() like
$('.validation-control-is-not-empty').focusout(function () {
$(this).closest('tr').find('.validation-alert').toggle($(this).val() === '');
});
Demo: Fiddle
Related
I have multiple Usercontrols in my project. Please find below two such Usercontrols' markup.
Places Usercontrol
<%# Control Language="C#" AutoEventWireup="true" CodeFile="Places.ascx.cs" Inherits="Places" EnableTheming="true" %>
<script type="text/javascript">
$(document).ready(function () {
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(EndRequest);
SetAutoComplete();
});
function SetAutoComplete() {
$("[id$=txtLocation]").autocomplete({
source: function (request, response) {
AjaxCall("<%= ResolveUrl("~/UControls/WebMethods.aspx/GetLocations") %>", request.term, response)
},
select: function (e, i) {
$("[id$=hfLocation]").val(i.item.val);
},
minLength: 1
});
}
</script>
<asp:TextBox ID="txtLocation" runat="server"></asp:TextBox>
<asp:HiddenField ID="hfLocation" runat="server" />
Skills User Control
<%# Control Language="C#" AutoEventWireup="true" CodeFile="UCSkill.ascx.cs" Inherits="UCSkill" EnableTheming="true" %>
<script type="text/javascript">
$(document).ready(function () {
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(EndRequest);
SetAutoComplete();
});
function SetAutoComplete() {
$("[id$=txtSkill]").autocomplete({
source: function (request, response) {
AjaxCall("<%= ResolveUrl("~/UControls/WebMethods.aspx/GetSkills") %>", request.term, response)
},
select: function (e, i) {
$("[id$=hfSkillID]").val(i.item.val);
},
minLength: 1
});
}
</script>
<asp:TextBox ID="txtSkill" runat="server" SkinID="lg-TB"></asp:TextBox>
<asp:Button ID="btnAddSkill" runat="server" Text="Add" OnClick="btnAddSkill_Click" />
<asp:HiddenField ID="hfSkillID" runat="server" />
Now my problem is, if use both the usercontrols in same page as below, only the one in the bottom works, i.e., my PlacesUC works and SkillsUC doesn't work, it just remains blank and doesn't throw any error even. If I move PlacesUC to top and SkillsUC to bottom, then my SkillsUC works and PlacesUC doesn't work. To make it clear the last usercontrol in the page alone works. Rest all Usercontrols above it doesn't work. It may be a conflict with ready function or autocomplete function. How to resolve this?
<%# Page Language="C#" CodeFile="Test.aspx.cs" Inherits="Test" MasterPageFile="~/UI/HomePage.master" %>
<%# Register Src="~/UControls/Places.ascx" TagPrefix="uc1" TagName="Places" %>
<%# Register Src="~/UControls/UCSkill.ascx" TagPrefix="uc1" TagName="UCSkill" %>
<asp:Content ContentPlaceHolderID="PageContent" runat="server">
<div class="row">
<div class="col-md-12 form-inline">
<table class="table table-sm">
<tr>
<td>
<uc1:UCSkill runat="server" ID="UCSkill" />
</td>
</tr>
<tr>
<td>
<uc1:Places runat="server" ID="Places" />
</td>
</tr>
</table>
</div>
</div>
</asp:Content>
Edit:-
My Ajax Call Function is as follows.
function AjaxCall(url, prefix, response) {
$.ajax({
url: url,
data: "{ 'prefix': '" + prefix + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.split('|')[0],
val: item.split('|')[1]
};
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
}
My master page is as follows.
<%# Master Language="C#" CodeFile="HomePage.master.cs" Inherits="HomePage" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>e-Recruitment</title>
</head>
<body style="padding-left: 5px; padding-right: 5px">
<style type="text/css">
.borderless td, .borderless th {
border: none;
}
.checkboxlist-inline li, .radiobuttonlist-inline li {
display: inline-block;
}
.checkboxlist-inline, .radiobuttonlist-inline {
margin-left: 8px;
}
.checkboxlist-inline label, .radiobuttonlist-inline label {
padding-left: 0;
padding-right: 8px;
}
</style>
<script src="../Scripts/jquery-3.2.1.slim.min.js"></script>
<script src="../Scripts/popper.min.js"></script>
<script src="../Scripts/bootstrap.min.js"></script>
<script src="../Scripts/jquery-1.10.0.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery-ui.min.js" type="text/javascript"></script>
<link href="../Scripts/jquery-ui.css" rel="stylesheet" />
<form id="MainForm" runat="server" enctype="multipart/form-data">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="Company" Name="Company.JavaScript.CompanyScript.js" />
</Scripts>
</asp:ScriptManager>
<asp:UpdatePanel ID="MainUpdPanel" runat="server">
<ContentTemplate>
<div id="ParentDiv" class="container-fluid">
<div class="row">
<div class="col-md-1">
<img src="../Content/Images/logonew.png" class="img-responsive" />
</div>
<div class="col-md-11">
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div class="row">
<div class="col-md-12">
<asp:ContentPlaceHolder ID="PageContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div class="row">
<div class="col-md-12">
<br />
<table class="table table-hover">
<tr>
<td style="width: 10%">
<asp:Label ID="lblTheme" runat="server" Text="Site Theme"></asp:Label>
</td>
<td style="width: 20%; text-align: left">
<asp:DropDownList ID="ddlTheme" AutoPostBack="true" runat="server" OnSelectedIndexChanged="ddlTheme_SelectedIndexChanged">
</asp:DropDownList>
</td>
<td style="width: 70%; text-align: right">
<small><i>©<asp:Label ID="lblComp" runat="server" Text=" Company 2018"></asp:Label>
®<asp:Label ID="lblRights" runat="server" Text=" All Rights Reserved"></asp:Label></i></small>
</td>
</tr>
</table>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
Please update Jquery to select closest control to call your
SetAutoComplete();
code then all controls will work.
please check this line in your doucment.ready code.
prm.add_endRequest(EndRequest);
page is throwing
EndRequest is not defined error
.
Thank you all for your help, Finally the following solution worked.
All the Function names should be unique.
On page postback UpdatePanel content changes, so the events need to be registered again.
Considering the above two points, following is the new code.
Places User Control
<%# Control Language="C#" AutoEventWireup="true" CodeFile="Places.ascx.cs" Inherits="Places" EnableTheming="true" %>
<script type="text/javascript">
$(function () {
GetLocations();
});
var prmInstance = Sys.WebForms.PageRequestManager.getInstance();
prmInstance.add_endRequest(function () {
GetLocations();
});
function GetLocations() {
$("[id$=txtLocation]").autocomplete({
source: function (request, response) {
AjaxCall("<%= ResolveUrl("~/UControls/WebMethods.aspx/GetLocations") %>", request.term, response)
},
select: function (e, i) {
$("[id$=hfLocation]").val(i.item.val);
},
minLength: 1
});
}
</script>
<asp:TextBox ID="txtLocation" runat="server"></asp:TextBox>
<asp:HiddenField ID="hfLocation" runat="server" />
Skill User Control
<%# Control Language="C#" AutoEventWireup="true" CodeFile="UCSkill.ascx.cs" Inherits="UCSkill" EnableTheming="true" %>
<script type="text/javascript">
$(function () {
GetSkills();
});
var prmInstance = Sys.WebForms.PageRequestManager.getInstance();
prmInstance.add_endRequest(function () {
GetSkills();
});
function GetSkills() {
$("[id$=txtSkill]").autocomplete({
source: function (request, response) {
AjaxCall("<%= ResolveUrl("~/UControls/WebMethods.aspx/GetSkills") %>", request.term, response)
},
select: function (e, i) {
$("[id$=hfSkillID]").val(i.item.val);
},
minLength: 1
});
}
</script>
<asp:TextBox ID="txtSkill" runat="server" SkinID="lg-TB"></asp:TextBox>
<asp:Button ID="btnAddSkill" runat="server" Text="Add" OnClick="btnAddSkill_Click" />
<asp:HiddenField ID="hfSkillID" runat="server" />
I have used a jquery datepicker in my code for user input.But i have a requirement where i have to display only 5 days from a specific date in my jquery datepicker excluding weekends.Could you please assist as i am new to jquery?
Regards,
Miru
I have fetched the 5 days from dat_eta in to an array in a hidden variable.Now i need to know how to enable only these days in the datepicker.
Please find the code below.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="JAVASCRIPT_CALENDAR_TESTING.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="../Content/themes/jquery-ui.css" rel="stylesheet" />
<script src="../Scripts/jquery-1.8.2.js"></script>
<script src="../Scripts/jquery-ui-1.8.24.js"></script>
<script>
$(function() {
$("#datepicker").datepicker();
});
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>Request date:</td>
<td><input type="text" id="datepicker" /></td>
<%
int scm_date;
scm_date = (9 / 24 + 1);
DateTime dat_eta = DateTime.Now;
string result;
dat_eta = dat_eta.AddDays(scm_date);
result = dat_eta.ToString("MM:dd:yyyy");
string[] array = new string[6];
for (int i = 0; i <= 5; i++) {
if (i == 0) {} else {
dat_eta = dat_eta.AddDays(1);
}
result = dat_eta.ToString("MM:dd:yyyy");
array[i] = result;
}
hiddenvalue.Value = string.Join(",", array);
%>
<td><input type="hidden" id="hiddenvalue" name="hiddenvalue" runat="server" /></td>
</tr>
</table>
<script type="text/javascript">
</script>
</div>
</form>
</body>
</html>
You can use the beforeShowDay option.
/*
* let's assume your array is like the following one
*/
var datValues = ['03:11:2018','03:12:2018','03:13:2018'];
$("#datepicker").datepicker({
beforeShowDay: function(date) {
return [datValues.indexOf($.datepicker.formatDate('mm:dd:yy', date)) > -1];
}
});
<link href="https://code.jquery.com/ui/1.8.24/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.24/jquery-ui.js"></script>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>Request date:</td>
<td><input type="text" id="datepicker"/></td>
<td><input type="hidden" id="hiddenvalue" name="hiddenvalue" runat="server"/></td>
</tr>
</table>
</div>
</form>
I want to run jquery code when i click on a button.
This is my jquery code:
<script src="scripts/jquery-1.4.1.js"></script>
<script type ="text/javascript" >
$(document).ready(function () {
$('#searchtextbtn').click(function () {
alert("Hello");
});
});
</script>
And my html looks like:
<body>
<div id="content_inner">
<div class ="page_header">
<h2>Location Master</h2>
<div id="search">
<table width="100%">
<tr>
<td align="left">
<font color="#AFBECF">#Html.Label("Search")</font>
</td>
<td>
<input id="searchtextbtn" type="submit" value="search">
<input id="searchtextbtn" type="button" value="search"> #*not woring*#
</td>
</tr>
</table>
</div></div></div>
But here when i click on the button nothing happens.
This is the page once I run my project:
When I click on the "Location Master" link, partial view will be displayed like this:
which contain search button.
Add the following CDN to your code
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
I am using ASP.NET MVC with knockout to build a calendar with events that when a user clicks on the event, an Ajax request is sent with the event data to a c# function.
I am having a tough time getting the error div to show up if the user is not logged in prior to clicking the add href, as well as the add href to call the proper function.
The parameters in the AddEvent are being populated from the ASP.NET View
Here is my HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="/Hudl/Content/styles.css" />
<link rel="stylesheet" href="/Hudl/Scripts/jquery-ui-1.11.0/jquery-ui.css" />
<script src="/Hudl/Scripts/knockout-3.1.0.js"></script>
<script src="/Hudl/Scripts/jquery.min.js"></script>
<script src="/Hudl/Scripts/jquery-ui-1.11.0/jquery-ui.js"></script>
<script src="/Hudl/Scripts/Google/Google.js"></script>
<meta name="viewport" content="width=device-width" />
<title>Concert</title>
</head>
<body>
<div><img src="/Hudl/Content/Images/curtains_closing.jpg" width="100%" height="200em"></div>
<div class="title">
7 2014
<span id="signinButton">
<span class="g-signin"
data-callback="signinCallback"
data-clientid="1071645370589-acdsg7rjbsk7dn5lecfbk83k9uh8fnaa.apps.googleusercontent.com"
data-cookiepolicy="single_host_origin"
data-requestvisibleactions="http://schema.org/AddAction"
data-scope="https://www.googleapis.com/auth/plus.login">
</span>
</span>
</div>
<div data-bind="visible: displayError" id="error" title="Must Login">
<p>You must login to Google+ before you can add a concert to your calendar.</p>
</div>
<table border="1">
<tr><th>Sun</th> <th>Mon</th> <th>Tue</th> <th>Wed</th> <th>Thu</th> <th>Fri</th> <th>Sat</th></tr>
<tr>
<td><span class="date"> </span></td>
<td><span class="date"> </span></td>
<td><div class="date">1</div></td>
<td><div class="date">2</div></td>
<td><div class="date">3</div></td>
<td><div class="date">4</div></td>
<td><div class="date">5</div></td>
</tr>
<tr>
<td><div class="date">6</div></td>
<td><div class="date">7</div></td>
<td><div class="date">8</div></td>
<td><div class="date">9</div></td>
<td><div class="date">10</div></td>
<td><div class="date">11</div></td>
<td><div class="date">12</div></td>
</tr>
<tr>
<td><div class="date">13</div></td>
<td><div class="date">14
<div>
18:30
Paul McCartney
</div>
</div>
</td>
<td><div class="date">15</div></td>
<td><div class="date">16</div></td>
<td><div class="date">17</div></td>
<td><div class="date">18
<div>
13:30
Midwest Cup Show Choir Invitational
</div>
</div>
</td>
<td><div class="date">19
<div>
20:00
Marc-Andre Hamelin
</div>
</div>
</td>
</tr>
<tr>
<td><div class="date">20</div></td>
<td><div class="date">21</div></td>
<td><div class="date">22
<div>
17:00
Edison
</div>
<div>
18:00
Tracy Byrd
</div>
</div>
</td>
<td><div class="date">23</div></td>
<td><div class="date">24
<div>
18:45
Imagine Dragon
</div>
<div>
20:00
Blue Man Group
</div>
</div>
</td>
<td><div class="date">25</div></td>
<td><div class="date">26</div></td>
</tr>
<tr>
<td><div class="date">27</div></td>
<td><div class="date">28</div></td>
<td><div class="date">29</div></td>
<td><div class="date">30
<div>18:30
Powerman 5000
</div>
</div>
</td>
<td>
<div class="date">31</div>
</td>
<td><span class="date"> </span></td>
<td><span class="date"> </span></td>
</tr>
</table>
<script type="text/javascript">
(function () {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/client:plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
function signinCallback(authResult) {
this.authResult = authResult;
if (authResult['status']['signed_in']) {
document.getElementById('signinButton').setAttribute('style', 'display: none');
} else {
console.log('Sign-in state: ' + authResult['error']);
}
};
</script>
<script>
$(function () {
$("#error").dialog();
});
</script>
</body>
</html>
and my js
function ViewModel() {
var self = this;
self.displayError = ko.observable(false);
self.addEvent = function(id, artist, description, date, startTime, endTime) {
if (!authResult['status']['signed_in']) {
self.displayError = true;
self.errorMessage = 'You are not logged-in to your google account.';
} else {
XMLHttpRequest.open("Get", "https://www.googleapis.com/calendar/v3/users/me/calendarList", true);
//make google api call to get list of calendars based on authResult value in callback function
//if api call to get calendars is successful, use authResult, concert, and calendarID to insert event into to make a new google api call to insert event
}
};
};
ko.applyBindings(new ViewModel());
right now i am receiving "Uncaught TypeError: undefined is not a function" everywhere that a javascript function is being called.
I went ahead and created a fiddle for this at http://jsfiddle.net/RKD9J/.
Key change was to use a knockout data binding handler for the click event to add a concert.
18:30Powerman 5000
Changes to
<a href="#" data-bind="click: function(data, event) { addEvent('1', 'Powerman 5000', 'Heavy Metal Awesomeness!', '07/30/2014', '18:30', '23:30:00') }" >18:30</a> Powerman 5000
Following the instructions for passing arguments to functions found here http://knockoutjs.com/documentation/click-binding.html
Your javascript:AddEvent statement is assuming that there is an AddEvent declared at the top (window) level, not on your view model.
I am using jquery ui tabs and tooltip and it works perfectly.Heres the code for jquery-ui tabs
$(function() {
$( "#tabs" ).tabs();
$(document).tooltip();
});
I wrote another function which i want to call from code behind on button click event
function setDiv(type){
alert(type);
}
Heres my codebehind function.
protected void btnNext_Click(object sender, EventArgs e)
{
pnlResult.Visible=True;
ScriptManager.RegisterClientScriptBlock(Page, typeof(Page), "script type='text/javascript' language='javascript'",
"setDiv('highlight')();", true);
}
The problem is when i click the btnNext button ,alert saying highlight is showing.After that i am getting the object expected error on the aspx page and the error points on
<div id="tabs-1">(div used for creating tabs)
Here's my aspx page
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">//Here's where i am getting the error
<p>
<asp:Panel ID="pnlResult" runat="server" Visible="false">
<div id="divResult" runat="server">
<span id="spIcon" style="float:left;margin-left:3px;"></span>
Successfully inserted
</div>
</asp:Panel>
<table style="width:50%" id="tbl" runat="server" >
<tr>
<td>
Your Name:
</td>
<td>
<input id="name" title="Enter your name here" />
</td>
</tr>
<tr>
<td >
<span class="ui-icon ui-icon-alert" style="float:left;margin-left:3px;"></span>
<input type="button" id="btnSubmit" value="Submit" />
</td>
</tr>
</table>
</p>
</div>
<div id="tabs-2">
<p>Tab2.</p>
</div>
<div id="tabs-3">
<p>Tab3.</p>
<p>Tab is placed.</p>
</div>
</div>
Your script that you are building in your code behind is malformed, try this:
ScriptManager.RegisterClientScriptBlock(
Page,
typeof(Page),
"setDiv",
"<script type='text/javascript'>setDiv('highlight');</script>",
false);