Dynamically changing content within popups created using PopUp plugin

Im using popup pro to create a popup when a user clicks on a link. The popup has a heading with an ID on it, what I'd like to do is when the link is clicked, the title of the popup is replaced with the value stored in an attribute field within the link.
I've attempted to do this using jQuery by adding the following code, but when the popup displays nothing is altered. Any ideas on how to achieve this?

jQuery(document).ready(function($) {
$(".test-popup").click(function() {
that=$(this);
$("#popup-title").val(that.attr("test-popup"));
})
})

  • Adam Czajczyk

    Hello Paul,

    I hope you're well today and thank you for your question!

    I think (though that's an assumption so far, until I check the site) that it's doable but I would want to check how this popup, elements and links are set so I could first mirror your setup on my test site and then check the code.

    Could you then please grant me a support access to your site so I could take a closer look? You may do this by following this guide here:

    https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    In case there's more popups on the site let me know please which one should I check. Any additional information would also be helpful (if you think I should now something more than you already wrote).

    Looking forward to your replay,
    Adam

  • Dimitris

    Hey there Paul,

    hope you're doing good and don't mind chiming in!

    I just went ahead and inspected your website after reading the instructions you kindly shared in admin area.

    First noticed that the selector which trigger the popup weren't right, so I replaced ".edit-project" with ".test-popup" afer inspecting a "edit" link, which seems like the following:
    <a href="#" class="test-popup" data-edit="1264" data-name="should auto activate" data-min="0" data-max="1000">

    Is the "data-name" attribute in this link which should replace the popup's title? Please advise!
    The title is empty at the moment and I wasn't able to locate the script you currently use.
    For doing so, you may have to try an alternative JS script like the following:

    $(document).ready(function(){
        $(".test-popup").click(function() {
          var name = $(this).data("name");
          $(".wdpu-title").html(name);
        });
    });

    Warm regards,
    Dimitris

  • Paul Thomas

    The link should like the following;

    <a href="#" class="test-popup" data-edit="1264" data-name="should auto activate" data-min="0" data-max="1000"><b>EDIT <i class="fa fa-pencil" aria-hidden="true"></i></b></a>

    which is what you have.
    The data-name is exactly what should be copied over, the code that does can be found on line 66

    <script>
    	jQuery(document).ready(function($) {
    		$(".test-popup").click(function() {
    			that=$(this);
    			console.log(that.attr("data-name"));
    			$("#project-title").val(that.attr("data-name"));
    		})
    	})
    </script>

    I've added a console line in to output the title to show that it's pulling it correctly

    The title, is the editable box within the popup with the id "project-title" so .html() will now work as this is form element, the code for this is below;

    <input id="project-title" type="text">

  • Dimitris

    Hey there Paul Thomas,

    hope you're doing good today! :slight_smile:

    I was further inspecting your website and found a workaround for your issue. As you can see now the titles are working as you wish after I changed a bit your script so now is like

    <script>
      jQuery(document).ready(function($) {
        $(".test-popup").click(function() {
          that=$(this);
          console.log(that.attr("data-name"));
          setTimeout(function(){
            $("#project-title").val(that.attr("data-name"));
          }, 200);
        });
      });
    </script>

    Notice the setTimeout function which doesn't set the new value for 200 milliseconds, as they actual HTML markup of the popup isn't present on initial page load but only renders after clicking the "edit" link. :wink:

    Warm regards,
    Dimitris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.