CODEWITHSUNDEEP
javascriptjquerymodal-dialog
MeltingDog
MeltingDog

Reputation: 15414

Jquery can't seem to target contents of modal

I wish to append some content within form within a modal and so have created:

$('.simple_form').append("<p><a href='google.com'>Apply now</a></p>");

However, this does not appear to work -the HTML above deosnt not append, not do I see any errors in the console.

I can do other stuff on the page - append the text anywhere else, just not to part of the modal.

The site is using the Near Me platform, an example site of which is here: https://desksnear.me/

I am just trying to affect the modal that appears when you click Log In at the top right.

Would anyone know why this isn't working and what I could do to get back on track?

Upvotes: 1

Views: 149

Answers (2)

gyre
gyre

Reputation: 16777

I think the modal gets created anew every time you click the Log In button. So the .simple_form changes get overwritten before they can be seen.

There isn't an ideal solution to this problem if you can't tap into an event that occurs when the modal is opened and all the content in it has been initialized. I would suggest using an interval to repeatedly check if the modal is visible (for some capped amount of time, in case something fails), and then insert your HTML code at that point.

$('.nav-link.header-second').click(function() {
  var token = setInterval(function(modal) {
    if (modal.hasClass('visible')) {
      $('.simple_form').append("<p><a href='google.com'>Apply now</a></p>")
      clearInterval(token)
    }
  }, 10, $('.modal-content'))

  // set a limit on the interval in case of failure
  setTimeout(clearInterval, 2000, token)
})

Upvotes: 2

Pream
Pream

Reputation: 537

Wrap it in document ready, the element must be there when the code executes(assuming you already have the element with class .simple_form as hidden)

$(document).ready(function(){
$('.simple_form').append("<p><a href='google.com'>Apply now</a></p>");
});

Upvotes: 0

Related Questions