CODEWITHSUNDEEP
javascriptjquery
Lord Nazo
Lord Nazo

Reputation: 37

How to execute function when element changes? (Without setInterval)

I've tried configuring my script to automatically click certain buttons on a page depending on what type of report is being shown (which is the text of the span element .reportReason).

Here's an example of what the page typically looks like: http://www.blankmediagames.com/Trial/viewReport.php?id=1409368 (I can't link the page to vote on reports since there is an excessive requirement that must be met by playing a game.)

After voting on a report, the webpage will remove all of the current report content and load all of the data from another report via Jquery. While it's loading the report (or while a report has not loaded), it sets all of the child div values of #reportInfo to "--" and removes all of the inner span classes from #reportContent.

This is the code for my script: 

    switch ($('.reportReason').text()) {
    case "Inappropriate Username":
        //This is an INAPPROPRIATE USERNAME report
        reportIU();
        break;
    case "Spamming":
        //This is a SPAMMING report
        reportSpamming();
        break;
    case "Leaving":
        //This is a LEAVING report
        reportLeaving();
        break;
    case "Multi-accounting":
        //This is a MULTI-ACCOUNTING report
        reportMulti();
        break;
    default:
        //Report hasn't loaded or report type is 'Other'
        break;
}

I want to make it so that the switch statement will execute every time the text of the span element .reportReason changes and not after a set interval. Is there any way this can be done?

Upvotes: 0

Views: 2004

Answers (2)

zer00ne
zer00ne

Reputation: 43880

MutationObserver API

If .reportReason was a form control such as an input, textarea, checkbox, etc, it'd be far easier to access its data upon an event than it would with a span. Form controls have specialized events such as change, and input which deal with text, but then again that would depend upon user interaction which probably doesn't apply to your situation (in a direct manner at least).

Assuming that the text itself was from a source you have little or no control over, we will start at span.reportReason and determine when text has been inserted within. I suggest in the future that you trace the steps necessary to find the origin of the text itself. I'm sure this is an XY Problem.

In order to monitor changes that occur upon span.reportReason we can use the MutationObserver API. In the following Demo an observer is created to detect any changes of span.reportReason content. It will log changes as text is added or removed. Note: all lines that have a console.log(...) statement are the places you should place any calls to your functions. I wasn't about try to find those functions in the switch() so they were replaced by console.log which is sufficient proof that the code functions properly.

Demo

There are portions of the code marked: "TEST NOT REQUIRED" which means it's just included for demo purposes and it's not required for the solution itself.

var tgt = document.querySelector('.reportReason');
var cfg = {
  attributes: false,
  childList: true,
  characterData: true
};

var monitor = new MutationObserver(function(changes) {
  changes.forEach(function(change) {
    console.log();
    for (let i = 0; i < change.addedNodes.length; i++) {
      console.log(`MUTATION TYPE: ${change.type} | "${change.addedNodes[i].textContent}" added`);
    }

    for (let i = 0; i < change.removedNodes.length; i++) {
      console.log(`MUTATION TYPE: ${change.type} | "${change.removedNodes[i].textContent}" removed`);
    }
  });
});


monitor.observe(tgt, cfg);

function reportReason(e) {

  const flag = $('.reportReason').text();

  switch (flag) {
    case "Inappropriate Username":
      console.log(`‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
REASON: Username sux.`);
      break;
    case "Spamming":
      console.log(`‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
REASON: User is spamming scum.`);
      break;
    case "Account not validated":
      console.log(`‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
REASON: User has not validated account yet.`);
      break;
    case "Multiple accounts":
      console.log(`‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
REASON: User has multiple accounts, delete all but the newest account.`);
      break;
    default:
      console.log(`‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
REASON: Specific Flag: ${flag}`);
      break;
  }
}



// 🠋TEST NOT REQUIRED🠋

$('button').on('click', function() {
  let flag = $('#test').val();
  $('.reportReason').text(flag);
  reportReason();
});

// 🠉TEST NOT REQUIRED🠉
.as-console-row:after {
  display: none !important
}

select,
button {
  font: inherit
}
<!--🠋TEST NOT REQUIRED🠋-->
<fieldset class='set'>
  <legend>Test</legend>
  <select id='test'>
    <option></option>
    <option>Inappropriate Username</option>
    <option>Spamming</option>
    <option>Account not validated</option>
    <option>Multiple accounts</option>
    <option>Other Reason...</option>
  </select>
  <button type='button'>TEST</button>
</fieldset>
<!--🠉TEST NOT REQUIRED🠉-->

<div>
  <span class="rititle">Reported Reason:</span>
  <span class="rivalue">
    <span class="reportReason"></span>
  </span>
</div>




<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 0

SirPilan
SirPilan

Reputation: 4847

Tadaa :)

$( '#btn' ).click( function() {
  // simulate ajax change
  if( $( 'div#test' ).text() != "a" ) {
    $( 'div#test' ).text( "a" );
  }
} );

$('div#test').on('DOMNodeInserted',function() {
  console.log('div changed!');
  
  // do your switchy stuff
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Div:
<div id='test'>Some randome content.</div><br/>
<br/>
<input id='btn' type='button' value='Change div content'/>
<br/>

Upvotes: 1

Related Questions