Solved

Javascript function needing to adjust multiple spans with the same ID

Posted on 2007-11-14
3
419 Views
Last Modified: 2008-02-01
I'm currently developing a web application for scientific paper database management system, and am having issues with an AJAX function that is supposed to update multiple divs with the same name.

Schema background in simple terms is as follows:

There are multiple [papers] inside a [project] - call these [project_papers]. There are also 0 to many [subprojects] within the [project]. In the case of the screenshot example below there are 2 subprojects. A [project_paper] can exist in multiple [subprojects] within the project, or in none at all. Each row representing a [project_paper] on the screen has a "pin", which kind of acts like a sticky row when the contents of the project are contracted (hiding the ones with the pin off). The pin is a span with an id and name of "pPaper{project_paper_id}", which is normally fine.

However, and this is where the problem exists, if the [project_paper] exists in two [subprojects] simultaneously, the span will of course have the same id and name as there is no differentiation between subprojects. Personally, I think this should be correct, and any javascript designed to update the contents of the span should apply to all instances on the page, but it only updates the top one - the database side of the AJAX fires correctly, and therefore the [project_paper] has the pin flag changed, but the display ends up confusingly incorrect.

Is there any way to update the javascript to update the content of both spans?

Screenshot example (rows in yellow are the one with the same id -- pin is red thing on the left):

http://rdms.powerwatch.org.uk/rdms1.png

Screenshot example with changed pin (top row pin changed but not bottom row):

http://rdms.powerwatch.org.uk/rdms2.png

HTML that calls the javascript function:

----------
<span name="pPaper<%=CLng(RS("project_paper_id"))%>" id="pPaper<%
  =CLng(RS("project_paper_id"))%>"><img src="/images/buttons/pin_<%
  =projPaperPin%>.gif" border="0" onClick="setProjectPin(<%
  =CLng(RS("project_paper_id"))%>,<%=theUID%>)" /></span>
-----------

Javascript functions:

-----------
/* Adjusts the pin status of a project paper within project or subproject for the active user */

var projPapPin;

function setProjectPin(projectPaperID,userID)
{
  projPapPin = projectPaperID;
  xmlHttp=GetXmlHttpObject();

url="/includes/ajax/ch_projectpin.asp?projPaperID="+projectPaperID+"&userID="+userID+"&sid="+Math.random();
  xmlHttp.onreadystatechange=displayProjectPin;
  xmlHttp.open("GET",url,true);
  xmlHttp.send(null);
}

function displayProjectPin()
{
  if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
  {
    document.getElementById('pPaper'+projPapPin).innerHTML = xmlHttp.responseText;
  }
}
-----------
0
Comment
Question by:topazg
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 19

Accepted Solution

by:
nschafer earned 500 total points
ID: 20280293
Your problem is that Element ID's should be unique and Javascript assumes that they are.  So when you use getElementById() you are only getting the first element with that ID.  You may want to try using getElementsByName.  This will return a collection of elements with the name and you can then loop through them updating the innerHTML.

I hope this helps,
Neal.

example:
------------------------------------------------------------
function displayProjectPin()
{
  if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
  {
    var el = document.getElementsByName('pPaper'+projPapPin);
    for (i=0;i<el.length;i++)
    {
        el[i].innerHTML = xmlHttp.responseText;
    }
  }
}

------------------------------------------------------------
0
 
LVL 3

Author Comment

by:topazg
ID: 20280528
Awesome, works perfectly, many thanks :)

I've updated the id to pPaper{paper_project_id}Sub{subproject_id} and left the name as it is, adopting your code example.

Thanks for the fast response!
0
 
LVL 19

Expert Comment

by:nschafer
ID: 20280730
Glad I could help,

Neal.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Node.js 11 81
P3P validator , ASP, PHP ,Https and Http links 3 43
display data from multiple ajax calls 9 41
Add Promise to Existing Code 6 30
This demonstration started out as a follow up to some recently posted questions on the subject of logging in: http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28634665.html and http://www.experts-exchange.com/Programming/…
A publishing tool, a Version Control System, or a Collaboration Platform! These can be some of the defining words for the two very famous web-hosting Git repositories: Bitbucket and Github. Git is widely used amongst the programmers and developers f…
This video teaches viewers how to create their own website using cPanel and Wordpress. Tutorial walks users through how to set up their own domain name from tools like Domain Registrar, Hosting Account, and Wordpress. More specifically, the order in…
Learn how to set-up custom confirmation messages to users who complete your Wufoo form. Include inputs from fields in your form, webpage redirects, and more with Wufoo’s confirmation options.

739 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question