[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 394
  • Last Modified:

html href not linking to correct location

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
peter-cooper
Asked:
peter-cooper
  • 12
  • 9
  • 2
  • +1
1 Solution
 
Ray PaseurCommented:
Maybe use explicit URLs starting with http:// ?  It's either that or you'll need to develop a dependency on the directory structure.
0
 
Chris StanyonCommented:
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
 
peter-cooperAuthor Commented:
@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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
peter-cooperAuthor Commented:
@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
 
GaryCommented:
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
 
Chris StanyonCommented:
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
 
peter-cooperAuthor Commented:
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
 
Chris StanyonCommented:
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
 
peter-cooperAuthor Commented:
@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
 
peter-cooperAuthor Commented:
@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
 
peter-cooperAuthor Commented:
@Gary
I don't expect it to show addbox() but I expect it to fire. Thanks
0
 
GaryCommented:
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
 
Chris StanyonCommented:
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
 
peter-cooperAuthor Commented:
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
 
peter-cooperAuthor Commented:
I have made a fiddle of menu structure: http://jsfiddle.net/RVaz4/
0
 
Chris StanyonCommented:
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
 
Chris StanyonCommented:
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
 
peter-cooperAuthor Commented:
@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
 
Chris StanyonCommented:
@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
 
peter-cooperAuthor Commented:
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
 
Chris StanyonCommented:
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
 
peter-cooperAuthor Commented:
Actually chris, I shall accept your previous answer, because that gives me something to work with. Thanks
0
 
peter-cooperAuthor Commented:
Thanks once again
0
 
Chris StanyonCommented:
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 12
  • 9
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now