How to pass parameters from list to javascript

Question

I'm a newbie to MVC, so apologies if this might be poorly ignorant. In my MVC application,I'm trying to track every single time a page is clicked or accessed. My strategy is to log it on the database whenever a click happens on the home view for a particular page, by passing a parameter to a javascript function, which in turn calls a webmethod that communicates with the cs file.

My main problem at the moment is that I am unable to pass data from the click on the home page to the javascript function, for some very weird reason, it is refusing to communicate with the function. I tried using two methods, onClick and data-bind (both strategies represented in the code below) and it doesnt work. Any advice?

<tr class="row">
    <td>
        <div class="tabbable">
            <ul class="nav nav-tabs nav-stacked" id="menuTabs">
                <li class="active"><a href="#land" data-toggle="tab" onclick="PostName('Home')">Home</a></li>
                <li class=""><a href="#tutuwaroadshow" data-toggle="tab" data-bind="click: function (o, e){$root.PostName(o,e);}" >Tutuwa roadshows</a></li>
                <li class=""><a href="#faqsandpresentations" data-toggle="tab" onclick="PostName('Faqs')">FAQ's and presentations</a></li>
                <li class=""><a href="#examplescenarios" data-toggle="tab" onclick="PostName('ExampleScenarios')">Example scenarios</a></li>
                <li class=""><a href="#financialadvisors" data-toggle="tab" onclick="PostName('FinancialAdvisors')">Financial advisors</a></li>
                <!--<li class=""><a href="#privateclients" data-toggle="tab">Private Clients</a></li>-->
                <li class=""><a href="#trustdeeds" data-toggle="tab" onclick="PostName('TrustDeeds')">Trust deeds</a></li>
                <li class=""><a href="#newsflashes" data-toggle="tab" onclick="PostName('Newsflashes')">Newsflashes</a></li>
                <li class=""><a href="#usefullinksandcontacts" data-toggle="tab" onclick="PostName('Useful')">Useful links and contacts</a></li>
                <li class=""><a href="#webinar" data-toggle="tab" onclick="PostName('Webinar')">Webinar</a></li>
            </ul>
        </div>
        <div class="newsflash"><a href="~/Content/files/Tutuwa%20Newsflash%204.pdf" target="_blank">Click here for the latest newsflash.</a></div>
    </td>
    <td rowspan="2">
        <div class="tab-content">
            <div class="tab-pane active" id="land">@Html.Partial("Land")</div>
            <div class="tab-pane" id="tutuwaroadshow">@Html.Partial("TutuwaRoadshow")</div>
            <div class="tab-pane" id="faqsandpresentations">@Html.Partial("FaqsAndPresentations")</div>
            <div class="tab-pane" id="examplescenarios">@Html.Partial("ExampleScenarios")</div>
            <div class="tab-pane" id="financialadvisors">@Html.Partial("FinancialAdvisors") </div>
            <div class="tab-pane" id="privateclients">@Html.Partial("PrivateClients")</div>
            <div class="tab-pane" id="trustdeeds">@Html.Partial("TrustDeeds")</div>
            <div class="tab-pane" id="newsflashes">@Html.Partial("NewsFlashes")</div>
            <div class="tab-pane" id="usefullinksandcontacts">@Html.Partial("UsefulLinksAndContacts")</div>
            <div class="tab-pane" id="webinar">@Html.Partial("Webinar")</div>
        </div>            

    </td>

And the javascript:

  <script type="text/javascript">   

function PostName(pageName) {
            debugger;     

 $.ajax({
                type: "POST",
                url: 'HomeController/SaveVisitorHits',
                data: { s: pageName },
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    //do nothing
                },
                error: function (e) {
                    // do nothing
                }
            });
        }
</script>

Tetaxa · Accepted Answer · 2014-09-30 07:49:24Z

1

You need to define the function before you use it in your html, and you need to write onclick="javascript:PostName('name')".

A better way, however, would be to set the name in a data-attribute and attach the click handler using jQuery, since you're already using that for the AJAX call.

answered Sep 30, 2014 at 7:49

Tetaxa

4,4031 gold badge21 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

LeloKunene Over a year ago

Thanks.. I've put in the "javascript:PostName('name')". and its still the same, it doesnt reach the js. Should I perhaps have the Javascript on a separate file? and please explain what you mean by defining the function before i use it in the HTML?

Tetaxa Over a year ago

if you move the function definition to the head for example it should work. see jsfiddle.net/cLp6y51c

Collectives™ on Stack Overflow

How to pass parameters from list to javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related