jQuery Ajax round #2

[Sim]

So I needed to turn every URL on my page into a jQuery/Ajax link (WHICH PARTIALLY WORKS).

Every link works except for any new links(ones that get loaded from my Ajax call). So say I load ?page=crimes

It will load perfectly in my php__cointainer. 

But now when the module HTML loads.

Say the crimes, yo click the commit button URL ex: ?page=crimes&action=commit&crime=1

The Ajax no longer works. It loads a fresh page.

var jq = $.noConflict();

jq(document).ready(function() {
  jq('a').on('click', function(e) {
    var url = jq(this).attr('href');
    if(url.includes("?"))
    {
      e.preventDefault();
      alert(url);
      jq("#php__container").load(url);
    }
    else
    {
      alert ("no url");
    }
  });
  
  update_stats();
  
});

 

[sniko]

1. Make use of return statements so you don't need unnecessary if/else blocks

2. Look into Javascript linter (ie: eslint) so you have a consistent style and spacing in your code

3. Wtf is  `vvvvvv`? That does not look correct. It looks like you want to check if the url has a query string. Use the native browser API for for this - `location.search`

Edited June 26, 2020 by sniko

[Sim]

My code spacing is correct before I post it in here.

#2 the vvvvvs was correct JS before posted here. It read URL.includes

The unnecessary it's will be removed over done texting.

 

BUT most importantly you mentioned everything but anything regarding the question at hand 

[sniko]

45 minutes ago, Sim said:

BUT most importantly you mentioned everything but anything regarding the question at hand 

I did, I asked what `vvvvv` was about. Also for better help please start posting a minimal, reproducible example and adding more details to help debug the issue.

[AdamHull]

Does your inspector throw any errors? 

[Sim]

There is no errors in the code what so ever.

 

I click a link, it loads my NEW PAGE WITH LINKS using Ajax.

 

The NEW LINKS that APPEAR on the NEW LOADED content don't load with Ajax. 

My guess is, the JavaScript code is not binded(terminology?) to the new content loaded?

Edit: edited main post to fix vvvv things and removed commented code.

[SRB]

var jq = $.noConflict();

jq(function() {
  jq(document).on('click', 'a', function(e) {
    e.preventDefault();

    var url = jq(this).attr('href');

    if (url.includes("?")) {
      jq("#php__container").load(url);
    }
  });

  update_stats();
});

You need to attach to something higher than what you are re-writing. You can't re-write the dom and expect to still be attached to it.

Edited June 28, 2020 by SRB

[Sim]

Aight, I have gotten it to work to some extent. Once my content gets loaded into the php__cointaner div, I can get the link recognized with this new code. I watch it load the new content inside the div, then it redirects :(. So.. preventDefault isn't working properly.

var jq = $.noConflict();

jq(document).ready(function() {
  
  jq('a').on('click', function(e) {
    var url = jq(this).attr('href');
    if(url.includes("?"))
    {
      e.preventDefault();
      jq("#php__container").load(url);
    }
  });
 
 jq('#php__container').click(function(e){
    if (jq(e.target).is('a'))
    {
      
      e.preventDefault;
      
      var url = e.target.href;
     
      jq("#php__container").load(url);
      //alert(url);
    }
    
 }); 
  
 // update_stats();
  
});

 

[gamble]

Assuming the previous post is your exact code, you are missing the parenthesis after preventDefault.

[Sim]

24 minutes ago, gamble said:

Assuming the previous post is your exact code, you are missing the parenthesis after preventDefault.

Lol, thanks. I can't believe I overlooked that.