0

For reference I am working on this issue for the Focal Point module...

I have a link whose href is updated dynamically using js based on a particular user interaction (moving the focal point on an image). The link may start as /admin/focal_point/preview/10/21x68 but after a user moves the focal point to another part of the image it is changed to /admin/focal_point/preview/10/75x28. In attempting to open this preview page open in a modal (as opposed to a new window) I'm finding that clicking the link loads the preview as though the link had not been changed. Any idea how to tell the ajax logic that loads modals to acknowledge the changed href?

2

3 Answers 3

0

Presumably, the JS used to generate the dynamic href is on the page that the modal opens? If I'm not mistaken, iframes do not run their attached scripts by default. So this page may be helpful:

https://stackoverflow.com/questions/251420/invoking-javascript-code-in-an-iframe-from-the-parent-page?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa

Since your requested iframe is on the same domain as your parent page, there shouldn't be any CORS issue.

1
  • The JS used to generate the drynamic href is on the original page, not on the page that opens inside the modal
    – bleen
    Commented Apr 11, 2018 at 16:41
0

Try to re init the javascript. Once your web page is loaded javascript will add all the elements to your DOM (Document Object Model). So when you add something new with your ajax, the DOM doesn't know that you have added something new and it will work with the elements as before. So you may have to re init your javascript and tell the DOM that you have added new elements. If you are running an ajax in a 'onclick' function, the re init should be as below.

$(document).on("click","#elementID",function() {
    //your ajax script here
});

This is how you tell DOM that it should re add the element (#elementID) to itself.

1
  • I'm not following... When the page loads originally it has <a href="/path/to/page?foo=20x30">. Through various mouse drag events on a completely different DOM element that href is dynamically changed to something like "/path/to/page?foo=55x10". It seems that the core Drupal modal functionality is picking up the original href on page load and storing it somewhere, but I dont see from your comment how to tell that code to look at the href again
    – bleen
    Commented Apr 11, 2018 at 16:44
0

This is an old post, but I just ran across this same problem. As you saw, once a modal link is on the page and has been processed by the Ajax JavaScript, changing the href of the link will not change the actual URL loaded into the modal window. To dynamically change the URL used by the modal, you must also:

  1. Unbind the existing "click" handler.
  2. Reset the "once" on your link.
  3. Call bindAjaxLinks() again to make the link use a modal.

Example code for changing a link with the ID "my-link":

$('#my-link')
  // Change the link href.
  .attr('href', '/my-new-url')
  // Unbind the old Ajax click handler.
  .unbind('click');
// Remove the once() so it will get processed again.
once.remove('ajax', '#my-link');
// Attach the Ajax action to this link.
Drupal.ajax.bindAjaxLinks(document.body);

I updated the Ajax Dialog Boxes documentation on d.o with this info, too:

https://www.drupal.org/docs/develop/drupal-apis/ajax-api/ajax-dialog-boxes#s-changing-the-href-of-an-existing-modal-link

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.