0

I have looked at numerous questions to this problem, using parent, child, sibling, closest etc and I cannot get any to work.

I have a list and each list has a button when I click on the button I want to display text inside the nearest span next to the button.

I just cannot get it to work, as either, the text is appended to all spans or none.

My last attempt is below, so any help would be appreciated

<div class="apply-message">
    <span class="need-to-register text-danger"></span>
    <div class="d-flex flex-row justify-content-between">
        <a href="url" class="btn job-details" type="button">Job Details</a>
        <a href="#" class="btn apply apply-search-button" type="button">Apply</a>
        <input type="hidden" class="pageId" name="pageId" value="123" />
    </div>
</div>
<div class="apply-message">
    <span class="need-to-register text-danger"></span>
    <div class="d-flex flex-row justify-content-between">
        <a href="pageurl" class="btn job-details" type="button">Job Details</a>
        <a href="#" class="btn apply apply-search-button" type="button">Apply</a>
        <input type="hidden" class="pageId" name="pageId" value="123" />
    </div>
</div>

My JQuery is below

 $(".apply-search-button")
     .closest(".apply-message")
     .find(".need-to-register")
     .append(`<p>${data.message}</p>`)
     .show();

So basically I have the div apply-message and inside that, I have the span need-to-register with the closest button apply-search-button which when clicked such append the message to the closest span and not all spans

*****************Full JQuery**********************

$(function() {
 $(".need-to-register").hide();
    $(".apply-search-button").on("click", function(event) {
            event.preventDefault();
            var pageId = $(this).closest(".latest-jobs").find(".pageId").val();

            jQuery.ajax({
                type: "Post",
                url: "/Umbraco/Surface/Members/Apply/",
                data: { page: pageId },
                cache: false,
                dataType: "json",
                success: function(data) {
                    if (data.Confirm === true) {
                    $(this).closest(".apply-message").find(".need-to-register").append(`<p>${data.message}</p>`).show();
                } else if (data.isJsonErrorList === true) {
                    //$(this).siblings(".need-to-register").append(`<p>${data.message}</p>`).show();
                    $(this).closest(".apply-message").find(".need-to-register").append(`<p>${data.message}</p>`).show();
                } else {
                    $(this).closest(".apply-message").find(".need-to-register").append(`<p>${data.message}</p>`).show();
                }
                    $("#spinner").hide();
                }
            });
        });
});
George Phillipson
  • 830
  • 11
  • 39
  • Pay attention to the identifiers: `.find(".needToRegister")` needs to be `.find(".need-to-register")` – Cornel Raiu Nov 12 '19 at 22:49
  • @cornel.raiu That was a typo, I have corrected it – George Phillipson Nov 12 '19 at 22:52
  • `$(".apply-search-button")` should also be `$(this)` or `$(e.target)`, where `this|e.target` is the apply link that was clicked. Please include your click event binding so we can see the context by which you are trying to execute this logic. – Taplar Nov 12 '19 at 22:53
  • @Taplar it's most probably on document.ready – Cornel Raiu Nov 12 '19 at 22:55
  • Well that would be contradictory to what the OP is requesting, regarding the action happening upon click. @cornel.raiu – Taplar Nov 12 '19 at 22:57
  • 1
    Also side note; your usage of `type="button"` on the `a` in not within html standards (https://html.spec.whatwg.org/multipage/indices.html#attributes-3). If a `type` is given on an `a` it is expected to have a value of a mime type. – Taplar Nov 12 '19 at 22:58
  • I have added jquery – George Phillipson Nov 12 '19 at 23:03
  • 1
    Your issue is that inside the success handler the `this` is no longer the link. https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback – Taplar Nov 12 '19 at 23:03
  • @Taplar I have also tried $(".apply-search-button") but that does not work either – George Phillipson Nov 12 '19 at 23:04
  • 3
    Keep the code you have, and put `context: this` as an argument on the options given to `ajax`. Or store the `this` in a variable outside of the ajax, and use that variable inside the success callback – Taplar Nov 12 '19 at 23:05
  • Hi @Taplar, thanks, that was what I was missing, works now – George Phillipson Nov 12 '19 at 23:09
  • Good deal. I would highly suggest you give the duplicate post a browse for more information about contexts and when they change. – Taplar Nov 12 '19 at 23:10

0 Answers0