jQuery

[Sim]

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:

[sniko]

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 June 21, 2020 by sniko

[Sim]

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?

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.

[Sim]

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

Edited June 22, 2020 by Sim

[Magictallguy]

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

[Sim]

1 hour ago, Magictallguy said:

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

What exactly do to mean?

[Magictallguy]

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

[Sim]

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. 🙂

[ags_cs4]

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

[Sim]

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.

[SRB]

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 June 23, 2020 by SRB

[Magictallguy]

ID DON'T NEED #!
AAAAAAAAAA

[Sim]

What is the AAAAAA

[Magictallguy]

3 hours ago, Sim said:

What is the AAAAAA