CODEWITHSUNDEEP
javascriptjqueryhtmlfancyboxfancybox-3
user7631121
user7631121

Reputation: 125

Attempting to dynamically change IFrame Fancybox data-src attribute

Purpose of my program:

Upon click of the 'External page' hyperlink, the javascript function 'randomLink' is then executed, which should dynamically provide a link to the IFrame fancybox; which in turn should load up this provided link.

The Problem

Currently the problem I'm having is: instead of acting in the manner summarised above, once one link has been assigned to the 'data-src' attribute, from this point in run-time I've not been able to replace the value of this attribute again dynamically.

How you can visually see the issue:

A comparison of the 'd.getSeconds()' value expressed via the javascript alert message and the 'duckduckgo' URL fed to the Fancybox IFrame, makes this problem apparent.

When the hyperlink 'External Page' is executed for the first time the 'duckduckgo' URL matches the current 'd.getSeconds()' value displayed within the JS alert, but after this point when the hyperlink is selected again these values will no longer match. Instead for the URL the first 'd.getSeconds()' value will be executed within the Fancybox IFrame in contrast to the intended new 'd.getSeconds()' value.

Any help reaching a solution to this problem would be much appreciated.

Thanks.

CodePen Link to the problem:

http://codepen.io/anon/pen/yMNxrK

Html:

<p>

  <a data-fancybox data-src="" href="javascript:;" onclick="randomLink(this)">
    External page
  </a>

</p>

Javascript:

function randomLink(a) {

var d = new Date();
alert(d.getSeconds())

a.setAttribute('data-src', 'https://duckduckgo.com/?q=' + d.getSeconds());
}

Upvotes: 3

Views: 2164

Answers (1)

JFK
JFK

Reputation: 41143

The issue I see is that the data-fancybox attribute binds the <a> element to fancybox hence conflicting with the onclick attribute.

I would tackle the "problem" with a different approach by using the onclick attribute only to call your randomLink function, then triggering fancybox programmatically within that function after the target source has been randomly created, so

The HTML:

<a href="javascript:;" onclick="randomLink()">External page</a>

The JavaScript:

function randomLink() {
  var d = new Date();
  alert(d.getSeconds())
  var href = 'https://duckduckgo.com/?q=' + d.getSeconds()
  $.fancybox.open({
    src: href,
    type: 'iframe',
    opts: {}
  })
}

The forked pen: http://codepen.io/anon/pen/dvYbrN

Upvotes: 3

Related Questions