The following .NET 4.0 code functions perfectly in IE9, Chrome 20 and Opera 12 but fails miserably in Firefox 13. All the browsers are default installs without plugins.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TreeView ID="Treeview1" Runat="server"
onclick="javascript:postBackByObject()"
ontreenodecheckchanged="Treeview1_TreeNodeCheckChanged"
ShowCheckBoxes="All" >
<Nodes>
<asp:TreeNode Value="Child1" Expanded="True" Text="1">
<asp:TreeNode Value="Grandchild1" Text="A" />
<asp:TreeNode Value="Grandchild2" Text="B" />
</asp:TreeNode>
<asp:TreeNode Value="Child2" Text="2" />
<asp:TreeNode Value="Child3" Expanded="True" Text="3">
<asp:TreeNode Value="Grandchild1" Text="A" />
</asp:TreeNode>
</Nodes>
</asp:TreeView>
<asp:TextBox ID="TextBox1" runat="server" Height="156px" TextMode="MultiLine"
Width="295px"></asp:TextBox>
</div>
</form>
</body>
<script language="javascript" type="text/javascript">
function postBackByObject() {
var o = window.event.srcElement;
if (o.tagName == "INPUT" && o.type == "checkbox") {
__doPostBack("", "");
}
}
</script>
</html>
I am trying to catch the TreeNode checkbox events with the following code behind:
protected void Treeview1_TreeNodeCheckChanged(object sender, TreeNodeEventArgs e)
{
TextBox1.Text += e.Node.Text;
}
This is quite annoying - any solution is welcome!
try handling the event more generically, so it works in both FF and other browsers.
e.g.
onclick="javascript:postBackByObject(event)"
function postBackByObject(e) {
var evt = e || window.event;
var o = evt.target || evt.srcElement;
if (o.tagName == "INPUT" && o.type == "checkbox") {
__doPostBack("", "");
}
}
edit i forgot to add a line for target / srcElement
Related
I'm sorry in advance if this seems to be a beginners question and wasted some of your time, but it does really bother me and I would really appreciate it if someone could help.
I'm simply creating a "zone" if you will, where the user inputs a word/sentence which are tasks, and then can check if the task was completed or not and/or if the word/sentence needs to be changed.
So in the end, what I need is a textbox lets say where the user inputs a specific number supposed x, and generates x times this div.
Here is the code (unfortunately I could not post pics since I do not have enough reputation..)
ASP.NET code
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="GMode.tiz.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>whatevz</title>
<link href="StyleSheet1.css" rel="stylesheet" />
<script src="../jquery-1.11.3.min.js"></script>
<script src="../functions.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="singleContainer">
<div class="lblPlace">
<asp:Label ID="lbl" runat="server" Text="Input Task"></asp:Label>
<asp:TextBox ID="hi" CssClass="txtBox" runat="server"></asp:TextBox>
</div>
<asp:Button ID="save" runat="server" CssClass="UniversalBtn" OnClick="btnCheck_Click" />
<asp:Button ID="cancel" runat="server" CssClass="UniversalBtn" OnClick="btnCancel_Click" />
<asp:Button ID="edit" runat="server" CssClass="UniversalBtn" />
<asp:Button ID="submit" runat="server" CssClass="BtnSubmit" OnClick="btnSubmit_Click" Text="DONE"/>
</div>
</form>
</body>
</html>
C# code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace GMode.tiz
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnCheck_Click(object sender, EventArgs e)
{
lbl.CssClass = "done";
}
protected void btnCancel_Click(object sender, EventArgs e)
{
lbl.CssClass = "undone";
}
protected void btnSubmit_Click(object sender, EventArgs e)
{
if (hi.Text == "")
{
lbl.Text = "No Value";
}
else
{
lbl.Text = hi.Text;
}
}
}
}
So basically I want to dynamically create <div class="singleContainer"> with everything inside it x times (x defined by the user).
I'm going about this more on the fact like it's C++. When you can dynamically create an array with a specific number x.
Please tell me if you need more of the code. There are still the css and js files that I did not post.
Thank you,
Jack
I think that for this the best option is to use AngularJS, you can do something like this:
<html>
<head>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.min.js"></script>
<script>
var app = angular.module('app', [])
app.controller('PostsCtrl', function ($scope) {
$scope.change = function (){
$scope.listDivs = [];
for(var i=0;i<$scope.createDiv;i++) {
$scope.listDivs.push(i);
}
}
})
</script>
</head>
<body ng-app='app'>
<div ng-controller='PostsCtrl' class='container'>
<input ng-model='createDiv' ng-change="change()"/>
<ul class='list-group'>
<li ng-repeat="post in listDivs" class='list-group-item'>
<div class="singleContainer">
<div class="lblPlace">
<asp:Label ID="lbl" runat="server" Text="Input Task"> </asp:Label>
<asp:TextBox ID="hi" CssClass="txtBox" runat="server"> </asp:TextBox>
</div>
<asp:Button ID="save" runat="server" CssClass="UniversalBtn" OnClick="btnCheck_Click" />
<asp:Button ID="cancel" runat="server" CssClass="UniversalBtn" OnClick="btnCancel_Click" />
<asp:Button ID="edit" runat="server" CssClass="UniversalBtn" />
<asp:Button ID="submit" runat="server" CssClass="BtnSubmit" OnClick="btnSubmit_Click" Text="DONE"/>
</div>
</li>
</ul>
</div>
</body>
</html>
Put your div into a usercontrol (ascx file).
In your main page add a placeholder:
<asp:PlaceHolder runat="server" ID="PlaceHolder1" />
in code behind you can add your control as often as you want:
yourControl= LoadControl("~/Controls/yourControl.ascx");
PlaceHolder1.Controls.Add(yourControl);
I am making a signin form for a webpage. I have created a multidimensional array with acceptable username/password combinations. I would like to allow the user to move on to the next page only if their username/password combination is found in the array. If they enter a combination that is not found in the array, I want an error to raise and keep them from proceeding to the next page.
I understand that this is not the most effective way to complete this command, but I am learning how to properly use Arrays as part of the foundation to my programming knowledge. I'll paste my code below. I've tried various way to get the page to do what I want, but I can't seem to get it. I get this error: "System.IndexOutOfRangeException: Index was outside the bounds of the array." Here is my code:
<%# Page Language="C#" %>
<!DOCTYPE html>
<script runat="server">
string[,] UserPass = new string[,] {{"user1","pwd1"}, {"user2", "pwd2"}, {"user3","pwd3"}};
void Page_Load(object sender, EventArgs e)
{
}
void btnSignin_Click(object sender, EventArgs e)
{
if(txtSignin.Text == UserPass[1,0] && txtPWD.Text == UserPass[0,1])
{
Response.Redirect("welcome.aspx");
}
else if (txtSignin.Text == UserPass[2, 0] && txtPWD.Text == UserPass[0, 2])
{
Response.Redirect("welcome.aspx");
}
else if (txtSignin.Text == UserPass[3, 0] && txtPWD.Text == UserPass[0, 3])
{
Response.Redirect("welcome.aspx");
}
else
{
Response.Write("Please try again.");
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<p>Sign in with Account</p>
<asp:Panel ID="Pnl1" runat="server">
<br />
<asp:Textbox ID="txtSignin" runat="server" Text="Username" style="width:190px" /><br />
<asp:TextBox ID="txtPWD" runat="server" Text="Password" TextMode="Password" style="width:190px" /><br />
<asp:LinkButton ID="btnSignin" runat="server" Text="Sign in" class="myBtn" OnClick="btnSignin_Click"/><br />
<asp:CheckBox ID="chkRemember" runat="server" Text="Stay signed in" />
</asp:Panel>
<asp:Label ID="lblSignin" runat="server" />
</div>
</form>
</body>
</html>
(also, on a smaller note, is it possible to have the signin/password boxes display text that disappears when the users clicks the textbox?)
Thank you for any help!
There are different options. One is using arrays with a for loop and another is using Linq. I will show you how to do it with arrays.
string[,] UserPass = new string[,] {{"user1","pwd1"}, {"user2.edu", "pwd2"}, {"user3","pwd3"}};
...
bool isFound = false;
for (int i=0; i< UserPass.GetLength(0); i++)
{
//search users row by row
if (UserPass[i, 0] == yourSearchUserid && UserPass[i, 1] == yourSearchPassword)
{
isFound = true;
break;
}
}
//isFound holds the search result.
I have displayed images in a grid view. But I don't understand how to display YouTube video in a grid-view?
Add a template column with literal control in it.
on itemdatabound fill the literal with the embed code of the YouTube video
Example:
((Literal)e.Item.FindControl("litvideo")).Text = "<iframe width=\"560\" height=\"315\" src=\"http://www.youtube.com/embed/r6BHyv6nkAs\" frameborder=\"0\" allowfullscreen></iframe>";
<asp:TemplateField ControlStyle-CssClass="Row" HeaderText="YouTube Video">
<ItemTemplate>
<asp:Label ID="lblYTVideoURL" runat="server" Text=<%# Eval("YTVideoUrl") %>></asp:Label>
</ItemTemplate>
<ControlStyle CssClass="Row"></ControlStyle>
</asp:TemplateField>
Then from the code behind:
protected void grvYoutubeVideo_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
Label lbl = (Label)e.Row.Cells[0].Controls[1];
if (lbl.Text != "")
{
//string YTVideoURL = lbl.Text; //"http://www.youtube.com/v/AyPzM5WK8ys";
//string OBJYTVideo = "<object width=\"150\" height=\"150\">";
//OBJYTVideo += "<param name=\"movie\" value=\"" + YTVideoURL + "\"></param>";
//OBJYTVideo += "<param name=\"allowscriptaccess\" value=\"always\"></param>";
//OBJYTVideo += "<embed src=\"" + YTVideoURL + "\" type=\"application/x-shockwave-flash\"";
//OBJYTVideo += "allowscriptaccess=\"always\" width=\"100%\" height=\"100%\"></embed></object>";
//lbl.Text = OBJYTVideo;
}
}
}
try some thing like this, you can put all this in .html and open. After you will easy add this to asp.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<object width="425" height="355">
<param name="movie" value="http://www.youtube.com/v/sSe_RmPlOLM" />
<param name="wmode" value="transparent" />
<embed src="http://www.youtube.com/v/sSe_RmPlOLM" type="application/x- shockwave-flash"
wmode="transparent" width="425" height="355" />
</object>
</div>
</form>
</body>
</html>
<asp:TemplateField HeaderText="Video">
<ItemTemplate>
<iframe id="video" width="420" height="250" frameborder="0" allowfullscreen src='<%# "http://www.youtube.com/embed/" + Eval("VideoURL").ToString().Split(new string[] { "v=" }, StringSplitOptions.None)[1] %>' frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</ItemTemplate>
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
For those who worked with bootstrap, knows it does not support input type = file, so I hide the asp:fileupload using jQuery (after document ready), and have and for the solution (as you can see from the code
<script type="text/javascript">
$(document).ready(function ()
{
$('#columnSelect').change(function ()
{
getImportColumnOrder();
});
// change file upload style similiar to bootstrap style
//$('#uploader').hide();
$('#uploader').change(function ()
{
var val = $(this).val();
var file = val.split(/[\\/]/);
$('#file').val(file[file.length - 1]);
});
});
function getImportColumnOrder()
{
var order = '';
$('#selectOrer').val('');
$('select', $('#MappingTable')).each(function ()
{
order += $(this).prop('selectedIndex') + ',';
});
$('#selectOrder').val(order.substr(0, order.length - 1));
}
</script>
<div class="span12">
<asp:DropDownList ID="ddl_DBTableList" runat="server" CssClass="combobox" Style="display: inline">
<asp:ListItem></asp:ListItem>
<asp:ListItem Value="Import_Test">Import_Test</asp:ListItem>
</asp:DropDownList>
<asp:FileUpload ID="uploader" runat="server" CssClass="btn" />
<div class="input-append" style="display: inline;">
<input id="file" class="input-medium" type="text" />
<a class="btn" onclick="$('input[id=uploader]').click();">Select File</a>
</div>
<p />
<div>
<asp:Button ID="btn_uplaod" runat="server" OnClick="doUpload" Text="Upload" CssClass="btn" />
</div>
<p />
<asp:Label ID="result" runat="server" ForeColor="Red"></asp:Label>
<p />
<asp:Label ID="data" runat="server" BackColor="#CCCCCC"></asp:Label>
<p />
<asp:Button ID="btn_import" runat="server" Text="Next" OnClick="doImport" OnClientClick="getImportColumnOrder();return true;" Visible="false" CssClass="btn btn-success" />
</div>
Steps are click on the "Select File", a file chooser popped up for file selection. After double clicked a file, the file location gets displayed in , and also the asp fileupload control.
In Chrome and FF, when I clicked btn_uplaod (button), it runs as supposed. In IE, it will clear the fileupload's content and does nothing (a client side action) and will not do any postback.
If this is a program problem, then maybe Chrome and FF will not run correctly. I'm suspecting is there anything that I need to add to make IE run as suppose to?
image after click upload (IE), (Browse link is cleared)
image after click upload (Chrome), (Run as supposed to)
thanks!
I've made a simple version for those of you who wants to try on Visual studio:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="postback_problem.aspx.cs" Inherits="postback_problem" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> </head> <body> <form id="form1" runat="server"> <div> <asp:FileUpload ID="uploader" runat="server" CssClass="btn" /> <div> <input id="file" class="input-medium" type="text" /> <a onclick="$('input[id=uploader]').click();">Select File</a> </div> <p /> <div> <asp:Button ID="btn_uplaod" runat="server" OnClick="doUpload" Text="Upload" CssClass="btn" /> </div> <asp:Label ID="result" runat="server"></asp:Label> </div> </form> </body> </html>
and
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class postback_problem : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void doUpload(object sender, EventArgs e) { result.Text = "no problem!"; } }
I am considering the feasibility of using jQuery UI themes to my ASP.NET website.
I found following issues. How do we correct them?
Internet Explorer (IE 8) --> The gridline is not visible at the bottom
(when there is no multiple pages)
Mozilla --> Gridline is not available for header
Chrome --> Working fine
Is it compatible with asp.net controls?
Can you please direct me to some examples that shows correct use of these jQuery classes with asp.net controls (without side effects)?
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.6/jquery-ui.js"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/themes/sunny/jquery-ui.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
AllowPaging="True" PageSize="4">
<Columns>
<asp:BoundField DataField="ProductName" HeaderText="ProductName" ReadOnly="true"
SortExpression="ProductName" />
<asp:BoundField DataField="QuantityPerUnit" HeaderText="Qty" ReadOnly="true" SortExpression="QuantityPerUnit" />
<asp:BoundField DataField="CategoryName" HeaderText="Category" ReadOnly="true" SortExpression="CategoryName" />
</Columns>
</asp:GridView>
</div>
<br />
</form>
</body>
</html>
--Code Behind
using System;
using System.Web.UI.WebControls;
using System.Data;
public partial class MyGridTest : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[3] { new DataColumn("ProductName"), new DataColumn("QuantityPerUnit"), new DataColumn("CategoryName") });
dt.Rows.Add("Shirt", 200);
dt.Rows.Add("Football", 30);
dt.Rows.Add("Bat", 22.5);
//dt.Rows.Add("Football", 30);
//dt.Rows.Add("Bat", 22.5);
//dt.Rows.Add("Football", 30);
//dt.Rows.Add("Bat", 22.5);
GridView1.DataSource = dt;
GridView1.DataBind();
}
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
GridView1.CssClass = "ui-widget-content";
if (GridView1.Rows.Count > 0)
{
//To render header in accessible format
GridView1.UseAccessibleHeader = true;
//Add the <thead> element
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
GridView1.HeaderRow.CssClass = "ui-widget-header";
//Add the <tfoot> element
GridView1.FooterRow.TableSection = TableRowSection.TableFooter;
if (GridView1.TopPagerRow != null)
{
GridView1.TopPagerRow.TableSection = TableRowSection.TableHeader;
}
if (GridView1.BottomPagerRow != null)
{
GridView1.BottomPagerRow.TableSection = TableRowSection.TableFooter;
}
}
}
}
Just out of interest. What happens on when you add this meta tag.
<meta http-equiv="x-ua-compatible" content="IE=8" />