[ANSWERED] javascript – Store HTML Card’s element data using Jquery

Question 1

There is 2 issues in your code, first you are selecting the eventobject instead of selecting the element, $(e) should be $(e.target), then you can use .parents('.ibm-card__content').find('.ibm-h4') to find the element HTML value, here is a working snippet:

NOTE I had to remove the click functions that you didn’t include

$(".ibm-edit-link").click(function (e) {
  e.preventDefault();
  let test1 = $(e.target).parents(".ibm-card__content").find(".ibm-h4").html();
  let test2 = $(e.target).parents(".ibm-card__content").find(".ibm-h6").html();

  console.log(`Header value h4: ${ test1}`);
  console.log(`Header value h6: ${ test2}`);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ibm-card__content" style="height: 250px; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis;">
    <h4 class="ibm-h4" id="usecase1Tile1Title">H4 text</h4>
    <h6 class="ibm-h6 ibm-textcolor-gray-50" id="usecase1Tile1Desc">h6 text</h6>
    <p id="usecase1Tile1URL" hidden="">main</p>
    <p class="ibm-ind-link ibm-icononly ibm-fright pf-pencil white-bg">
        <a id="edit0" class="ibm-edit-link tipso_style" onclick='return false;' href="" role="button">Edit UseCase</a>
    </p>
</div>

Question 2

From the Card below I am trying to store h4 and h6 value into a variable when I click the widget “cardEdit” method is invoked. Also the ID’s “usecase1Tile1Title” and “usecase1Tile1Desc” are dynamic.

let test =
  $(e).parent().parent().find('#usecase1Tile1Title').html();
console.log("Header value :" + test);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ibm-card__content"
  style="height:250px;word-wrap: break-word; overflow: hidden; text-overflow: ellipsis;">
  <h4 class="ibm-h4" id="usecase1Tile1Title">H4 text </h4>
  <h6 class="ibm-h6 ibm-textcolor-gray-50"
    id="usecase1Tile1Desc">h6 text</h6>
  <p id="usecase1Tile1URL" hidden="">main</p>
  <p class="ibm-ind-link ibm-icononly ibm-fright pf-pencil white-bg"><a id="edit0"
    class="ibm-edit-link tipso_style"
    onclick="cardEdit(this); IBMCore.common.widget.overlay.show(&quot;overlayExampleAlert&quot;); return false;"
    href=""
    role="button">Edit UseCase</a></p>
</div>

Bollate

[ANSWERED] javascript – Store HTML Card’s element data using Jquery

By

Solution 1 :

Problem :

Comments

Comment posted by Suraj Prasad

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate