Using javascript in SPA’s ( Single Page Apps like react.js)

In SPA’s ( Single page apps like react.js ) content loads dynamically. This means we don’t know exactly when the content you would want to change would appear. Use the spaCheck function to easily target content once it exists.

sitegainer.spaCheck({

    /* Mandatory */

    element:'.right-content h4', /* If element ".right-content h4" exists */

    /* Optional settings below */

    contains:"Belt", /* And HTML of element contains the word "Belt" (Default: Any content) */
    doesNotContain:"Your new text", /* And HTML of element does not contain the word "Your new text" (Default: Any content) */
    interval:100, /* Check every 100ms (Default: 100ms) */
    timeout:1000, /* Stop checking after 1000ms  (Default: No timeout) */
    clearOnDocumentReady:false /* Stop checking when document ready is reached (Default: False) */

}, function() {
    /* Your javascript / jQuery code */
    $('.right-content h4').text("Your new text");
});

A simple example:
This example will check if ‘.right-content’ exists every 100 milliseconds (default) until it finds it, then check if the element does not contain ”We now have free shipping” and then add ”We now have free shipping”. After 1000ms ( 1 sec) it will stop checking. This is very useful in SPA’s as content from prior changes might be left.

sitegainer.spaCheck({
    element:'.right-content',
    doesNotContain:"We now have free shipping",
    timeout:1000,
}, function() {
    $('.right-content h4').after("We now have free shipping");
});

An even simpler example:
This example will check if ‘.right-content’ exists every 100 milliseconds (default) until it finds it. After 1000ms ( 1 sec) it will stop checking. This is very useful when a SPA change page and the SiteGainer uses ”Single Page App mode” to do a simulated dynamic page load, but the element you are targeting might not be available directly.

sitegainer.spaCheck({
    element:'.right-content',
    timeout:1000,
}, function() {
    $('.right-content h4').after("We now have free shipping");
});