0

I'm attempting to change the data-target attribute of an a tag based on the content of a corresponding div. I've tested a few different avenues and believe this to be the cleanest. However, as this is modifying multiple entries, only the first entry's data-target is being updated and it's being modified to market, rather than to affordable. The .html and .css changes are working as expected. It's only the data-target element that is causing an issue. You can see other variations of what I've tried commented out below.

jQuery(document).ready(function ($) { //replaces all instances of $ with jquery for Wordpress
    $(".unit-rate-mapped div").each(function () {
        if ($(this).is(':contains("mk")')) { //Only Market Rate units codes will contain mk
            $(this).html('Market Rate'); //Change the HTML value to Market Rate
            $(this).css({ "background": "rgba(4,57,99,.1)", "color": "#043963" });
            $('#unit-qual-link').attr('data-target', '.fusion-modal.form-market'); //modify the data-target attribute of the pre-Qualify link to link to the market form
            //document.getElementById("unit-qual-link").dataset.target = ".fusion-modal.form-market"; 
        } else { //Anything and everything else goes to orange
            $(this).html('Affordable'); //Change the HTML value to Affordable
            $(this).css({ "background": "rgba(229,104,53,.1)", "color": "#e56835" }); //Change the background color and type to orange
            $('#unit-qual-link').attr('data-target', '.fusion-modal.form-affordable'); //modify the data-target attribute of the pre-Qualify link to link to the afforrdable form
            //document.getElementById("unit-qual-link").dataset.target = ".fusion-modal.form-affordable"; //modify the URL of the Pre-Qualify link to link to the affordable form
        }
    });
//Tried this variation as well
    // if ($(".unit-rate-mapped div:contains('Market Rate')")) {
    //     $('#unit-qual-link').attr('data-target', '.fusion-modal.form-market');
    // } else {
    //     $('#unit-qual-link').attr('data-target', '.fusion-modal.form-affordable');
    // }
});

Here's an example of the HTML I'm looking to modify:

<!--Market Example-->
<div class="essential-grid-unit-row-grid row-1">
    <div class="unit-rate-mapped">
        <div class="unit-rate-map">mk1234</div>
    </div>

    <div class="unit-qualifications">
<a id="unit-qual-link" class="fusion-modal-text-link" data-toggle="modal" data-target=".fusion-modal.form-market" href="#">Pre-Qualify</a></div>
</div>

<!--Affordable Example-->
<div class="essential-grid-unit-row-grid row-1">
    <div class="unit-rate-mapped">
        <div class="unit-rate-map">1b1b60</div>
    </div>

    <div class="unit-qualifications">
<a id="unit-qual-link" class="fusion-modal-text-link" data-toggle="modal" data-target=".fusion-modal.form-market" href="#">Pre-Qualify</a>
</div>
</div>

Edited to include @freedomn-m's recommendations, but the data attributes are coming back blank:

jQuery(document).ready(function ($) { //replaces all instances of $ with jquery for Wordpress
    $(".unit-rate-mapped div").each(function () {
        if ($(this).is(':contains("mk")')) { //Only Market Rate units codes will contain mk
            $(this).html('Market Rate'); //Change the HTML value to Market Rate
            $(this).css({ "background": "rgba(4,57,99,.1)", "color": "#043963" });
            $('#unit-qual-link').data('target', '.fusion-modal.form-market'); //modify the data-target attribute of the pre-Qualify link to link to the market form
            //document.getElementById("unit-qual-link").dataset.target = ".fusion-modal.form-market"; 
        } else { //Anything and everything else goes to orange
            $(this).html('Affordable'); //Change the HTML value to Affordable
            $(this).css({ "background": "rgba(229,104,53,.1)", "color": "#e56835" }); //Change the background color and type to orange
            $('#unit-qual-link').data('target', '.fusion-modal.form-affordable'); //modify the data-target attribute of the pre-Qualify link to link to the afforrdable form
            //document.getElementById("unit-qual-link").dataset.target = ".fusion-modal.form-affordable"; //modify the URL of the Pre-Qualify link to link to the affordable form
        }
    });
//Tried this variation as well
    // if ($(".unit-rate-mapped div:contains('Market Rate')")) {
    //     $('#unit-qual-link').attr('data-target', '.fusion-modal.form-market');
    // } else {
    //     $('#unit-qual-link').attr('data-target', '.fusion-modal.form-affordable');
    // }
});

Result with blank data-target:

<a id="unit-qual-link" class="fusion-modal-text-link" data-toggle="modal" data-target="" href="#" data-uw-styling-context="true">Pre-Qualify</a>
S-Miles
  • 35
  • 1
  • 9
  • jQuery caches `$(..).data("target")` so changing the *attribute* will not have any affect on any jquery code that has already ready that value. You should always change `data-` with `$("..").data("target", new_value)`. *However* it's unclear if your modal handler (bootstrap?) will have already read *and cached* that value itself. – freedomn-m Aug 03 '21 at 16:32
  • Thanks @freedomn-m, I'll have a look at changing up the syntax and report back! – S-Miles Aug 03 '21 at 22:32
  • @freedomn-m edited my response above to include your edits, but I'm getting a blank data attribute result. – S-Miles Aug 03 '21 at 22:52
  • Using `.data("name", value)` will update the cache - there's no need to update the html. See: https://stackoverflow.com/a/7262427/2181514 – freedomn-m Aug 04 '21 at 07:20
  • Thanks @freedomn-m. I believe I understand the concept here, but correct me if I'm wrong. It sounds like you're trying to update the cached value of the data-target, instead of updating the value in the HTML to ensure that our data-target value is up to date. However, when I attempt to click on the update value, because the data-target in the html does not have a value, bootstrap's modal gives me an error: unrecognized expression: #, due to the html data-target attribute not having a value. In order for the modal to work, I need the data-target to have a value. Any further suggestions? – S-Miles Aug 04 '21 at 21:42
  • @freedomn-m Any further suggestions? – S-Miles Aug 11 '21 at 20:24

1 Answers1

0

Alright, I found a solution. In short, I was making my logic call too late in the HTML hierarchy. I wasn't properly targeting children of the .unit-rate-map class because it doesn't have children. Here's the cleaned up HTML for reference:

<!--Market Example-->
<div class="essential-grid-unit-row-grid row-1">
  <div class="unit-rate-mapped">
    <div class="unit-rate-map">mk1234</div>
  </div>

  <div class="unit-qualifications">
    <a class="fusion-modal-text-link unit-qual-link" data-toggle="modal" data-target=".fusion-modal.form-affordable" href="#">Pre-Qualify</a>
  </div>
</div>

<!--Affordable Examples-->
<div class="essential-grid-unit-row-grid row-1">
  <div class="unit-rate-mapped">
    <div class="unit-rate-map">1b1b60</div>
  </div>

  <div class="unit-qualifications">
    <a class="fusion-modal-text-link unit-qual-link" data-toggle="modal" data-target=".fusion-modal.form-affordable" href="#">Pre-Qualify</a>
  </div>
</div>
<div class="essential-grid-unit-row-grid row-1">
  <div class="unit-rate-mapped">
    <div class="unit-rate-map">2b1b60</div>
  </div>

  <div class="unit-qualifications">
    <a class="fusion-modal-text-link unit-qual-link" data-toggle="modal" data-target=".fusion-modal.form-affordable" href="#">Pre-Qualify</a>
  </div>
</div>
<div class="essential-grid-unit-row-grid row-1">
  <div class="unit-rate-mapped">
    <div class="unit-rate-map">3b1b60</div>
  </div>

  <div class="unit-qualifications">
    <a class="fusion-modal-text-link unit-qual-link" data-toggle="modal" data-target=".fusion-modal.form-affordable" href="#">Pre-Qualify</a>
  </div>
</div>

<!--Market Example-->
<div class="essential-grid-unit-row-grid row-1">
  <div class="unit-rate-mapped">
    <div class="unit-rate-map">mk12345</div>
  </div>

  <div class="unit-qualifications">
    <a class="fusion-modal-text-link unit-qual-link" data-toggle="modal" data-target=".fusion-modal.form-affordable" href="#">Pre-Qualify</a>
  </div>
</div>

<!--Affordable Example-->
<div class="essential-grid-unit-row-grid row-1">
  <div class="unit-rate-mapped">
    <div class="unit-rate-map">1b1b60</div>
  </div>

  <div class="unit-qualifications">
    <a class="fusion-modal-text-link unit-qual-link" data-toggle="modal" data-target=".fusion-modal.form-affordable" href="#">Pre-Qualify</a>
  </div>
</div>

And the corresponding JQuery:

jQuery(document).ready(function ($) { //replaces all instances of $ with jquery for Wordpress
    $(".essential-grid-unit-row-grid").each(function () {
        if ($(this).find(".unit-rate-map").is(':contains("mk")')) { //Only Market Rate units codes will contain mk
            $(this).find(".unit-rate-map").html('Market Rate'); //Change the HTML value to Market Rate
            $(this).find(".unit-rate-map").css({ "background": "rgba(4,57,99,.1)", "color": "#043963" });
            $(this).find(".unit-qual-link").attr("data-target", ".fusion-modal.form-market");
        } else { //Anything and everything else goes to orange
            $(this).find(".unit-rate-map").html('Affordable'); //Change the HTML value to Affordable
            $(this).find(".unit-rate-map").css({ "background": "rgba(229,104,53,.1)", "color": "#e56835" }); //Change the background color and type to orange

        }
    });
});

I targeted .essential-grid-unit-row-grid and then used $(this).find() to call specific children of that class in the .each() loop.

Here's a working Fiddle: https://jsfiddle.net/3mqhudca/4/

S-Miles
  • 35
  • 1
  • 9