ajax在页面上加载两个div而不是指定的div

Question

I have a PHP page with the following two divs, and I am trying to load the content with a click event here and then conditional:

 if (ballResult == 'W') { // processing wide $.ajax({ url: "loads/scorer_soft_load.php #extrWideLoad", cache: false, success: function(html) { $("#scoreBt").html(""); $('#scoreBt').append(html); }, // call back function after ajax request complete complete: function() { } }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="extraScoreLoad"> <h3 class="gmu-heading" id="extrHeading"><span class="badge badge-secondary">Any extra</span></h3> <button>nb</button> </div> <!------load for wide--------> <div id="extrWideLoad"> <h3 class="gmu-heading" id="extrHeading"><span class="badge badge-secondary">Any extra</span></h3> <button>w</button> </div> 

I am doing the same for the other div just changing the URL to loads/scorer_soft_load.php #extraScoreLoad .

Answer 1

url: "loads/scorer_soft_load.php #extrWideLoad"

You're trying to apply a selector in the URL. (Not to be confused with a fragment identifier.) URLs don't really work like that. It's going to return all of the content, you'd need to apply a selector after you receive the content. For example:

$.ajax({
  url: "loads/scorer_soft_load.php",
  cache: false,
  success: function(html){
    $("#scoreBt").html("");
    var filteredHtml = $('#extrWideLoad', html); // <--- here
    $('#scoreBt').append(filteredHtml);
  }
});

i have use this technique with .load and it have worked in past.

That's because .load() does this client-side selector logic for you .