This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 11 years ago.
Here i have 2 list boxes ,when i click add button then items should be added to second list box in asp.net using jquery.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="ListBoxExample.aspx.cs" Inherits="ListBoxExample" %>
<!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>Adding,removing elements from First Listbox to Second Listbox</title>
<style type="text/css">
.lstbx1
{
font-family: Verdana;
font-size: medium;
font-style: normal;
background-color: Aqua;
height: auto;
width: auto;
}
.lstbx2
{
font-family: Verdana;
font-size: medium;
font-style: normal;
background-color: Lime;
height: auto;
width: auto;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.js" />
<script type="text/javascript">
function Move_Elements() {
$("#lstbx1").appendTo("#lstbx2");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>
<asp:ListBox ID="lstbx1" runat="server" CssClass="lstbx1" SelectionMode="Multiple">
<asp:ListItem>One</asp:ListItem>
<asp:ListItem>Two</asp:ListItem>
<asp:ListItem>Three</asp:ListItem>
<asp:ListItem>Four</asp:ListItem>
<asp:ListItem>Five</asp:ListItem>
<asp:ListItem>Six</asp:ListItem>
<asp:ListItem>Seven</asp:ListItem>
</asp:ListBox>
</td>
<td>
<asp:ListBox ID="lstbx2" runat="server" CssClass="lstbx2"></asp:ListBox>
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnadd" runat="server" Text="Add" OnClientClick="Move_Elements();" />
</td>
<td>
<asp:Button ID="btnremove" runat="server" Text="Remove" OnClientClick="" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
<script type="text/javascript">
function Move_Elements() {
var originalList = $("#<%= this.lstbx1.ClientID %>");
var items = $('option', originalList);
var targetList = $("#<%= this.lstbx2.ClientID %>");
items/*.clone()*/.appendTo(targetList);
}
</script>
working example
edit:
anyway, i just want to warn you, that you are not able to access the items in code-behind, because these are serialized in viewstate and are not taken from the actual rendered control.
as a result: if you add n items with javascript and have one of these newly-added items selected as selectedItem in the ui, the asp.net-engine will fail to map the selectedValue at server-side to an item of the box, because it does not have these items in the viewstate!
try this...
<script type="text/javascript">
function Move_Elements() {
$('select[id=lstbx1] option').appendTo('#List2');
}
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.js" ></script>
<script type="text/javascript">
function Move_Elements() {
$(".lstbx1").children().appendTo(".lstbx2");
}
</script>
...
<asp:Button ID="btnadd" runat="server" Text="Add" OnClientClick="Move_Elements();return false;" />
Related
FileUpload control is rendering differently in different browsers. In the Firefox, it's showing Browse/No file selected while in Chrome Choose File/No file chosen. Is there a way to display the File Upload in the same way irrespective of browser. My ASP.NET Code and screenshots are attached below:
<asp:Label runat="server" ID="lblFileName" AssociatedControlID="fileUploader"></asp:Label>
<asp:FileUpload ID="fileUploader" runat="server" Width="350" />
<asp:Button ID="btnUpload" runat="server" Text="Upload" />
Firefox
Chrome
If you want consistent Button Look-And-Feel....you will need to apply the style you wish it to be.
You are using the Default Browser CSS styles. Check your Developer Tools for the associated browser to see how the Look-And-Feel of the controls is being rendered.
try following code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Uploader Demo</title>
<script src="Scripts/jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">
function hookFileClick() {
// Initiate the File Upload Click Event
document.getElementById('fileUploader').click();
}
function fnOnChange(obj)
{
document.getElementById("txtUploadFile").value = obj.value;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" runat="server"
id="txtUploadFile" disabled="disabled" />
<input type="button" runat="server"
id="btnUpload" value="Browse"
onclick="hookFileClick()" />
<asp:Button runat="server"
ID="btnUploadFileToServer"
Text="Upload File To Server"
OnClick="btnUploadFileToServer_Click" />
<asp:FileUpload runat="server"
ID="fileUploader" Style="visibility: hidden;"
onchange="fnOnChange(this);" />
</div>
</form>
</body>
</html>
C#
protected void btnUploadFileToServer_Click(object sender, EventArgs e)
{
string strFileName = fileUploader.FileName;
fileUploader.SaveAs("d:\\Somepath\\ " + strFileName);
}
Thank you very much #GoldBishop for giving me some hint to write custom css and the following css worked for me.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.upload-btn-wrapper {
position: relative;
overflow: hidden;
display: inline-block;
}
.btn {
border: 2px solid gray;
color: gray;
background-color: white;
padding: 8px 20px;
border-radius: 8px;
font-size: 20px;
font-weight: bold;
}
.upload-btn-wrapper input[type=file] {
font-size: 100px;
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="upload-btn-wrapper">
<asp:Label runat="server" ID="lblFileName" AssociatedControlID="fileUploader"></asp:Label>
<asp:FileUpload ID="fileUploader" runat="server" Width="350" />
<asp:Button ID="btnUpload" runat="server" Text="Upload" CssClass="btn" />
</div>
</form>
</body>
</html>
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>
I am trying to put inline css into an mvc page which inherits from a master page. I want to do this because this css is page specific and I feel it shouldn't go into a site wide file. What is the best way of doing this. My failed attempt is below. Nothing on the site will recognize testTwo styling. Thank you
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
.test
{
}
.testTwo *
{
float: left;
padding: 5px;
border: 2px solid gray;
margin: 3px;
}
</style>
</asp:Content>
missing the opening <style> tag? bad copy-paste, not the issue
Where is this ContentPlaceHolder at in your MasterPage?
Often times the TitleContent ContentPlaceHolder is inside the <head> tag within the <title> element like so:
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
Is this the case? If so, those styles will not be interpreted since browsers won't recognize the styles within <title><style>..</style></title>
I would suggest updating your MasterPage like this:
<head>
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link.... />
<link.... />
<asp:ContentPlaceHolder ID="StylesheetContent" runat="server" />
<script.... />
<script.... />
<asp:ContentPlaceHolder ID="ScriptContent" runat="server" />
</head>
Where is your opening
<style type="text/css">
?
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();
}