Home Change href in custom template
Reply: 1

Change href in custom template

SxChoc
1#
SxChoc Published in 2018-02-13 16:25:18Z

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

Louys Patrice Bessette
2#
Louys Patrice Bessette Reply to 2018-02-13 16:50:30Z

Your template seems to be that .qualURL anchor...

So, just remove the .find('.qualURL') for the href change, since that looks for a .qualURL in the childrens of your template.

$(item).attr('href', qualItem.qualificationName);
You need to login account before you can post.

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

© 2016 Powered by mzan.com design MATCHINFO