CODEWITHSUNDEEP
javascriptjqueryasp.net-mvc
John John
John John

Reputation: 1

How can I set an href for a link to equal a variable inside my script

I have the following markup to show an image inside a jQuery slider:-

<li>
    <figure> <a href="~/img/big.jpg" class="thumb">
                <img src="~/img/small.jpg" alt=""/>
                <span>
                    <strong>Project name:</strong><em>Villa</em>
                    <img src="~/img/searchsmall.png" alt="" 
                       data-goto="@Url.Action("OurProjects", "Home", new { name = "villaA" })"/>
                </span>
            </a>

    </figure>
</li>

Inside a call back function which loads the image inside the slider, I want to add a new <a> inside the current placeholder where the href for the link equals the data-goto value.

I tried the following,

  function loadImage(src, callback) {
      var img = $('<img>').on('load', function () {
          callback.call(img);
      });

      img.attr('src', src);
      var allcaptions = $("figure span");

      // setTimeout is a hack here, since the ".placeholders" don't exist yet
      setTimeout(function () {
          $(".placeholder").each(function (i) {

              // in each .placeholder, copy its caption's mark-up into it
              // (remove the img first)
              var caption = allcaptions.eq(i).clone();

              var t = $(this).find("img").attr('data-goto');

              caption.append("<a href=t>test</a>");
              caption.find("img").remove();
              $(this).append("<div class='caption'>" + caption.html() + "</div>");
          });
      }, 500);
  }

but the generated link will have "undefined" as its href.

EDIT

The placeholder class will be inside the jquery slider , as follows

Rendered markup

EDIT-2

here is the markup when the page loads :-

<li>
    <figure> 
        <a href="~/img/big.jpg" class="thumb">
            <img src="~/img/small.jpg" alt=""/>
            <span>
                <strong>Project name:</strong><em>Villa</em>
                <img src="~/img/searchsmall.png" alt="" 
                     data-goto="@Url.Action("OurProjects", "Home", new { name = "villaA" })"/>
            </span>
        </a>
    </figure>
</li>

now when you click on small.jpg image , the big.jpg will be shown inside the slider. Here is the markup inside the slider

<div id="galleryOverlay" class="visible" style="display: block;">
<div id="gallerySlider" style="left: 0%;">
<div class="placeholder">
<img src="/img/big.jpg">
<div class="caption">
<div class="caption">
<strong>Project name: </strong>
<em>Villa</em>
<img data-goto="/OurProjects?name=villaA" alt="" src="/img/searchsmall.png">
<a>test</a>
</div>
</div>
<div class="placeholder">
<div class="placeholder">
<div class="placeholder">
<div class="placeholder">
<div class="placeholder">
<div class="placeholder">
<div class="placeholder">
<div class="placeholder">

where the link will not have a href or the href will be undefined. Is this my problem?

EDIT-3

here is the firbug screen Firebug image of the rendered HTML

Upvotes: 1

Views: 1782

Answers (3)

guest271314
guest271314

Reputation: 1

t appear to be String at caption.append("<a href=t>test</a>"); , not reference to t variable at previous line . Try using attributes parameter of jQuery( html, attributes ) to set text , href properties. 

var t = $(this).find("img").attr('data-goto');
caption.append($("<a />", {"text":"test", "href":t}));

Upvotes: 1

Cellgalvano
Cellgalvano

Reputation: 1

You need to escape the string in t correctly. caption.append("<a href=\""+t+"\">test</a>");

Upvotes: 0

rrk
rrk

Reputation: 15846

String concatenation is done using + operator. 

caption.append("<a href='" + t + "'>test</a>");

The resultant anchor tag will look like following if `t = 'https://jsfiddle.net'

<a href='https://jsfiddle.net'>test</a>

Upvotes: 2

Related Questions