This is webform1 code.I want to change the class of button after button click
i call the javascript function on button click...
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="valid_try2.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="JavaScript1.js"></script>
<link rel="stylesheet" href="StyleSheet1.css"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<button id="btn" class="xx" name="btn" onclick="abc()">Button</button>
</div>
</form>
</body>
</html>
This is stylesheet file where i create class
.xx {
border: 5px solid green;
}
.yy {
border: 5px solid red;
}
This is javascript file
function abc() {
$("#btn").removeClass("xx");
$("#btn").addClass("yy");
}
Your button will trigger a form post (PostBack), so all the things you do with abc() will be lost.
But since your tag is asp.net you can do this:
<asp:Button ID="Button1" runat="server" Text="Button" CssClass="xx" OnClick="Button1_Click" />
And then in code behind:
protected void Button1_Click(object sender, EventArgs e)
{
//change the class and do other stuff after the button click
Button1.CssClass = "yy";
}
If you mislabeled your question and you want a pure javascipt/css solution, add type="button" to the button and no form post will be performed.
Please Try below code snipped hope it will help.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#p1").toggleClass('classB');
});
});
</script>
<style>
.classA{color:red;}
.classB{color:yellow;}
</style>
</head>
<body>
<h2 class="">Click the button to change the class</h2>
<p id="p1" class="classA">I will be changed when you pressed click me</p>
<button>Click me </button>
</body>
</html>
Everything looks OK. Just add JQuery reference to aspx file.
Before add the following line.
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
I think you need something like this
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<script src="../js/jquery.js" type="text/javascript"></script>
<title></title>
<style>
.xx {
border: 5px solid green;
}
.yy {
border: 5px solid red;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<button id="btn" class="xx" name="btn">Button</button>
</div>
</form>
<script>
$(function() {
$('#btn').click(function(e) {
e.preventDefault();
var a = $(this).attr('class');
console.log(a);
if (a === 'xx') {
$(this).removeAttr('class');
$(this).addClass("yy");
} else {
$(this).removeAttr('class');
$(this).addClass("xx");
}
});
})
</script>
</body>
</html>
Related
I'am beginner in ASP.net. I recently created some Web Form Application with following code:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="MainForm.aspx.cs" Inherits="TestAssignVariable.MainForm" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="CHECK" OnClick="Check_Data" />
<asp:Label ID="ketCekData" runat="server" Text="Label"></asp:Label>
</div>
<div>
<asp:Button ID="Button2" runat="server" Text="ASSIGN" OnClick="Assign_Data" />
<asp:Label ID="labelProcess" runat="server" Text="Label"></asp:Label>
</div>
</form>
</body>
</html>
And code behind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace TestAssignVariable
{
public partial class MainForm : System.Web.UI.Page
{
private string file_path = "startx";
int a = 12;
private string FilePath
{
get
{
return file_path;
}
set
{
file_path = value;
}
}
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Check_Data(object sender, EventArgs e)
{
ketCekData.Text = a.ToString() ;
}
protected void Assign_Data(object sender, EventArgs e)
{
// FilePath = "AWESOME";
a = 100;
labelProcess.Text = "Data Assigned";
}
}
}
So there is two button with ID Button1 and Button2. When Button2 was clicked, then it's firing an event to change the value of variable a from 12 to 100. Button1 then displaying the value of variable a on label ketChekData. So when I click Button2 followed Button1 there must be 100 displayed in label ketCekData. But I dont understand why this is not worked: there still 12 displayed on label ketCekData.
The Value of a is declared outside the page_load .So on Every Postback value is Resetting. So create a hidden Field in Aspx
In Aspx
<asp:HiddenField ID="hdna" value="12" runat="server" />
In Cs
Remove int a=12;
protected void Check_Data(object sender, EventArgs e)
{
ketCekData.Text = hdna.value ;
}
Take a look at my dotnetfiddle here : https://dotnetfiddle.net/L8lUSY
Html
#model HelloWorldMvcApp.ViewModelExample
#{
Layout = null;
}
<!DOCTYPE html>
<!-- template from http://getbootstrap.com/getting-started -->
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- CSS Includes -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style type="text/css">
.field-validation-error {
color: #ff0000;
}
</style>
</head>
<body>
<div class="container">
<div class="col-md-6 col-md-offset-3">
<h1>Create item</h1>
<div class="form-group parentId">
#Html.LabelFor(m => m.ParentId)
#Html.TextBoxFor(m => m.ParentId)
</div>
<button class="button1">Button 1</button>
<button class="button2">Button 2</button>
</div>
</div>
<!-- JS includes -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script>
<script type="text/javascript">
$(function(){
$('.parentId').hide();
$('.button1').on('click', function()
{
$('.parentId').toggle();
});
$('.button2').on('click', function()
{
$('#ParentId').val('100');
});
});
</script>
</body>
</html>
It may just be easier for you to use javascript / jQuery to change the value
i want to use Ext.net control in aspnet mvc 3 but i can not do that. Can you help me?
<h2>List</h2>
<div>
<% Ext.Net.TabPanel tb = new TabPanel() { ID="tb1", Height = 300 };
tb.Items.Add(new Ext.Net.Panel() { ID = "1", Title = "Test" });
%>
</div>
But no result return to me if i look page source result:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/WebResource.axd?d=yZr1qXAiAzbIyuMwWFg4QLahCw7ja-r5MvwrWaYGNYBiSLompC1t3Dre6yVT_nX3dE_5QRW8Pq_M_mf3ckpaRofaHZG9JTWR4XNA3Qlk1l0lrRtAk7_XdSqezLOHVVzNAnFsM_Xvd-_Jkz3oAxnZR52Pj2Gx6OQ6XgRMpjV7wg41&t=634661604900000000" />
<title>
List
</title>
<style type="text/css">
html
{
background-color:Gray;
}
.column
{
float:left;
width:75%;
border:solid 1px black;
margin-right:10px;
padding:5px;
background-color:white;
min-height:750px;
}
</style>
<script type="text/javascript" src="/WebResource.axd?d=EEB3ci-aaYX0YFB1eKO9bNJxz21l7U6Xgp6gafhX-ELA3dqrXi0vJChPyMcsY02FqNHlDFzFUXhC1Wr20e23KQDHybExiJcMtk25sY6H14MJWhlFGE-pP5O0yfnfTY5rqctCxUyaF0PEA-FTaqBmsMnVHTwakoGf9vavE-17ugQ1&t=634661604900000000"></script>
<script type="text/javascript" src="/WebResource.axd?d=MC7em5dhNLnBAdrW93hZYkG4dXWQcASL6iXw2IQb1NzxHMGA11tPZfow93hy4T_4dZqotlxW-YF95RJptzY352oINWGWb6cJr4JvBvRDC0amtlBU65lPTxvQeag4qmgoBXQ3Y-KW6mtrxsiGMKkIRQ2&t=634661604900000000"></script>
<script type="text/javascript" src="/WebResource.axd?d=hG2uE2_g7tabtfNStz4lSLSwuXYXbXisubF7Fk7ezPJp9TZl2fyBJu3H-wYG-DS9JithBK3TA4ThRCkhX53y2HlV02jYOaX-dL8EVSpL2hvpa6PYag6EVudAnf_JzCoPcMqKXc2dJ0PFK5qP7XXZeQ2&t=634661604900000000"></script>
<script type="text/javascript">
//<![CDATA[
Ext.net.ResourceMgr.init({id:"ctl00$ResourceManager1",BLANK_IMAGE_URL:"/WebResource.axd?d=SanxrxztuPyOAwG7dcFi5HvB6yOoIwnKJN3sevUiXssgue_dNhgx0KWC2p7tE4ygV4N6_n3aqstZCgfhUs4nL5nCZggPLeFdFhYYgXln5EK0OaMOfRO77y22sclo4saMp9irYOG5hNb8NvsMMkgeqm9TCwonBfPgYchN-BVRq4c1&t=634661604900000000",theme:"blue"});Ext.onReady(function(){Ext.QuickTips.init();});
//]]>
</script>
</head>
<body>
<div class="column">
<h1>Job Schedule </h1>
<h2>List</h2>
<div>
</div>
</div>
</body>
</html>
The code you have posted is WebForm syntax.
If you are using ASP.NET MVC Razor and the latest Ext.NET v2.x release, you can render all/any of the Ext.NET Components using Razor syntax.
The following sample demonstrates rendering a very simple TabPanel.
Example
#{
Layout = "";
}
<!DOCTYPE html>
<html>
<head>
<title>Ext.NET Examples</title>
</head>
<body>
#Html.X().ResourceManager()
#(Html.X().TabPanel()
.Height(300)
.Items(items => {
items.Add(Html.X().Panel().Title("Test"));
}));
</body>
</html>
Hope this helps.
Page.Controls is present only in web forms. I suspect that your control is for web forms, therefore it won't work with MVC.
Hi everyone I am a new to jQuery. While learning I am following this link:
http://api.jquery.com/browser/. When I am trying to do this example in VS 2010 I'm not getting the exact output. But when I was copying the code which is in this link I was getting the correct output. Please could any one help me?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="http://docs.jquery.com" />
<title>index(subject) function</title>
<style type="text/css">
.div_style
{
background-color: Aqua;
font-family: Verdana;
font-size: small;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.js" />
<script type="text/javascript">
$(document).ready(function () {
$("div.div_style").click(function () {
//This is the DOM element clicked
var index = $("div").index(this);
$("span").text("That was div index #" + index);
});
});
</script>
</head>
<body>
<span></span>
<br />
<div class="div_style ">
First Div
</div>
<br />
<div class="div_style ">
Second Div
</div>
<br />
<div class="div_style ">
Third Div
</div>
<br />
</body>
</html>
You can't use self closing tags for <script>. You must end with a </script>:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.js"></script>
Greetings,
I'm trying to select item from asp.net list box then assign it to a text box so when a click on an item from the list box should appear in the text box.
I tried the code listed down but it did not work.
please advice how to do this!!
............................
updated code
..........................
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="IMAM_APPLICATION.WebForm3" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<script src="js/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#<%=ListBox.ClientID %>").change(function() {
$("#<%=text.ClientID %>").val($(this).val());
});
});
</script>
<asp:ListBox ID="ListBox" runat="server">
<asp:ListItem Value="one">1</asp:ListItem>
<asp:ListItem Value="two">2</asp:ListItem>
</asp:ListBox>
<asp:TextBox ID="text" runat="server"
style = "position:absolute; top: 267px; left: 45px;"></asp:TextBox>
</div>
</form>
</body>
</html>
You can do it like this:
$(function() {
$("#<%=ListBox.ClientID %>").change(function() {
$("#<%=text.ClientID %>").val($(this).val());
});
});
Replace your $(document).ready(function() { }) with the above code, and when you change the dropdown, the value will go in the text input, e.g. one, or two.
I tried with the following but it doesn't work
var txtlat=document.getElementById('TextBox1').value=GMap1.getCenter().lat();
var txtlong=document.getElementById('TextBox2').value=GMap1.getCenter().lng();
It gives a JavaScript error as "Object doesn't support this property or method".
How can i do this????
I really need help...
Thank you!
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication5._Default" %>
<%# Register assembly="GMaps" namespace="Subgurim.Controles" tagprefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<cc1:GMap ID="GMap1" runat="server"
Key="ABQIAAAAs98ZVKM_IHFkRP_EavW_DhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQGoS16N7wYnBPhgtjTxMaUVN58kA" />
<br />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<br />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</div>
<script type="text/javascript">
var txtlat=document.getElementById('TextBox1').value=GMap1.getCenter().lat();
var txtlong=document.getElementById('TextBox2').value=GMap1.getCenter().lng();
</script>
</form>
</body>
</html>
2nd UPDATE: Further to the updated question, you also have another problem with the server-side textbox controls. They cannot be referenced from JavaScript using document.getElementById() as you are doing.
You may either use normal HTML controls: <input type="text" id="textbox1" /> or else you would have to use something like document.getElementById('<%= TextBox1.ClientID %>') to reference the textbox from JavaScript.
1st UPDATE: Further to the comments, the examples below have been updated to return the lat/lng of where the mouse is clicked.
You may want to check out the following examples, which have been tested to work correctly:
Using the v3 API:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps getCenter()</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px;"></div>
<input type="text" id="textbox1" />
<input type="text" id="textbox2" />
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: new google.maps.LatLng(35.55, -25.75),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
google.maps.event.addListener(map, 'click', function(event) {
if (event.latLng) {
document.getElementById('textbox1').value = event.latLng.lat();
document.getElementById('textbox2').value = event.latLng.lng();
}
});
</script>
</body>
</html>
Using the v2 API:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps getCenter()</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false"
type="text/javascript"></script>
</head>
<body onunload="GUnload()">
<div id="map" style="width: 500px; height: 400px;"></div>
<input type="text" id="textbox1" />
<input type="text" id="textbox2" />
<script type="text/javascript">
var map = new GMap2(document.getElementById("map"));
var centerPoint = new GLatLng(35.55, -25.75);
map.setCenter(centerPoint, 2);
GEvent.addListener(map,"click", function(overlay, latlng) {
if (latlng) {
document.getElementById('textbox1').value = latlng.lat();
document.getElementById('textbox2').value = latlng.lng();
}
});
</script>
</body>
</html>
Screenshot from the above examples:
Did you confirm the value returned from getCenter is not null? It should be a LatLng object, but maybe it's returning null... are you sure the center has been set yet? Also, what object type is GMap1? How do you create that object?
I found the answer forgot to mention here so the answer was very simple
Msg1 and Msg2 are DIV tags
protected string Gmap1_Click(object s, Subgurim.Controles.GAjaxServerEventArgs e)
{
return "document.getElementById('Msg1').innerHTML="
+ e.point.lat.ToString() + ";" + "document.getElementById('Msg2').innerHTML="
+ e.point.lng.ToString();
}