I need the client to be able to enter values into an asp TextBox that asks amount of hours they spend doing these activities. The numbers they enter run in javascript. I am having a hard time getting those values into javascript. Then have it run on button click. Thanks for any help. This is what I've got so far:
<script runat="server">
void btn_Click(object sender, EventArgs e)
{
double work = double.Parse(TextBox1.Text);
double eat = double.Parse(TextBox2.Text);
double commute = double.Parse(TextBox3.Text);
double tv = double.Parse(TextBox4.Text);
double sleep = double.Parse(TextBox5.Text);
double total = work + eat + commute + tv + sleep;
if (total > 24)
{
lblmsg.Text = code();
}
}
string code()
{
return "Warning: There are only 24 hours in a day!";
}
</script>
Java script:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var work = document.getElementById('<%=TextBox1.ClientID%>').value;
var eat = document.getElementById('<%=TextBox2.ClientID%>').value;
var commute = document.getElementById('<%=TextBox3.ClientID%>').value;
var tv = document.getElementById('<%=TextBox4.ClientID%>').value;
var sleep = document.getElementById('<%=TextBox5.ClientID%>').value;
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', work],
['Eat', eat],
['Commute', commute],
['Watch TV', tv],
['Sleep', sleep]
]);
var options = {
title: 'My Daily Activities',
is3D: true,
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
}
</script>
Text Boxes and Button:
Work:<asp:TextBox ID="TextBox1" runat="server" Text="11"/><asp:Label ID="lblmsg" runat="server" color="red" BackColor="red" Font-Size="XX-Large"/><br />
Eat:<asp:TextBox ID="TextBox2" runat="server" text="2"/><br />
Commute:<asp:TextBox ID="TextBox3" runat="server" text="2"/><br />
Watch TV:<asp:TextBox ID="TextBox4" runat="server" text="2"/><br />
Sleep:<asp:TextBox ID="TextBox5" runat="server" text="7"/><br />
<asp:Button ID="btn" runat="server" Text="COMPUTE TIME" OnClick="btn_Click" />
Thanks for any help!
I think you are mixing apples and oranges here. You do not need ASP.NET or any other server side language to make basic client-side calculations. jQuery alone can do it anyway with simple HTML textboxes. Just learning using jQuery val() and it's enough.
Related
I have 6 dropdowns in a aspx page. I need to populate the dropdown only when its clicked.
Initially I populated all 6 ddl in page load but there was a huge delay in loading the page so I got this option to populate the ddl only when its clicked. I couldn't find the right answer yet, tried with diff sol and query.
And i couldn't find any 'Onclick','Onmousedown','Onkeypress' in ddl.
I even tried one option shared in stackoverflow by an user.
pls find the below code and help to solve the issue.
<td class="style10" >
<asp:DropDownList runat="server" ID="ddlGM" Width="150px" AutoPostBack="True" onclick="javascript:clickHiddenButton();" onselectedindexchanged="ddlGM_SelectedIndexChanged" style="height: 22px" >
<asp:ListItem Value=0 Text="All"></asp:ListItem></asp:DropDownList><div style="display: none;">
<asp:Button ID="btnHidden" runat="server" Text="Button" />
</div></td>
<script type="text/javascript">
function clickHiddenButton() {
var btn = document.getElementById('btnHidden');
var ddl = document.getElementById('ddlGM');
if (ddl.length == 1) {
btn.click();
}
}
</script>
protected void btnHidden_Click(object sender, EventArgs e)
{
DataView dvfilters = (DataView)(Cache["FiltersData"]);
dtt = dvfilters.ToTable();
ddlGM.DataSource = dtt;
ddlGM.DataValueField = "GlobalMarket";
ddlGM.DataBind();
RemoveDuplicateItems(ddlGM);
SortDDL(ref ddlGM);
//ddlGM.Items.Insert(0, "All");
}
You can use .focus function for any element. focus function is called when the particular function get clicked or getting focus by anyway. I am putting sample code for you. You can change this code as your need.
<script>
var bDataLoded = false;
$(document).ready(function () {
var ddVal = '';
$('#ddlGM').focus(function () {
if (!bDataLoded) {
alert("hi");
$('#ddlGM').append('<option value=' + 1 + '> + Test 1 + </option>');
$('#ddlGM').append('<option value=' + 2 + '> + Test 2 + </option>');
$('#ddlGM').append('<option value=' + 3 + '> + Test 3 + </option>');
$('#ddlGM').append('<option value=' + 4 + '> + Test 4 + </option>');
bDataLoded = true;
}
$('#ddlGM').blur();
})
});
</script>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList runat="server" ID="ddlGM" Width="150px" AutoPostBack="True" style="height: 22px" >
</asp:DropDownList>
</div>
</form>
Hope this will solve your problem.
Here's a little thing i want to achieve. I have an asp.net FileUpload and a textbox. When a user clicks the fileUpload and selects a picture from his/her computer/device, i want the image name to be immediately displayed in a textbox before submitting . Here is what i have tried
<asp:FileUpload ID="Upload" runat="server" ClientIDMode="Static" />
<asp:TextBox ID="txtImage" runat="server" ClientIDMode="Static">
$('#Upload').change(function () {
var filename = $(this).val();
var lastIndex = filename.lastIndexOf("\\");
if (lastIndex > 0) {
filename = filename.substring(lastIndex + 1);
}
$('txtImage').val(filename);
});
It still cant get it displayed. wHAT AM I MISING PLEASE
you are missing # in $("txtImage"). This should be like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
console.log("ready!");
$('#Upload').change(function () {
var filename = $(this).val();
var lastIndex = filename.lastIndexOf("\\");
if (lastIndex > 0) {
filename = filename.substring(lastIndex + 1);
}
$('#txtImage').val(filename);
});
});
</script>
<asp:FileUpload ID="Upload" runat="server" ClientIDMode="Static" />
<asp:TextBox ID="txtImage" runat="server" ClientIDMode="Static"></asp:TextBox>
TextBox txtImage does not have a closing tag.
<asp:TextBox ID="txtImage" runat="server" ClientIDMode="Static"/>
I have 2 textboxes turn into jquery datepickers and some folder names like 09-13-2014, 09-14-2014 and 09-15-2014, how can I get all folder names from the selected dates on button click and place it on a treeview? I'm new to this, not yet familliar on the back end coding.
Here's my datepickers:
<script type="text/javascript">
$(function () {
$("[id$=txtDate1]").datepicker({
dateFormat: 'mm-dd-yy',
showOn: 'button',
buttonImageOnly: true,
buttonImage: 'Images/calendar.png'
});
});
</script>
<p>
From: <asp:TextBox ID="txtDate1" runat="server" ReadOnly = "true"></asp:TextBox>
To:<asp:TextBox ID="txtDate2" runat="server" ReadOnly = "true"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Search" />
</p>
I supposed that you datepicker working fine and it showing the calender.
<p>
From:
//you should delete ReadOnly = "true" on textboxes
<asp:TextBox ID="txtDate1" runat="server"></asp:TextBox>
To:<asp:TextBox ID="txtDate2" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Search" OnClick="Button1_Click" />
</p>
<asp:TreeView ID="TreeView1" runat="server">
</asp:TreeView>
on code behinde write this codes. you can go to codebehind by rightclick on your page and then selecting view code.
protected void Button1_Click(object sender, EventArgs e)
{
var start = Convert.ToDateTime(txtDate1.Text);
var end = Convert.ToDateTime(txtDate2.Text);
if (end < start)
return;
var folderNamelst = GetListOfExsistingFolderName(start, end);
AddNodes(folderNamelst);
}
private IEnumerable<string> GetListOfExsistingFolderName(DateTime startDate, DateTime endTime)
{
var mainFolderPath = Server.MapPath("~/Folders");
var folderNamelst = new List<string>();
var day = startDate;
do
{
if (Directory.Exists(mainFolderPath + "\\" + day.ToString("MM-dd-yyyy")))
folderNamelst.Add(day.ToString("MM-dd-yyyy"));
day = day.AddDays(1);
} while (day <= endTime);
return folderNamelst;
}
private void AddNodes(IEnumerable<string> data)
{
TreeView1.Nodes.Clear();
var root = new TreeNode("Folders");
foreach (var d in data)
{
var treechild = new TreeNode(d);
root.ChildNodes.Add(treechild);
}
TreeView1.Nodes.Add(root);
}
Hi Please check i want to get click event in code behind as i am using master page concept and i have one child form of it in this page i have ContentPlaceHolder, My button "btnSubmit" this is a linkbutton which is under GridView. i want loading image when i will click on btnSubmit button. please check and help.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
function ShowProgress() {
setTimeout(function () {
var modal = $('<div />');
modal.addClass("modal");
$('body').append(modal);
var loading = $(".loading");
loading.show();
var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
loading.css({ top: top, left: left });
}, 200);
}
$('form').live("submit", function () {
ShowProgress();
});
aspx page..
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:BoundField DataField="Journal" HeaderText="Customer Id" />
<asp:BoundField DataField="ISBN" HeaderText="Contact Name" />
<asp:BoundField DataField="Status" HeaderText="City" />
<asp:TemplateField HeaderText="Btn">
<ItemTemplate>
<asp:Button ID="btnSubmit" runat="server" Text="Load Customers"
OnClick="btnSubmit_Click" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<div class="loading" align="center">
Downloading Files. Please wait<br />
<br />
<img src="loader.gif" alt="" />
</div>
</asp:Content>
In cs Page.
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
string script = "$(document).ready(function () { $('[id*=btnSubmit]').click(); });";
ClientScript.RegisterStartupScript(this.GetType(), "load", script, true);
}
}
try this way
Script AS
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
function ShowProgress() {
setTimeout(function () {
var modal = $('<div />');
modal.addClass("modal");
$('body').append(modal);
var loading = $(".loading");
loading.show();
var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
loading.css({ top: top, left: left });
}, 200);
}
$('form').live("submit", function () {
ShowProgress();
});
</script>
And Add event onrowdatabound in grid
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
onrowdatabound="GridView1_RowDataBound">
And CS page
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if(e.Row.RowType == DataControlRowType.DataRow)
{
Button btnSubmit = e.Row.FindControl("btnSubmit") as Button;
btnSubmit.Attributes.Add("OnClick", "ShowProgress();");
}
}
Use OnClientClick event of the button also in this event call a javascript function which change the css of the progress bar to visible.
OnClientClick="ShowProgress();return true;"
I have a GridView in ASP.NET/C# with a CheckBoxField, a BoundField and 2 ButtonFields. All 4 of them has a header to make clear where the column stands for. At the Page_Load event I set the ВataЫource of the GridView to my filled DataTable.
I want to make it easier to use for the user, and want to make a checkbox in the header. When that checkbox is checked by the user, all CheckBoxes should be checked in the GridView. I have set the HeaderText of the CheckBoxField to <input type='checkbox' />, and it shows a checkbox in the header now.
Now I want to add a function to that checkbox, that when it's checked, all CheckBoxes will be checked en vice versa. I tried to do it with jQuery, but it didn't work because I can't find a way to give all the CheckBoxes in the GridView the same ID or NAME.
Is there a event that occurs when I check the HTML based checkbox within the header? If yes, which event?
If no, how can i trigger a event when I check that checkbox, and change the GridView from my code-behind.
And if none of that is possible, how can i do it on another way, with javascript, jQuery or maybe with a ASP.net control.
I hope you can help me with this, but please don't expect i'm a code guru. I'm a intern at a company where the need a system, with this functionality.
Update:
Thank you everyone for helping me out. What is the easiest way to get the DataSource back into the DataTable, because i need to know which rows were selected and which were not?
Using jQuery, you get all the check boxes inside the GridView, and then for each one you change the status as you like. You call this javascript function from onclick of a link or a button, or what ever you like.
function CheckAll()
{
var updateButtons = jQuery('#<%=gvGridViewId.ClientID%> input[type=checkbox]');
updateButtons.each( function() {
// use this line to change the status if check to uncheck and vice versa
// or make it as you like with similar function
jQuery(this).attr("checked", !this.checked);
});
}
try this code according to you
in grid view
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="headerchkbox" runat="server" CssClass="chkheader" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="CheckBoxAssign" runat="server" CssClass="chkitems" />
</ItemTemplate>
</asp:TemplateField>
java script
<script type="text/javascript">
$(window).bind('load', function () {
var headerChk = $(".chkheader input");
var itemChk = $(".chkitems input");
headerChk.bind("click", function () { itemChk.each(function () { this.checked = headerChk[0].checked; })
});
itemChk.bind("click", function () { if ($(this).checked == false) headerChk[0].checked = false; });
});
</script>
Here is a sample I have put together for you.
ASPX
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
var allCheckBoxSelector = '#<%=GridView1.ClientID%> input[id*="chkAll"]:checkbox';
var checkBoxSelector = '#<%=GridView1.ClientID%> input[id*="chkSelected"]:checkbox';
function ToggleCheckUncheckAllOptionAsNeeded() {
var totalCheckboxes = $(checkBoxSelector),
checkedCheckboxes = totalCheckboxes.filter(":checked"),
noCheckboxesAreChecked = (checkedCheckboxes.length === 0),
allCheckboxesAreChecked = (totalCheckboxes.length === checkedCheckboxes.length);
$(allCheckBoxSelector).attr('checked', allCheckboxesAreChecked);
}
$(document).ready(function () {
$(allCheckBoxSelector).live('click', function () {
$(checkBoxSelector).attr('checked', $(this).is(':checked'));
ToggleCheckUncheckAllOptionAsNeeded();
});
$(checkBoxSelector).live('click', ToggleCheckUncheckAllOptionAsNeeded);
ToggleCheckUncheckAllOptionAsNeeded();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="chkAll" runat="server" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkSelected" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
List<string> lstObjects = new List<string> { "aaa", "bbb" };
GridView1.DataSource = lstObjects;
GridView1.DataBind();
}
}
If you are using the latest version of jQuery (1.7)
Use the following:
<script type="text/javascript">
var allCheckBoxSelector = '#<%=GridView1.ClientID%> input[id*="chkAll"]:checkbox';
var checkBoxSelector = '#<%=GridView1.ClientID%> input[id*="chkSelected"]:checkbox';
function ToggleCheckUncheckAllOptionAsNeeded() {
var totalCheckboxes = $(checkBoxSelector),
checkedCheckboxes = totalCheckboxes.filter(":checked"),
noCheckboxesAreChecked = (checkedCheckboxes.length === 0),
allCheckboxesAreChecked = (totalCheckboxes.length === checkedCheckboxes.length);
$(allCheckBoxSelector).attr('checked', allCheckboxesAreChecked);
}
$(document).ready(function () {
$(allCheckBoxSelector).click(function () {
$(checkBoxSelector).attr('checked', $(this).is(':checked'));
ToggleCheckUncheckAllOptionAsNeeded();
});
$(checkBoxSelector).click(ToggleCheckUncheckAllOptionAsNeeded);
ToggleCheckUncheckAllOptionAsNeeded();
});
</script>