|
Legend create dynamic , I used jquery for create Legend GUI with click callback. each div have ID. expectation is while clicks div, the corresponding ID want to show. But here its showing only at last created div id only
<div id="legend"></div>
for (var i = 0; i < 3; i++) {
var id = "test" + i;
$("<div/>", {
"id": id,
"style": "width:30px; height:30px cursor:pointer; border:1px solid Green ;padding:1px; background-color:Green",
click: function() {
alert("ID = "+ id);
}
}).appendTo("#legend");
|
|
|
|
|
The problem is the function you created doesn't capture the value of the variable id, but the reference to that variable via a closure. To get a function that captures the current value of id create a function called createFunc(id) like this:
function createFunc(id)
{
var tmp = id;
return function() { alert("ID = " + tmp); };
}
then use it in your code like this:
...
click: createFunc(id);
...
Cheers!
—MRB
modified on Wednesday, July 6, 2011 12:15 PM
|
|
|
|
|
I have a code
if i click default3.aspx button(i am now default3.aspx).
After CallA function, com1's css was changed from null to css_1.
But after onload event com1's css is null.
why?
<ul>
<li id="com1">
<a href="default3.aspx"><img onclick="CallA()" />
</li>
</ul>
i double check com1's css was changed.
but after load_event com1's css was null.
function click_step2_menu() {
var li_imsi = document.getElementById("com1");
li_imsi.setAttribute("className", "selected");
}//function click_step2_menu()
hi
My english is a little.
anyway, nice to meet you~~
and give me your advice anytime~
|
|
|
|
|
If you want the LI with id 'com1' to use class 'css_1' by default after page load then you should change that HTML line to:
<li id="com1" class="css_1">
...
</li>
The default class for all tags is null or empty.
|
|
|
|
|
Hi All,
I am new to javascript and would like some help on a function to capture the ID of an element when the mouse is clicked. The element could be an image or what ever with an ID. I did some search online but I don't quite understand the code I saw so I'm going to attempt to write the code the way I think it should work. Basically I want to assign the ID of an element that has been selected using the mouse to a variable called Selected_Item. I would then swap out the value of Selected_item when a new item is selected. The following is what I have but I still don't know what I should put in the parenthesis so I placed a set of dashes in it for the time being. Please take a look at my code below, any help will be much appreciated, thanks in advance.
function CaptureID()
{ var Old_Item = '';
var Selected_Item = '';
if (Selected_Item = null)
{ Selected_Item = document.getElementById('-------');}
else
{
var Old_Item = Selected_Item;
var Selected_Item = document.getElementById('-------');
}
document.write("You have selected +'Selected_Item'");
}
|
|
|
|
|
Please format any code snippets you post using the "code block" toolbar item.
getElementById takes the ID of the element you are attempting to get (just like the name implies)
For instance
<div ID="myDiv"/>
getElementById("myDiv");
I suggest you look at JQuery also since it makes using JavaScript easier and cross browser.
JQuery[^]
I know the language. I've read a book. - _Madmatt
|
|
|
|
|
Hi Mark, thanks for replying. I understand that getElementById gets the ID of an element. It looks to me like you had to manually put the ID myDiv in the parenthesis in your little example. Is there a way to automatically place the ID into the parenthesis when the mouse is clicked? Thanks again for replying.
|
|
|
|
|
It isn't really automatic but you can pass the id of the element to a function
<a id='someLink'></a>
<span id='someId' onclick="Foo('someLink')"/>
function Foo(id)
{
document.getElementById(id);
}
or
<a id='someLink' onclick="Foo(this.id)"></a>
however this wouldn't make much sense as you already have the object represented by the this parameter and would not need to use getElementById
I know the language. I've read a book. - _Madmatt
|
|
|
|
|
Hi
// +++++ get reference
function fuGetReference(X00)
// X00 string, value of ID or NAME
{
var X01=null;
if(X00!=null)
{if(X00.length>0)
{
if(fuIEexist())
{X01=window[X00];
if(X01==null){X01=document.getElementById(X00);}
if(X01==null){X01=document.getElementsByName(X00);}
}
else
{
X01=document[X00];
if(X01==null){X01=document.getElementById(X00);}
if(X01==null){X01=document.getElementsByName(X00);}
}
}
}
return X01;
}
Some browsers support value of ID like a pointer, wothout getElementByXXXX()
Cu.
|
|
|
|
|
Here is one way to do this:
<html>
<head>
<title>Test CaptureID</title>
<script type="text/javascript">
function CaptureID(sender) {
alert(sender.id);
}
function GetHandler_CaptureID(sender) {
return function() {
CaptureID(sender);
}
}
window.onload = function() {
var elementIDs = ["divHello", "divWorld"];
var element;
for (var i = 0; i < elementIDs.length; i++) {
element = document.getElementById(elementIDs[i]);
element.onclick = GetHandler_CaptureID(element);
}
};
</script>
</head>
<body>
<div>
<div id="divHello" style="background-color: Green;">Hello</div>
<div id="divWorld" style="background-color: Red;">World</div>
</div>
</body>
</html>
Instead of having the list of ID's in advance, you could also scan the DOM and look for elements with an ID or by some other criteria. jQuery would make this exceptionally easy, like Mark was saying.
Driven to the ARMs by x86.
|
|
|
|
|
I'm making an Android app with HTML and Javascript, and I need to get some JSON data from a server with Windows Authentication. jQuery seemed like the best approach for this, but I always get a 401 Unauthorized error. Does anyone know how to properly construct the right "GET" request(s) to make this happen?
|
|
|
|
|
We decided to just turn the app into a webpage and put it on the server with the data. In my opinion, this way is cleaner anyways.
If anyone has an answer for the original question, feel free to post anyways. I don't need it anymore for this project, but someone else might.
|
|
|
|
|
I try to execute this code(I place it between the head tags):
$(document).ready(function () {
alert("document ready occurred!");
});
$(window).load(function () {
alert("window load occurred!");
});
none of the functions is executed and I can't see any message box. What can be the reason and how can I fix it?
*I have references to the jquery libary in the page's master.
|
|
|
|
|
Have you placed in inside script tags?
<script>
$(document).ready(function () {
alert("document ready occurred!");
});
$(window).load(function () {
alert("window load occurred!");
});
</script>
I know the language. I've read a book. - _Madmatt
|
|
|
|
|
If you are using master pages, then the page you are running the script on doesn't have a head section????
have you tried placing the script at the beginning on the content block in a set of script tags?
|
|
|
|
|
I have just set up a fresh asp.net project and this works fine when the code is placed in a script block with the HeadContent content block as shown below;
Master Page
<%@ Master Language="VB" AutoEventWireup="false" CodeFile="Site.Master.vb" Inherits="Site" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<div class="page">
<div class="header">
<div class="title">
<h1>
My ASP.NET Application
</h1>
</div>
<div class="loginDisplay">
<asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
<AnonymousTemplate>
[ <a href="~/Account/Login.aspx" ID="HeadLoginStatus" runat="server">Log In</a> ]
</AnonymousTemplate>
<LoggedInTemplate>
Welcome <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server" /></span>!
[ <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/"/> ]
</LoggedInTemplate>
</asp:LoginView>
</div>
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
<asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
<asp:MenuItem NavigateUrl="~/Default2.aspx" Text="Default2" Value="Default2">
</asp:MenuItem>
</Items>
</asp:Menu>
</div>
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
</form>
</body>
</html>
Content Page
<div class="signature">Dave
Find Me On: <a href="http://bit.ly/DMAweb" target="_blank">Web</a>|<a href="http://on.fb.me/daveauld" target="_blank">Facebook</a>|<a href="http://bit.ly/DMAtwt" target="_blank">Twitter</a>|<a href="http://linkd.in/DMAlnk" target="_blank">LinkedIn</a>
<hr>Folding Stats: <a href="http://fah-web.stanford.edu/cgi-bin/main.py?qtype=teampage&teamnum=11561">Team CodeProject</a></div>
|
|
|
|
|
it's exactly what I did and it still doesn't work...
|
|
|
|
|
To include in your web app, cut-and-paste(replace
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
)
with
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
If it works then your jQuery path is not ok. Please let me know your result.
modified on Tuesday, June 21, 2011 6:25 PM
|
|
|
|
|
|
Just as a side question to this reply: I was wondering why you said NOT to self-close the script tag? Is that particular to asp pages or a certain DOCTYPE or anything to do with jquery. I am just learning and have not seen that mentioned before....thanks.
michael judy
vbmike@hotmail.com
"He's ALIVE, Jim. Where did I go wrong?"
|
|
|
|
|
|
Ok, thanks, I'll keep an eye out. I always try and test in all the major browsers before release so hopefully I will catch things like this.
MJ
michael judy
vbmike@hotmail.com
"He's ALIVE, Jim. Where did I go wrong?"
|
|
|
|
|
guys;
i am learning jquery and i am stuck in a tutorial that uses xml to make an ajax asynchronous call-back. what i have is:
$.post("Default.aspx", { rating: $(this).html() }, function(xml) {
$("#rating").html(
"Thanks for rating, current average: " +
$("average", xml).text() +
", number of votes: " +
$("count", xml).text()
);
});
the problem is that $("average", xml).text() and $("count", xml).text() return empty strings althoug xml equals to "<ratings><average>2</average><count>1</count></ratings>".
what could the problem be?
Help people,so poeple can help you.
|
|
|
|
|
The problem was that i shoud add the header 'Content-type: text/xml' to the response object before i can write to it (End of Speech).
Help people,so poeple can help you.
|
|
|
|
|
I am a begginer asp.net developer and now I want to learn about some client-side langauages.
I'm a liitle familiar with javascript, and I want to start learning Jquery. Is it OK if I learn only Jquery instead of javascript? do I have to know javascript well before starting my javascript lessons?
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
