Re-directing to dynamic href in PHP script using JavaScript

Question

I have a drop down user menu that contains child links that I cannot get to redirect properly. I unfortunately did not code the front-end, so I'm just trying to get it to link to dynamic PHP urls. I'm also working within the CodeIgniter framework, by the way. There are two clicks in the user's process (similar to Google's user icon). 1. You click the user image and drop down arrow, 2. You see profile, settings, logout.

With the following script, clicking the drop-down arrow redirects to the first link, profile, without even doing the drop-down animation. Any thoughts?

Here's the PHP file:

<div class="user css3"> 
<a href="" class="css3"> <img src="images/user.jpg" alt="user" class="css3" /> </a>
    <div class="child css3">
      <ul class="user_links">
        <li><a href="<?=base_url()?>/profile/view/<?=$userID?>/myfeed">Profile</a></li>
        <li><a href="<?=base_url()?>/settings/">Settings</a></li>
        <li><a href="<?=base_url()?>/login/logout">Logout</a></li>
      </ul>
    </div>
  </div>

Here's the JavaScript for drop-down arrow button:

$('div.user').click(function() {
    $('div.user div.child').slideToggle("fast");
    $('div.live div.action div.category div.child, div.live div.action div.sort div.child').slideUp();
    return false;
});

Here's the JavaScript that I came up with for the <ul> (I'm not much of a JS dev. haha):

$('ul.user_links li a').click(function() {
    document.location($(this).attr("href"));
});

Any thoughts are greatly appreciated!

Why do you need JavaScript here? I mean, the code you posted is not necessary, the anchors will take the user to their href URL without any js. — bfavaretto
– bfavaretto, Commented May 11, 2012 at 1:55
@MarcB The drop-down arrow is supplied in the CSS via the class. — JamieHoward
– JamieHoward, Commented May 11, 2012 at 1:57
@bfavaretto I'll add the JS for the for the drop down button that is working, but apparently dis-allowing the <a> to actually to work on these <li>' — JamieHoward
– JamieHoward, Commented May 11, 2012 at 1:58
@MarkLinus I don't have something available at the moment. It's a locked down project for right now. I'll see if I can throw something together though. — JamieHoward
– JamieHoward, Commented May 11, 2012 at 2:02

bfavaretto · Accepted Answer · 2012-05-16 21:25:37Z

2

I said in the comments:

Remove the js for the <ul>, and then return false from the other block, and it should work.

Here is why: when you click an anchor, the event starts propagating upwards through the document structure (the DOM). When it reaches another element wired to catch the click event, it runs this element's event handler.

When you click the anchor, the click handler on div.user runs. The last statement there, return false, means "stop the event propagation, and prevent the default behavior". On an anchor, the default behavior would be to follow the link. Your code told the browser not to do it.

edited May 16, 2012 at 21:25

answered May 11, 2012 at 3:10

bfavaretto

72k18 gold badges118 silver badges162 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abdullah Jibaly · Accepted Answer · 2012-05-11 02:06:24Z

0

Not sure if this is the root cause, but anyways use:

window.location = $(this).attr("href");

Instead of

document.location($(this).attr("href"));

answered May 11, 2012 at 2:06

Abdullah Jibaly

55.2k45 gold badges129 silver badges202 bronze badges

Comments

Grub · Accepted Answer · 2012-05-11 02:10:03Z

0

try adding an onclick event to the drop down that returns false, thus stopping the default action for links.

<a href="" class="css3" onclick="javascript:return false"> <img src="images/user.jpg" alt="user" class="css3" /> </a>

Or changing it so it's just a 'span' tag instead of a 'a' tag. You'd have to change the JQuery selector that causes the drop down as well so that it looks for 'span' instead of 'a'

I'm not sure why you need change the default behaviour of the links 3 links though, they would redirect to the href location anyway surely?

edited May 11, 2012 at 2:10

answered May 11, 2012 at 2:03

Grub

8932 gold badges11 silver badges21 bronze badges

3 Comments

JamieHoward Over a year ago

Thanks, I'll try this! Yeah, I'm not sure why the JS code isn't allowing them to "just work", haha. I was hoping to just slap the dynamic URLs in there, but it doesn't redirect at all.

Grub Over a year ago

@blackairplane sorry, i had the 'span' and 'a' missing from previous answer cos i put html tags round it! edited it now. It'll prob work if you remove the click handlers. See Abdullahs answer. I'm guessing the drop down arrow being a link is casing problems though so either nullify the 'onclick' event as described above or change it to a 'span' tag

JamieHoward Over a year ago

Thanks for the tips! Actually ended up being @bfavaretto's simple fix above.

Collectives™ on Stack Overflow

Re-directing to dynamic href in PHP script using JavaScript

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related