Home Change href in custom template
Reply: 0

Change href in custom template

user10578
1#
user10578 Published in September 20, 2018, 12:45 pm

Wonder if someone could spare a few minutes to help to me out:

In my cshtml page I have a 'hidden-template'

<script id="hidden-template" type="application/x-custom-template">
    <a href="#"  class="qualURL course">
        <div class="course_wrap">
            <h2>
                <span><i class="fulllevel"></i></span>
                <span class="title"></span>
            </h2>
            <div class="details">
                <div class="level"></div>
                <div class="arrow">
                    <span class="icon-arrow-right"></span>
                </div>
            </div>
        </div>
    </a>
</script>

And using jSon I'm grabbing a list of elements and using the properties of each item in the list to change the value inside this template and then append each instance of the template to a container located elsewhere in the cshtml file.

$.ajax({
    url: qualURL,
    type: 'GET',
    cache: false,
    contentType: 'application/json; charset=uft-8',
    success: function (results) {
        globalSearchResult = jQuery.parseJSON(results); //this calls a controller and returns a list of items
        ListResultsAndFilter();
    },
    error: function (badResults) {
        alert("An error has occurred");
    }
});


function ListResultsAndFilter() {
//clear out prior to fresh loading
$('.results').html("");

//loop through and load into containing div
$.each(globalSearchResult, function (i, item) {
    var qualItem = item;
    //add filtration here
    var result = true;
    //above added for initial loading/testing
    var item = $(template).clone();

    if (result) {

        //build the URL 
        var zPath = qualItem.qualificationName;
        zPath = zPath.replace(/[^a-zA-Z0-9 ]/g, '');
        zPath = replaceAll(zPath, '   ', '-');
        zPath = replaceAll(zPath, ' ', '-');
        zPath = replaceAll(zPath, '--', '-');

        $(item).find('.title').html(qualItem.qualificationName);
        $(item).find('.level').html(qualItem.qualificationLevel);
        $(item).find('.fulllevel').html(qualItem.discipline);
        $(item).find('.qualURL').attr('href', qualItem.qualificationName);


        //append this qualification to the results container
        $('.results').append(item);

    }

});
};

As you can see for each item in the list I'm cloning the template and changing the values of the HTML by finding the element by the class name and everything works as expected apart from the fact that I can't change the href value of the anchor link (class name qualURL) I'm getting no console errors but the href remains as #.

Does anyone have any ideas?

Thanks, C

share|improve this question
  • Could it be that you need to look for .qualURL .course since you have two classes on that template? – Bardicer Feb 13 at 16:28
  • Sadly not, I'd already tried removing one of the class names but still it won't change the link – SxChoc Feb 13 at 16:31
  • 1
    Is $(template) that .qualURL anchor? if so, just remove the .find() for the href change.... Like this $(item).attr('href', qualItem.qualificationName); – Louys Patrice Bessette Feb 13 at 16:32
  • GENIUS! You my friend are a GENIUS! – SxChoc Feb 13 at 16:33

1 Answer 1

active oldest votes
up vote 1 down vote accepted
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.355923 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO