Jump to content
Sim

jQuery

Recommended Posts

It's been so long that I have paid with jQuery or JavaScript I am already experiencing some serious issues 

I'm trying to load the URL associated with my nav links(not all links, only nav links) into a certain div in my html. There is nearly 40links total

I added the id="#nav-link" to the links.

Partial Nav link HTML:

                    

<div class="tab-pane" id="topnav-tab2" role="tabpanel">
  <ul class="php__links nav nav-justified">
    <li class="nav-item"><a class="nav-link" href="characters.html" id="#nav-link">Character</a></li>
    <li class="nav-item"><a class="nav-link" href="inventory.html" id="#nav-link">Inventory</a></li>
    <li class="nav-item"><a class="nav-link" href="battle.html" id="#nav-link">Battle</a></li>
    <li class="nav-item"><a class="nav-link" href="upgrade.html" id="#nav-link">Upgrade</a></li>
  </ul>  
</div>

The JS"

$(document).ready(function(){

  $('#nav-link').click(function(e){
    alert($('#nav-link').attr('href'));
      e.preventDefault();
alert($('#nav-link').attr('href'));
        $("#php__container").load($(this).attr('href'));
    });
});

 

The DIV HTML: ADDED id   

<div class="php__container" id="php__container">

The problem is it loads the URL I click THE FIRST TIME. The SECOND TIME I click ANY link except the 1st one. It loads the page.

IF I CLICK the FIRST LINK it shows my alert and doesntoad the contents at all. 

So several issues:

Share this post


Link to post
Share on other sites
Posted (edited)

1. You are incorrectly assigning elements with the same id. It should only exist on the DOM once - https://css-tricks.com/the-difference-between-id-and-class/

2. You do not need the # in the id value - you're confusing things here

3. You can use child selectors in jQuery, since your HTML is constructed in a particular way, we can target with .php__links > li > a https://api.jquery.com/child-selector/

4. When you are in a callback from a selector, you can use $(this) to use the context instead of reselecting https://stackoverflow.com/a/12481556/3000179

Here is a fiddle of the fixed code: https://jsfiddle.net/ebjz32tq/

Edited by sniko
  • Like 3

Share this post


Link to post
Share on other sites

Fiddle definitely want made for mobile devices. You know how hard it is for me to view anything on fiddle yet alone copy paiste anything?

Screenshot_20200621-092456.thumb.png.595dbc11c5d9a21d8ee713f75d9a67b9.png

Edit: thanks for the very descriptive post. The read was as I thought. IDs must be unique and the parent, child thing (while looking at examples).

So my HTML: I had

    <div class="php__container" id="php__container">

I put it back to original way:

    <div class="php__container">

 

The problem now it's that or doesn't load the URL in the container when clicked. It does provide the correct URL though other alert.

Share this post


Link to post
Share on other sites
Posted (edited)

Anyone, both issues (this and other post) I have are stopping my development of anything right now?

Edited by Sim

Share this post


Link to post
Share on other sites
1 hour ago, Magictallguy said:

Restore the php__container ID to that div and alter your anchor IDs

What exactly do to mean?

Share this post


Link to post
Share on other sites
1 hour ago, Sim said:

What exactly do to mean?

Put id="php__container" back into the div from which you removed it.
Change the <a> tag id attributes - they don't need an octothorpe and they must be unique

Share this post


Link to post
Share on other sites

I don't see why it doesn't load the content. The alert displays the correct URL. So unsure what exactly yo mean

HTML:

            <div class="php__container" id="#php__container">

 

                    <div class="tab-pane" id="topnav-tab2" role="tabpanel">
                        <ul class="php__links nav nav-justified">
                            <li class="nav-item"><a class="nav-link" href="characters.html">Character</a></li>
                          <li class="nav-item"><a class="nav-link" href="inventory.html">Inventory</a></li>
                            <li class="nav-item"><a class="nav-link" href="battle.html">Battle</a></li>
                            <li class="nav-item"><a class="nav-link" href="upgrade.html">Upgrade</a></li>
                        </ul>  
                    </div>

 

JavaScript:

$(document).ready(function() {

  $('.php__links > li > a').click(function(e) {
    e.preventDefault();
    alert($(this).attr('href'));
    $("#php__container").load($(this).attr('href'));
  });
});

I got it figured out. I included my JavaScript after my css file 🙂

I included it in the wrong spot somewhere. 🙂

Share this post


Link to post
Share on other sites

you must have included it before Jquery file, try using consol.log() to debug js the consol will show you any error, not sure if it work on phone

Share this post


Link to post
Share on other sites
2 hours ago, ags_cs4 said:

you must have included it before Jquery file, try using consol.log() to debug js the consol will show you any error, not sure if it work on phone

There was no error. Why it had me fooled for a minute. And it was after the jQuery.

Share this post


Link to post
Share on other sites
Posted (edited)

You don't need to use the anchor tags in the selector because each item has a class already, which can be used.

 

$(function() {
  $('.nav-link').click(function(e) {
    e.preventDefault();
    $("#php__container").load($(this).attr('href'));
  });
});
	

Edited by SRB

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...