I'm trying to hide a div (answers-box) nested in a shadowRoot element, but can't seem to do so.
When I inspect the page with dev tools, this is the format:
I'm using the following at the end of my code to work with the shadowRoot element:
<script>
$(document).ready(function ()
{
var crowdElement = document.getElementById('myCrowd');
console.log(crowdElement);
var shRoot = crowdElement.shadowRoot;
console.log('Here is the var: ' + shRoot)
});
</script>
</body>
</html>
but it comes back as null in the console.
At the time you execute the ready callback the Custom Element <crown-form> is not defined yet.
Probably because the loading of the Custom Element definition is deferred or asynchronous.
You should wait for it by using whenDefined().
customElements.whenDefined( 'crowd-form' ).then( () => {
var crowdElement = document.getElementById('myCrowd');
console.log(crowdElement);
var shRoot = crowdElement.shadowRoot;
console.log('Here is the var: ' + shRoot)
} )
If crowdElement.shadowRoot is returning null then this Shadow DOM is closed. This means that its implementation internals are inaccessible and unchangeable from JavaScript. Here you can read more about closed shadow DOMs.
Related
I inherited an Adobe CEP extension at work. Trying to wrap my head around an issue that makes it so absolutely no input from keyboard works on text inputs. To elaborate, absolutely no keyboard input works in Polymer's text inputs. The input get's focused, but if I type anything in them I get the mac error alert sound. The only key that I was able to make work was "tab". Anything else does not work. It's built using Polymer. At first I was unsure what's causing the issue, and since I inherited this project I was confused where to start. After about a day of debugging, I believe it's related to Polymer somehow. The reason for this is, if I remove the Polymer HTML element that renders it, and just put an input there, the input works. It only seems to block input inside the <template> ... </template>. I've looked all over the internet for any clues on what could be causing Polymer to block this input, there's no errors in console or anything, and I've come up short handed.
Does anyone have any insight on this?
I'm facing the same problem. Actually, it is not related to polymer, but to the webcomponents polyfill. If you try the following source code inside an Adobe CEP extension, you will see that you can click inside both the elements, select any text, but you are not able to edit it.
<html>
<head>
<script>
// Force all polyfills on
if (window.customElements) window.customElements.forcePolyfill = true;
ShadyDOM = {
force: true
};
ShadyCSS = {
shimcssproperties: true
};
</script>
<script src="node_modules/#webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
</head>
<body>
<template id="x-foo-from-template">
<input value="from template">
</template>
<script>
let tmpl = document.querySelector('#x-foo-from-template');
customElements.define('x-foo-from-template', class extends HTMLElement {
constructor() {
super();
let shadowRoot = this.attachShadow({
mode: 'open'
});
shadowRoot.appendChild(tmpl.content.cloneNode(true));
}
});
customElements.define('x-foo-from-dynamic', class extends HTMLElement {
constructor() {
super();
let shadowRoot = this.attachShadow({
mode: 'open'
});
var inputEl = document.createElement('input');
inputEl.value = "from created element";
shadowRoot.appendChild(inputEl);
}
});
</script>
<x-foo-from-template></x-foo-from-template>
<x-foo-from-dynamic></x-foo-from-dynamic>
</body>
</html>
Faced with the same issue, we finally found documented that Adobe will hand over all keypresses to the host application unless it can determine that an input or dropdown element has focus. I expect this is done using a simple check on document.activeElement. When the Shadow DOM is involved, Adobe would have to do something like
let target = document.activeElement;
while (target.shadowRoot && target.shadowRoot.activeElement) {
target = target.shadowRoot.activeElement;
}
in order to find the underlying <input> element.
Since this is currently not working, we needed to use registerKeyEventsInterest to explicitly have all keypresses be processed by our code.
var csInterface = new CSInterface();
var keyEvents = [];
// All the keyCodes you need, with the modifiers used
keyEvents.push({ keyCode: 0 });
keyEvents.push({ keyCode: 0, metaKey: true });
// ...
csInterface.registerKeyEventsInterest(JSON.stringify(keyEvents));
We actually went ahead and looped 0..255 and registered for all modifiers. With the exception of keyboard based copy-paste, we now have full functionality with our webcomponents (mostly PolymerElement/LitElement based).
https://github.com/Adobe-CEP/CEP-Resources/blob/master/CEP_8.x/Documentation/CEP%208.0%20HTML%20Extension%20Cookbook.md#register-an-interest-in-specific-key-events
Maybe I'm paranoid. I always like to have my code as slim as possible. I always target my websites to be under 1.5 MB (All images compressed and resized as appropriate(. I started working with Polymer the month before thinking that I could shave off those 150 KBs from Bootstrap and 90 KB from jQuery, and have a relatively lightweight site.
I've just vulcanized my elements.html file and I am horrified. The beast is 947KB without images, just bare HTML and JS. I have around 40 custom elements + Couple of the Elements catalog (and I'm not even close to creating new elements). (GZip is 307.40 KB out of 947KB) (Using ASP.NET MVC5 and .NET 4.6).
With a regular 3G connection, it takes about 5.15 seconds to load in Chrome 52 (which is awful). The Polymer Shop demo loads beautifully fast (<3 seconds from cold cache in regular 3G)
First of all, is this acceptable? I'm trying to hit before the 3 second mark (or get to it as close as possible).
Also, there are many JavaScript files that are being loaded part of Vulcanize which I don't need.
I've seen this Gist: Vulcanize and Polymer auto Lazy Loading but I don't know what to do with it.
These are the imports of my elements.html file:
<link rel="import" href="../bower_components/app-route/app-route.html">
<link rel="import" href="../bower_components/app-route/app-location.html">
<link rel="import" href="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="./pgarena-drawer/pgarena-drawer.html">
<link rel="import" href="./pgarena-navbar/pgarena-navbar.html">
<link rel="import" href="./pgarena-auth/pgarena-oauth/pgarena-oauth.html">
<link rel="import" href="./routes/pgarena-app.html">
Then all my custom elements (pgarena) have more polymer components built into it.
I've tried several combinations (Only with my elements) and (Only with the Polymer elements shown) and I've had varied results (as expected)
I don't know what to do... Before resorting to a hacky stuff... Any recommendations?
Ok, people, bear with me. This is going to be a long answer. It can become a little bit hairy. First of all, this was a Polymer 1.x solution. I don't know what of this has changed for version 2.0
TL;DR:
We get the URLs of the .HTML and use JavaScript to create the link attribute (HTML import) to load the element. We check with Polymer using Polymer.isInstance(element) to see if the object has been set or not.
Here's the code:
For this to work, I was using iron-pages, and custom JavaScript.
We have our app, as the following:
Note*: The following code I had it in the same file, you can separate it as you wish.
<!-- Main Entry point for the application. This will work as the main "Controller"-->
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/app-route/app-location.html">
<link rel="import" href="../../bower_components/app-route/app-route.html">
<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">
<dom-module id="pgarena-app">
<template>
<pgarena-action-config></pgarena-action-config>
<app-route route="{{route}}"
pattern="/:page"
data="{{data}}"
tail="{{tail}}">
</app-route>
<iron-pages selected="[[data.page]]" attr-for-selected="title" fallback-selection="404">
<pgarena-home-app title="" route="[[tail]]"></pgarena-home-app>
<pgarena-tournament-app title="tournaments" route="[[tail]]"></pgarena-tournament-app>
<!--<pgarena-clash-app title="clash" route="[[tail]]"></pgarena-clash-app>-->
<pgarena-account-app title="account" route="[[tail]]"><content></content></pgarena-account-app>
<pgarena-teams-app title="teams" route="[[tail]]"></pgarena-teams-app>
<div title="404">
<h1>{{data.page}} could not be found!</h1>
</div>
</iron-pages>
</template>
<script>
(function () {
'use strict';
Polymer({
is: 'pgarena-app',
ready: function () {
/* console.log("Route is ");
console.log(this.data.page);
console.log(this.tail);*/
document.addEventListener('iron-select',
function (event) {
/*
console.log("---------------------");
console.log(event);
console.log("---------------------");*/
var element = getSelectedElement(event);
var tagName = element.tagName.toLowerCase();
LazyLoad(Polymer, element, tagName, event.target);
});
}
});
})();
</script>
Let's get some things first:
My app is called: "pgarena-app"
I don't know if this has been fixed, but the app-route element has a problem with two-way data binding. Meaning that for iron-pages, I had to use the double brackets [[]] to one-way data bind.
App route passes the information from the url to iron-pages so it can toggle the different elements.
This is not mandatory, and I don't know if this is the right way to do it. I divided my application into "views", which are elements by itself. They load all the elements required to that "view" by. Note: This has no effect, whatsoever in lazy loading.
Note, that the elements are not included in the URL, because we're going to lazy load them.
Let's go to the JavaScript portion of this element:
<script>
(function () {
'use strict';
Polymer({
is: 'pgarena-app',
ready: function () {
document.addEventListener('iron-select',
function (event) {
var element = getSelectedElement(event);
var tagName = element.tagName.toLowerCase();
LazyLoad(Polymer, element, tagName, event.target);
});
}
});
})();
</script>
The code is simple in here. We define our element, and we listen to the iron select event. This signals us that iron-page has been selected. We lazy load the element if it's not there. The magic behind this, is in the custom LazyLoad JavaScript, which is below.
<script>
/**
* Defines all the routes of the imports in here
*
* This is how it goes: The Key name is the tag name of the element.
* The value is the relative URL from the elements folder.
*
* You then get the element's tag name and look for it.
*
* DO NOT PUT TRAILING SLASH BEFORE THE URL! Thanks :)
**/
var PGArena = PGArena || {};
PGArena.LazyLoad =
{
"pgarena-home-app": "routes/home/pgarena-home-app.html",
"pgarena-tournament-app": "routes/tournament/pgarena-tournament-app.html",
"pgarena-account-app": "routes/account/pgarena-account-app.html",
"pgarena-clash-app": "routes/clash/pgarena-clash-app.html",
"pgarena-teams-app": "routes/teams/pgarena-teams-app.html",
"pgarena-tournament-index-view": "views/tournament/pgarena-tournament-index-view/pgarena-tournament-index-view.html",
"pgarena-tournament-list-view": "views/tournament/pgarena-tournament-list-view/pgarena-tournament-list-view.html",
"pgarena-account-index-view": "views/account/pgarena-account-index-view/pgarena-account-index-view.html",
"pgarena-account-login-view": "views/account/pgarena-account-login-view/pgarena-account-login-view.html",
"pgarena-account-register-view": "views/account/pgarena-account-register-view/pgarena-account-register-view.html",
"pgarena-account-confirm-email-view": "views/account/pgarena-account-confirm-email-view/pgarena-account-confirm-email-view.html",
"pgarena-account-oauth-view": "views/account/pgarena-account-oauth-view/pgarena-account-oauth-view.html",
"pgarena-clash-index-view": "views/clash/pgarena-clash-index-view/pgarena-clash-index-view.html",
"pgarena-clash-brawl-view": "views/clash/pgarena-clash-brawl-view/pgarena-clash-brawl-view.html",
"pgarena-teams-index-view": "views/team/pgarena-teams-index-view/pgarena-teams-index-view.html",
"pgarena-teams-create-view": "views/team/pgarena-teams-create-view/pgarena-teams-create-view.html"
};
/**
* This variable keeps track of all the vulcanized elements.
*
**/
PGArena.Vulcanized = {
}
/**
* Global Placeholder for checking which is the selected item of the iron-selectors that
are ready for lazy loading.
**/
PGArena.IronSelected = {
}
/**
* LazyLoad
*
* Lazy Loads the elements as needed. This function is triggered by iron-select
* event. If the element is already registered, then it is not loaded again.
*
* Polymer => Dependency Injection of the Polymer object. (Polymer itself)
* element => The element (DOM-wise: a.k.a tags with everything)
* elementName => The element's name.
* selectorTrigger => The element who triggered the select.
**/
function LazyLoad(Polymer, element, elementName, selectorTrigger) {
if (Polymer.isInstance(element)) {
// console.log(elementName + " is already registered ;)");
return;
} else {
//console.log(elementName+" isn't registered. On its way for Lazy Loading!");
}
//console.log("Lazy Load Started");
var hasProp = PGArena.LazyLoad.hasOwnProperty(elementName);
if (!hasProp) {
console.log("Property " + elementName + " not found for Lazy Loading");
return;
}
var href = PGArena.LazyLoad[elementName];
LoadImportAsync(href, elementName, selectorTrigger);
}
function Spinner(elementName, active) {
var paperId = 'js-' + elementName;
var queryName = active ? elementName : paperId;
var createElem = active ? 'paper-spinner-lite' : elementName;
var elem = document.querySelector(queryName);
var spinner = document.createElement(createElem);
spinner.setAttribute('active', '');
if (elem === null || elem === undefined)
return;
console.log("Element Name is");
console.log(queryName);
console.log("Element is");
console.log(elem);
console.log("Spinner is:");
console.log(spinner);
if (active) {
spinner.setAttribute('id', 'js-' + elementName);
console.log("replacing time");
elem.parentNode.replaceChild(document.createTextNode("Caca"), elem);
//elem.parentNode.replaceChild(spinner, elem);
}
else {
console.log("Replaced");
//elem.parentNode.replaceChild(elem, spinner);
}
}
function ForcedLoad() {
}
/**
* Loads the required import and appends it to the document. It really doesn't
* matter where it is appended.
*
**/
function LoadImportAsync(href, elementName) {
var link = document.createElement('link');
link.rel = 'import';
link.href = getBaseUrl() + "/NodeJS/Polymer/app/elements/" + href;
link.setAttribute('async', ''); // make it async!
link.onload = function () { Spinner(elementName, false); }
link.onerror = function (e) { console.log("There was an error loading " + elementName + ". Please Check the URL") };
document.head.appendChild(link);
}
function getBaseUrl() {
var pathArray = location.href.split('/');
var protocol = pathArray[0];
var host = pathArray[2];
return protocol + '//' + host;
}
/**
* On non-blink browsers (a.k.a Firefox , Edge, Internet Explorer)
* The event.srcElement is undefined. We need to search for it ourselves.
*
* The way we do that is that we get the current targetted element which is the iron form.
* Retrieve its selection mechanism and the supposed element's index.
*
* We proceed by query Selecting the element in the DOM all the way until we nab it.
* Then we are faced with the next challenge. We don't know if the element is using an
* index-based approach (0, 1, 2...) or an attribute approach(title="home", title="tournament",etc.)
*
* So we proceed to fetch its selection mechanism by grabbing the attrForSelected. If null, it means that
* it is using the index-based approach. We continue and get the children position at the element.
*
* Note that selectedAttr variable will return me either the index or the selected attribute's value.
* So it's going to be 0, 1, 2 if using the index based approach.
*
**/
function getSelectedElement(event) {
if (event.srcElement !== undefined)
return event.srcElement.selectedItem;
var element = event.target;
//Get the current selected attribute:
var selectedAttr = element.selected;
//Gets the attribute that is being used for selection:
var attrForSelected = element.attrForSelected;
//This means that it is not using index based
if (attrForSelected !== null) {
return element.querySelector('[' + attrForSelected + '="' + selectedAttr + '"]');
}
//Continues using index based:
var childelem = element.children[parseInt(selectedAttr)];
return childelem;
}
</script>
The first thing we do is to define the URLs relative to the document I have. I do this by defining a json with a key whose name is the title attribute of the iron-pages and the value with the relative URL to this document (the pgarena-app).
What I mean, is that in the case I want to load pgarena-tournament-appand my pgarena-app (my main entry point to the application) is in www/polymer/pgarena-app.htmland my pgarena-tournament-app is in www/polymer/routes/tournament/pgarena-tournament-app.html, since this is relative my JSON will be:
var PGArena = PGArena || {};
PGArena.LazyLoad =
{
"tournament" : "routes/tournament/pgarena-tournament-app.html",
};
Note PGArena.LazyLoad can be anything, this is a global variable I defined with the PGArena namespace.
Then, we see that the code LazyLoad is called:
function LazyLoad(Polymer, element, elementName, selectorTrigger) {
if (Polymer.isInstance(element)) {
// console.log(elementName + " is already registered ;)");
return;
} else {
//console.log(elementName+" isn't registered. On its way for Lazy Loading!");
}
//console.log("Lazy Load Started");
var hasProp = PGArena.LazyLoad.hasOwnProperty(elementName);
if (!hasProp) {
console.log("Property " + elementName + " not found for Lazy Loading");
return;
}
var href = PGArena.LazyLoad[elementName];
LoadImportAsync(href, elementName, selectorTrigger);
}
What I do in here is to check if the Element that I want to lazy load has been referenced in the JSON I defined (PGarena.LazyLoad). If it's not in there, then what I do is that I log that message. If it's there, and it has not loaded, then I Asynchronously load it by creating the HTML import and appending it to the head:
/**
* Loads the required import and appends it to the document. It really doesn't
* matter where it is appended.
*
**/
function LoadImportAsync(href, elementName) {
var link = document.createElement('link');
link.rel = 'import';
link.href = getBaseUrl() + "/NodeJS/Polymer/app/elements/" + href;
link.setAttribute('async', ''); // make it async!
link.onload = function () { Spinner(elementName, false); }
link.onerror = function (e) { console.log("There was an error loading " + elementName + ". Please Check the URL") };
document.head.appendChild(link);
}
Please notice (I don't know if they've fixed this). There's a polyfill for HTML imports for Firefox, and Edge, and Safari(I believe). The polyfill uses XHR (AJAX) for loading the imports!!! I mention this because at the beginning I tried to intercept the HTML Imports and in Google Chrome it didn't work.
Let me know if you need anything else. As you can see, I tried to use the spinner, but I didn't get it to work. Hope this helps!
I'd start with the fact that Vulcanize only merges files together by default. Have you added the switches to remove comments for example?
Also, you would want to minify you bundled HTML and JS files. Most example will show you a Gulp setup but you could just as well minify the vulcanized files in a second step in an npm script.
Maybe this post will help: https://jongeho.wordpress.com/2015/06/24/endeavors-with-polymer-1-0-vulcanize-crisper-html-minifier/
That said, it is true that a Web Component-rich app will naturally be quite large. It is something I've also been noticing
I have a form, containing a <select> element containing options which are changing according to another field value.
So, when the <select> item gains focus if the other field value is not set blur event is triggered on the previous, and focus is triggered on the latter.
Here's a simplified version of my code:
$(document).on('focus', '#requiresOuterValue',
function() {
if( isNaN(parseInt( $('#outerValue').val() )) )
{
$('#outerValue').trigger('focus');
}
});
The code works fine (dropdown content disappears, #outerValue gains focus) in Firefox but not in chrome, where #outerValue gains focus, but the <select> item contents are displayed as well.
Mmm.. Did you tried to use the native 'focus' method instead the 'focus' jquery event?
$('#outerValue')[0].focus();
I'm not sure that triggering jQuery events have implicit browser native behaviours.
Well, I came up with a solution.
Your problem is that the closure of a select is not standard in all browsers. the only way I found to simulate the closure is to re-render the select.
Here is the code:
$(document).on('focus', '#requiresOuterValue', function() {
var requiresOuterValue = $("#requiresOuterValue").clone();
if( isNaN(parseInt( $('#outerValue').val() )) )
{
$('#outerValue').trigger('focus');
$("#requiresOuterValue").replaceWith(requiresOuterValue);
}
});
EDIT: fiddle here http://jsfiddle.net/JonnyMe/C9rKL/1/
jQuery plugin implementation
You can even implement a jQuery plugin to achieve the goal:
$.fn.closeSelect = function() {
if($(this).is("select")){
var fakeSelect = $(this).clone();
$(this).replaceWith(fakeSelect);
}
};
And then use it this way:
$(document).on('focus', '#requiresOuterValue', function() {
if( isNaN(parseInt( $('#outerValue').val() )) )
{
$('#outerValue').trigger('focus');
$("#requiresOuterValue").closeSelect();
}
});
I am using Jquery 1.7.2.
I want to transverse Html Elements Till a Specifc Attribute (id) using Jquery on
mouse over on any html element in my page.
we have parents() function but problem is how to select stop on the parent element which has id attribute
$("*", document.body).click(function (e) {
e.stopPropagation();
var domEl = $(this).get(0);
var parentEls = $(domEl).parents()
.map(function () {
return this.tagName;
})
.get().join(", ");
$("b").append("" + parentEls + "");
});
this is code but i am getting all element till root
but i want to stop on a closet elements which has attribute id in the tag
Please help me out .
Just use closest:
$(this).closest('#the-id');
Unless your'e just looking for the closest one that has any id attribute, which would be:
$(this).closest('[id]');
Edit: after seeing your updated question, this should be what you want:
$(document).click(function(e) {
e.preventDefault();
var parents = $(e.target).parentsUntil('[id]')
.map(function() { return this.tagName; }).get().join(',');
console.log(parents);
});
Note that this approach accomplishes what you want without selecting and binding click events to every node in the DOM, which is a pretty heavy handed approach.
Edit (again): looks like maybe you wanted to include the tag with the id attribute on it (the above solution is everything up to, but not including that tag). To do this, the solution is pretty similar:
$(document).click(function(e) {
e.preventDefault();
var $parents = $(e.target).parentsUntil('[id]');
var tagNames = $parents.add($parents.parent())
.map(function() { return this.tagName; }).get().join(',');
console.log(tagNames);
});
It looks like you want to map the hierarchy from the clicked element up to the document root. In that case, you can apply parents() to event.target:
$(document).click(function(e) {
e.preventDefault();
var parentEls = $(e.target).parents().map(function() {
return this.tagName;
}).get().join(", ");
});
Note that, as jmar777, you should also change your selector: "*" adds an event handler to all the elements, which is probably not what you want. Bind a single handler to document instead to take advantage of event bubbling.
I have an ASP.NET MVC application with pages where the content is loaded into divs from client via JavaScript/jQuery/JSON. The loaded content contains a-tags with references to a function that updates server side values, then redirects to reload of entire page even though.
I wish to replace the a-tags with 'something' to still call a server-side function, then reload the div only.
What is the 'right' way of doing this?
All comments welcome.
This is as far as I got so far. getResponseCell() returns a td-tag filled with a-tag.
I've mangled Glens suggestion into the .click() addition, but it just calls the onClickedEvent...
Code sample:
onClickedEvent=function()
{
return false;
}
getResponseCell=function(label, action, eventId)
{
tmpSubSubCell=document.createElement("td");
link = document.createElement("A");
link.appendChild( document.createTextNode( label));
link.setAttribute("href", "/EventResponse/"+ action + "/" + eventId);
//link.setAttribute("href", "#divContentsEventList");
//link.setAttribute("onclick", "onClickedEvent(); return false;");
link.setAttribute("className", "eventResponseLink");
link.click(onClickedEvent());
// link=jQuery("<A>Kommer<A/>").attr("href", "/EventResponse/"+ action + "/" + eventId).addClass("eventResponseLink");
// link.appendTo(tmpSubSubCell);
tmpSubSubCell.appendChild(link);
return tmpSubSubCell;
}
And the solution that worked for me looks like this:
onClickedEvent=function(event, actionLink)
{
event.preventDefault();
$("eventListDisplay").load(actionLink);
refreshEventList();
return false;
}
getResponseCell=function(label, action, eventId)
{
tmpSubSubCell=document.createElement("td");
link = document.createElement("A");
link.setAttribute("id",action + eventId);
link.appendChild( document.createTextNode( label));
actionLink = "/EventResponse/"+ action + "/" + eventId;
link.setAttribute("href", actionLink);
className = "eventResponseLink"+ action + eventId;
link.setAttribute("className", className);
$('a.'+className).live('click', function (event)
{
onClickedEvent(event,$(this).attr('href'));
});
tmpSubSubCell.appendChild(link);
return tmpSubSubCell;
}
Without really seeing more information.....
If you're a's are being added to the DOM after the initial page load, you cannot use the usual click() or bind() methods in jQuery; this is because these methods only bind the events to those elements that are registered in the DOM at the time the methods are called. live() on the other hand, will register the event for all current, and future elements (using the event bubbling mechanism in Javascript).
$(document).ready(function () {
$('a.eventResponseLink').live('click', function (event) {
var self = $(this);
self.closest('div').load('/callYourServerSideFunction.asp?clickedHref=' + self.attr('href'));
event.preventDefault();
});
});
We're using event.preventDefault() to prevent the default action of the a-tag being executed; e.g. reloading or changing page.
Edit: The issue won't be caused by that. That's the power of jQuery; being able to bind the same event to multiple elements. Check your HTML; maybe you're missing a closing </a> somewhere? Maybe your binding the event in a location that gets called multiple times? Each time .live() gets called, it will add ANOTHER event handler to all matched elements. It only needs to be bound once on page load.
jQuery provides loads of way for you to select the elements; check out the list. Looking at your link variable, it looks like all your links have a href starting with /EventResponse/; so you can use $('a[href^=/EventResponse/]') as the selector instead.
We need code to give you a proper answer, but the following code will catch the click of an a-tag, and reload the div that it's inside:
$(document).ready(function() {
$("a").click(function() {
//call server-side function
var parentDiv = $(this).parents("div:first");
$(parentDiv).load("getContentOfThisDiv.asp?id=" + $(parentDiv).attr("id"));
});
});
In the above code, when a link is clicked, the div that this the link is inside will be loaded with the response of the call to the asp file. The id of the div is sent to the file as a parameter.