Best approach: display a Div element after clicking on a link and using its propertie

JavaScript
1

Hi all,

I have a situation which is this…

On a page I display a link of search results which are hyperlinks, which all have the same URL get paramaters with different values (i.e. companyreport.aspx?..). I want to then click on a search result hyperlink and then generate a Div popup (this is called through a javascript call that is attached to each search result hyperlink’s onClick property.

For the hyperlink that is clicked, I need to take its ‘href’ value and use it (reason for us is in a bit).

On the popped up Div element is a dropdown box and two buttons (accept / decline). Once the accept button is pressed, I want to then go to the page the selected hyperlink was pointing to by using the ‘href’ value I obtain from the clicked search hyperlink and to also append to this hyperlink the a new GET parameter and the value of the dropdown box.

I have got this to work currently but it seems quite mess, so was wondering if there is a better solution to this.

For the search results hyperlinks I have…

PromptRequestReason(this.href); return false;

this ‘’ javascript method is…

function PromptRequestReason(hrefLocation) 
{            
   lnkDERequestReason.href = hrefLocation;
   popup('popUpDivReason');
}

then on the DIV popup I have the following link…


<a id="lnkDERequestReason" onclick="this.href = this.href + '&amp;reason=' + document.getElementById('drpPortfolios').value">Select</a>

now this all works, but I really seem like I am taking the long way around when there could be something simple. Does anyone have any cleaner suggestions?

Thanks in advance.

2

Yes, there is a cleaner way to do this which allows you to remove the inline scripting from the link, so that the link remains clean and pure.

The cleaner way is to use a single click event, which you can situate on a common parent of the appropriate links, or on the document body itself.


var parent = document.body;
// can also use a common container such as document.getElementById('container')

parent.onclick = onclickRequests(evt) {
    evt = evt || window.event;
    var targ = evt.target || evt.srcElement;
    if (targ.nodeType === 3) {
        // This fix allows Opera to behave consistently as other browsers
        // as Opera allows text nodes to trigger onclick events
        targ = targ.parentNode();
    }
    if (targ.nodeType === 1 && targ.nodeName === 'A') {
        if (this.href.search('companyreport.aspx') > -1) {
            PromptRequestReason(this.href);
            return false;
        }
    }
};

That will then just sit around waiting for clicks to occur, and when those clicks occur on element, and that element is an anchor link, and the link includes ‘companyreport.aspx’ then the appropriate call to PromptRequestReason() occurs.

Instead of setting the link on the popup, you should instead pass the link to the popup itself, so that the popup then takes control of setting the href on its own link.


function PromptRequestReason(hrefLocation) 
{            
   popup('popUpDivReason', hrefLocation);
}

and then update the popup script to receive the href and set it to the appropriate popup link