0

I found a code in answer 9 of this thread that replaces text in an element. In my case the text is in an li within a div class: 

<div class="div-a">
   <div class="div-b">
      <ul class="list-unstyled">
         <li>This is a foo list</li>                             
      </ul>
   </div>
</div>

$('.div-a .list-unstyled').html($('.div-a .list-unstyled').html().replace('foo','bar'));

I got it working in JSFiddle.

On the actual site there is an external page loaded with javascript (in which I need to replace one word). I put the code between <script></script> tags after the script that loads the page, but I can't get it to work.

So my question is: where and how do I put this code on the actual page?

Jan FtFA
  • 1
  • 4

1 Answers1

0

$(document).ready(function(){
     $('.div-a .list-unstyled').html($('.div-a .list-unstyled').html().replace('foo','bar'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div-a">
   <div class="div-b">
      <ul class="list-unstyled">
         <li>This is a foo list</li>                             
      </ul>
   </div>
</div>

The code you added is using another javascript library called jquery. You have to call the library before your <script> tags.

<div class="div-a">
   <div class="div-b">
      <ul class="list-unstyled">
         <li>This is a foo list</li>                             
      </ul>
   </div>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
<script type="text/javascript">
    $('.div-a .list-unstyled').html($('.div-a .list-unstyled').html().replace('foo','bar'));
</script>

Here I have added the jquery CDN but best practise will be to download jquery and call it as external js file.

vimuth
  • 5,064
  • 33
  • 79
  • 116
  • If I use the first code `$(document).ready(function() etc` on a test page, it works fine. But if I use it on the actual page it is not working. On the actual page an external page is loaded as follows: `` After this I call the library and the script to change the text. The external page loads fine, but changing the text does not work Is this method may be not working with external pages? – Jan FtFA May 08 '20 at 10:08
  • Have you used – vimuth May 08 '20 at 10:11
  • you can debug by right click browser and click inspect element. In console tab there you can check what is the error – vimuth May 08 '20 at 10:12
  • I tried both: ` – Jan FtFA May 08 '20 at 11:27
  • For both the error in the console on the actual page is different: `3.3.1` gives: "jQuery.Deferred exception: $(...).html(...) is undefined @https://..." while `1.4.2` gives: "Loading failed for the – Jan FtFA May 08 '20 at 11:35
  • Think more details are needed like what are the js libs called and where they are called to fix the issue. – vimuth May 08 '20 at 12:13
  • The jQuery that is used is 1.12.4, the standard wordpress jQuery which is included in WP. – Jan FtFA May 09 '20 at 14:24
  • think either jquery loaded twise or script has loaded before jquery. – vimuth May 09 '20 at 14:34
  • I observed something peculiar: If I add the foo/bar test line to the actual page, the foo/bar replacement code is working, even with the replacement code for the actual (external) page in place. In that case also the "jQuery.Deferred exception:..." error is not shown although the replacement action on the actual page is not executed. It looks the error comes from the combination externally loaded page with Javascript <-> jQuery replacement instruction. – Jan FtFA May 09 '20 at 14:43
  • Which brings me to the question: is it at all possible to change something in a loaded external page with JS/jQuery? (CSS styling is working though) – Jan FtFA May 09 '20 at 14:50