0

I'm trying to remove quotas from displayed HTML which is generated based on AJAX response.

HTML output looks like:

<ul id="ui-id-1" tabindex="0" class="ui-menu ui-widget ui-widget-content ui-autocomplete ui-front" style="top: 342px; left: 262px; display: none; width: 881.094px;">
  <li class="ui-menu-item"><div id="ui-id-15" tabindex="-1" class="ui-menu-item-wrapper">"Test Tester" &lt;test1@null.com&gt;</div></li>
  <li class="ui-menu-item"><div id="ui-id-16" tabindex="-1" class="ui-menu-item-wrapper">"Baba Ganush" &lt;test2@null.com&gt;</div></li>
</ul>

HTML output become visible when there are returned values.

jQuery code to remove quotas:

    $( document ).ready(function() {
        if($('#ui-id-1').is(':visible')) {
            $('.ui-autocomplete.ui-front li.ui-menu-item div:contains("\"")').each(function(){
                $(this).html($(this).html().split("\"").join(""));
            });

            console.log('VISIBLE');
        }
    });

But when I have it tested it looks like f($('#ui-id-1').is(':visible')) is not triggered when outputted HTML appear on a screen.

Any clue why is not working?

JackTheKnife
  • 3,795
  • 8
  • 57
  • 117
  • If the content comes from an ajax response, why would it be visible on pageload ? – adeneo Oct 06 '16 at 17:57
  • **ajax - Update a web page without reloading the page** – Grizzly Oct 06 '16 at 17:59
  • 1
    if you change content via ajax then you need do things in ajax callback or use .on event – daremachine Oct 06 '16 at 17:59
  • @adeneo `div #ui-id-1` exists on page load (and is not visible) but list items are not – JackTheKnife Oct 06 '16 at 17:59
  • 1
    You just answered your own question. Code within `$( document ).ready()` fires on page load, and that `ui` is not visible on page load, so the `if` condition returns false. If you want that code to trigger when the `ui` _becomes_ visible, then you need to put it in the `success` method of your ajax call or in an event handler. – A. Damond Oct 06 '16 at 18:27
  • @A.Damond any tips how to get it working with `.on()`. I'm trying and can't get it glue togheter – JackTheKnife Oct 06 '16 at 21:03
  • well, in order to use [`.on()`](http://api.jquery.com/on/), you need to pass in an event name. Generally you'd hook in to either an existing event(i.e. a button click or dropdown change or something like that) or an event that you trigger yourself. Take a look at [`.trigger()`](http://api.jquery.com/trigger/). What exactly is triggering the ajax request? Is there a reason you don't want to or can't put this logic in the ajax `success` method? – A. Damond Oct 06 '16 at 21:58
  • 1
    @A.Damond ajax request/response is within RainLoop webamil core code and simple I have no clue what part of that spaghetti code is generating that particular ajax call so I have tired to get done some changes via templates – JackTheKnife Oct 07 '16 at 01:35
  • 1
    Got it. Well if you don't have access to the code that's making the `ul` visible, it becomes a lot less simple to do. Without knowing the particular details of your application, it's hard to give a specific answer, but if you look [here](http://stackoverflow.com/questions/1225102/jquery-event-to-trigger-action-when-a-div-is-made-visible), you might find something helpful - it's a similar question with a handful of potentially useful answers. Sorry to not be of more assistance! – A. Damond Oct 07 '16 at 02:42

0 Answers0