CODEWITHSUNDEEP
javascriptjqueryhtmldom
kryptobs2000
kryptobs2000

Reputation: 3537

How can I prevent the request going through on a href using jquery?

Maybe I'm trying to go about this the wrong way, but I've set my server up to build the pages if requested (if JS is not enabled basically), otherwise I want it to send the requested page and then the JS should override the main navigation to just request and display the contents using jQueries .load function.

I already have a helper function to make the request and display the results, it simply needs a string as input, which is the name of the page. Upon loading the page I have the $.each statement run to set the hrefs up, but upon inspecting the DOM it doesn't seem to show up, I'm not sure why. 

var $menuAnchors = $("#menu a");
$.each($menuAnchors, function (index, value) {
if (index == 0) {
  $menuAnchors.eq(0).click('home', setCurrentPage);
}
if (index == 1) {
  $menuAnchors.eq(1).click('services', setCurrentPage);
}
if (index == 2) {
  $menuAnchors.eq(2).click('contact', setCurrentPage);
}

})

It's reaching within the if statements just fine, so I must be using the .click function wrong, however I've also tried applying it with the .attr function and it does then show up in the dom, but it doesn't seem to work properly. If I manually call the function to change the page it works fine, so I'm assuming at this point that perhaps both of the event triggering methods are working, but maybe it's still sending the request through to the server and I need to stop the event from propigating? If so how would I do that? Can I do it within this if statement, or would I have to modify my evenhandler function? Here is that function btw:

var setCurrentPage = function(page) {

//change contents
var $content = $("#content");
$content.empty();
$content.load("/html/ajax/" + page + ".html");

//set menubar class
var $listItems = $("#menu li");
$.each($listItems, function (index, value) {
  $listItems.eq(index).removeAttr("class");
  if (page == "home" && index == 0) {
    $listItems.eq(index).attr("class", "current");
  }
  if (page == "services" && index == 1) {
    $listItems.eq(index).attr("class", "current");
  }
  if (page == "contact" && index == 2) {
    $listItems.eq(index).attr("class", "current");
  }
  })

}

Upvotes: 0

Views: 167

Answers (2)

anthonyryan1
anthonyryan1

Reputation: 5496

Based on your clarification, I still feel something like this would be the best approach from a maintenance standpoint, if someone is changing the links they see the pagename parameter right where they're editing the link.

Example HTML:

<div id="menu">
    <a href="/" data-pagename="home">Home</a>
    <a href="/about.html" data-pagename="about">About</a>
</div>

Example JavaScript:

$('#menu a').click(function(){
    setCurrentPage($(this).data('pagename')))
    return false;
});

A side effect of this is that you could completely decouple this approach from the #menu, in my example bellow, anywhere you add data-pagename="something" to a link, that link would instantly use setCurrentPage instead.

$('a[data-pagename]').click(function(){
    setCurrentPage($(this).data('pagename')))
    return false;
});

Upvotes: 0

Snuffleupagus
Snuffleupagus

Reputation: 6725

When a jQuery event is fired, jQuery will pass an event object to that method as the first (and only) argument.

The first issue is that your "page" argument of setCurrentPage isn't the href, it's the event object.

So let's go ahead and clean up the function to var setCurrentPage = function(e) { Now, the data you're passing into click with the first argument is accessible via e.data, so simply change any references of page to e.data.

Finally, to make it so the link isn't traveled to, you can call e.preventDefault().

(extra point: removeClass can be called on a collection of elements, no need to traverse with each. When an event is fired, this will refer to the HTML element that the event occurred on so we can force the current class with that.).

Final code ends up looking like

function setCurrentPage(e) {
    //change contents
    var $content = $("#content");
    $content.empty();
    $content.load("/html/ajax/" + e.data + ".html");
    //set menubar class
    $("#menu li .current").removeClass('current');
    $(this).addClass('current');
}

Upvotes: 1

Related Questions