Solved

html href not linking to correct location

Posted on 2013-11-02
24
359 Views
Last Modified: 2013-11-02
I have a menu which is in header.php which is called as an include on each page I load. What is happening, is if I click a link in the header which has an absolute path, when I click the link, for some reason inherits the link to the folder I am currently in. Let me show you with example.

Menu structure:

Requests

<ul>
      <li><a href="javascript:;" onclick="addbox(); return false" class="BA">Add Box(es)</a></li>
      <li><a href="/domain/admin/requests/boxes/index.php">Administration</a></li>
</ul>

Open in new window


Reports

<ul>
     <li><a href="javascript:;" onclick="addfile(); return false" class="BA">Add File(s)</a></li>
     <li><a href="/domain/admin/reports/boxin/index.php">Administration</a></li>
 </ul>

Open in new window


If I click the Add Box(es) link while in the file menu, instead of linking to addbox(); which is in the request link it is showing the link as: /domain/admin/reports/boxin/index.php#. How do I correct this. many thanks
0
Comment
Question by:peter-cooper
  • 12
  • 9
  • 2
  • +1
24 Comments
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 39618892
Maybe use explicit URLs starting with http:// ?  It's either that or you'll need to develop a dependency on the directory structure.
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39618910
If you want to run a javascript function when you click a link, then the best practice is bind the event, rather than put the function inline. It's very easy to do in jQuery. Set your link up like this:

 <a href="#" class="BA" id="addFile>Add File(s)</a>

And then bind the event like this:

$('#addFile').click(function(e) {
   e.preventDefault();
   addFile;
});

You haven't shown us what's going on in your JS functions, so if that's coded to pull a particular address from the link, then maybe your problem is there.
0
 

Author Comment

by:peter-cooper
ID: 39618919
@Chris
That isn't firing the function at all. And also, if I hover over the link when I am in Reports, it is showing this link: /domain/admin/reports/boxin/index.php instead of the request link. Thanks
0
 

Author Comment

by:peter-cooper
ID: 39618925
@Chris

I put your code in a function and it now fires but only from the requests menu. If I attempt to click from Reports menu the click does not fire and shows a path that I included in my last post. Thanks

$(function() {
$('#addbox').click(function(e) {
   e.preventDefault();
   addbox();
});
});

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 39618929
If a link has no link then when you hover it it will show what ever path you are currently on.
Why do you expect it to show addbox(); - that is not a link
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39618932
Peter. By having this line:

$('#addbox').click(function(e) {

It will only bind the event to an element with an ID of addbox. If you want to bind the event on the reports link, then you'll need to bind that separately:

<a href="#" class="BA" id="addFile">Add File(s)</a>

$('#addfile').click(function(e) {
   e.preventDefault();
   addfile();
});

Open in new window


I'm not sure I follow what you mean by 'showing the request link' - you look like you're coding your link to fire a javascript function, not follow a link, so it doesn't matter what it shows
0
 

Author Comment

by:peter-cooper
ID: 39618939
Let me try to explain further. I have a php page called header.php which lives in:

 /domain/admin/header.php

In my menu I have links like I posted in my original question. But for clarity, I have 2 menu options. Requests & Reports. In my Requests list there is a link for 'Add Box(es) which fires correctly. However, if I go into the Reports menu, nothing happens. So I guess what I am asking is, how do enable that link in the Reports side of the menu.

It will only bind the event to an element with an ID of addbox. If you want to bind the event on the reports link, then you'll need to bind that separately:
So I guess my question would be, why is addbox() not firing when I click the option in the menu when I am in the Reports area. Thanks
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39618943
From your question it looks like your are trying to fire 2 different JS functions, from 2 different links, so you need to bind 2 different events. This will be your HTML:

<ul>
	<li><a href="#" class="BA" id="addbox">Add Box(es)</a></li>
	<li><a href="/domain/admin/requests/boxes/index.php">Administration</a></li>
</ul>

<ul>
	<li><a href="#" class="BA" id="addfile">Add File(s)</a></li>
	<li><a href="/domain/admin/reports/boxin/index.php">Administration</a></li>
</ul>

Open in new window

And this will be your jQuery:

$('#addbox').click(function(e){
	e.preventDefault();
	addbox();
});

$('#addfile').click(function(e){
	e.preventDefault();
	addfile();
});

Open in new window

0
 

Author Comment

by:peter-cooper
ID: 39618944
@Chris
I can see the logic behind your code, but why would I need to do that.? I cannot see why this is not working with the way I have it. I should be able to to click the link on the menu and have the function fire. What am I not seeing here Chris. Thanks
0
 

Author Comment

by:peter-cooper
ID: 39618949
@Chris

From your question it looks like your are trying to fire 2 different JS functions, from 2 different links, so you need to bind 2 different events.

That is not the idea. I am trying to fire the same function from a different menu item.
0
 

Author Comment

by:peter-cooper
ID: 39618951
@Gary
I don't expect it to show addbox() but I expect it to fire. Thanks
0
 
LVL 58

Expert Comment

by:Gary
ID: 39618957
You are confusing everyone because your question keeps changing

If you have two menus like this
<ul>
      <li><a href="javascript:;" onclick="addbox(); return false" class="BA">Add Box(es)</a></li>
      <li><a href="/domain/admin/requests/boxes/index.php">Administration</a></li>
</ul>

<ul>
     <li><a href="javascript:;" onclick="addfile(); return false" class="BA">Add File(s)</a></li>
     <li><a href="/domain/admin/reports/boxin/index.php">Administration</a></li>
 </ul>

Open in new window


One link in each of those menus is firing a function

<script>
function addbox(){...}
function addfile(){...}
</script>

Open in new window


You are giving us a tidbit of information and not explaining yourself clearly.
0
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
LVL 42

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39618958
I am trying to fire the same function from a different menu item.

In your original post, you have 2 different functions - addbox() and addfile().

If you want to fire the same function, then instead of using IDs to bind the events, use a class and just bind one function:

<ul>
	<li><a href="#" class="BA addbox">Add Box(es)</a></li>
	<li><a href="/domain/admin/requests/boxes/index.php">Administration</a></li>
</ul>

<ul>
	<li><a href="#" class="BA addbox">Add File(s)</a></li>
	<li><a href="/domain/admin/reports/boxin/index.php">Administration</a></li>
</ul>

Open in new window

//bind the event to all elements with a class of 'addbox'
$('.addbox').click(function(e){
	e.preventDefault();
	addbox();
});

Open in new window

0
 

Author Comment

by:peter-cooper
ID: 39618970
I really am struggling to grasp this. Take the second <li> out of the equation and just work with addbox().

<ul>
	<li><a href="#" class="BA addbox">Add Box(es)</a></li>
	<li><a href="/domain/admin/requests/boxes/index.php">Administration</a></li>
</ul>

Open in new window


Am I correct in thinking that addbox() should fire from any area of my menu whether I am in requests, reports etc. This is what I am not seeing. Should I be able to fire addbox() if I am in another area of the menu? Thanks
0
 

Author Comment

by:peter-cooper
ID: 39618978
I have made a fiddle of menu structure: http://jsfiddle.net/RVaz4/
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39618982
OK. Lets clear up some definitions first. Forget about areas and think about pages. If you have a jQuery line like this:

$('.addbox').click(function(e) {
   e.preventDefault();
   addbox();
})

Open in new window


It will fire the click event when you click on ANY element with a class of addbox (which in turn will call your addbox() function) - no matter where in your page it is. If you have a hundred links scattered throughout your page, all with a class of 'addbox', then that event will be bound to all of them, and fire whenever you click on any of them.
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39618990
Right - have a look at this:

http://jsfiddle.net/ChrisStanyon/RVaz4/1/

I've styled any link with a class of addbox in red - and all of those will fire your function
0
 

Author Comment

by:peter-cooper
ID: 39619001
@Chris
That is not what I need to do. As an example in the code if there was no link on add files in the files menu, why can I not call addbox() which is in requests. If I only have 1 link in requests addbox() why does it not fire from files. They are 2 completely different menus and do different jobs. All I am trying to achieve, is if I am in files I need to click the add box(es) in requests/boxes and have it fire. Thanks
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39619011
@Peter - you've completely lost me. I'm now not sure what you want!!

If they are complete different menus to do completely different jobs, then why do you only ever want to fire one function!

I am trying to fire the same function from a different menu item
0
 

Author Comment

by:peter-cooper
ID: 39619021
Ok I can see that this is getting beyond confusing and I am not explaining my self clearly. As a compromise, would it be possible that if they try to click that link and they are not in the requests menu, that a popup or message could be fired. Thanks
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39619035
Peter. It may help if you explain what you want to achieve in plain language. Assuming the HTML code you've posted on the fiddle is correct, then something like this:

When a user clicks on the Add Box(es) link I need it to do xxx
When they click on the Add Files link I need it to do yyy

Forget about things like 'being in the requests menu' - that doesn't make sense. A user is never in a 'menu' - they simply click on links
0
 

Author Comment

by:peter-cooper
ID: 39619042
Actually chris, I shall accept your previous answer, because that gives me something to work with. Thanks
0
 

Author Closing Comment

by:peter-cooper
ID: 39619044
Thanks once again
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39619049
OK. Sorry I didn't understand exactly what you needed. I know it's sometimes difficult when using forums to get your requirements across succinctly.
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn how to dynamically set the form action using jQuery.

747 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now