Javascript onClick function doesnt work

Question

I build some little mvc asp.net project to check some function of the OutBrain API.

I made a input type of text which get MarketerI ID and should return his name (from the server). But when i push the button nothing happen and i really dont have a clue why and whould glad to get some help !

Thanks

My code :

outBrain.js File

$("#buttonB").on('click', function () {
     getMarketer();
});


function getMarketer() {
    $.ajax({
        url: "/home/GetOutBrainMarketers",
        data: { id: $("marketerID").val() },
        success: function (result) {
            var marketer = JSON.parse(result);
            document.getElementById("nameMarketer").innerHTML = (marketer.name);
        }
    });
}

cshtml File (which include the script file path):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="~/Scripts/outBrain.js"></script>
@{
    ViewBag.Title = "Home Page";
}
<br />
<div class="details">
    <label>Enter Marketer ID</label>
    <input type="text" class="form-control" id="marketerID">
    <input type="button" class="btn btn-default" value="OK" id="buttonB" />
    <section class="details">
        <div class="name">
            <label>Name</label>
            <label id="nameMarketer"></label>
        </div>
    </section>
</div>

There is also the code of the controller but dont see a point to add it.

Have you [debugged](http://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-code) it? — Liam, Nov 24 '16 at 16:07
@Liam yes he does. Try placing the click event in an anonymous function. — bilpor, Nov 24 '16 at 16:09
to make an anonymous function you wrap all the code in `$(function() { all code goes here });` by not placing it in here it sits on the global scope not really what you should have. Putting the code like this gives it closure. — bilpor, Nov 24 '16 at 16:15

score 2 · Answer 1 · edited Nov 24 '16 at 16:06

2

Your selector in ajax is missing a #. It is $("marketerID").val(), should be $("#marketerID").val();

Could this be the problem?

edited Nov 24 '16 at 16:06

Liam

27,717
28
128
190

answered Nov 24 '16 at 16:06

Tom

21
3

score 2 · Accepted Answer · edited Nov 24 '16 at 21:37

2

Try:

$("#buttonB").click(function () {
     getMarketer();
});

edited Nov 24 '16 at 21:37

Vojtech Ruzicka

16,384
15
63
66

answered Nov 24 '16 at 16:20

Bushido

74
6

1

While this may be a valid answer, you are much more likely to help others by explaining what the code does and how it works. Code-only answers tend to receive less positive attention and aren't as useful as other answers. – Aurora0001 Nov 24 '16 at 16:51

score 1 · Answer 3 · answered Nov 24 '16 at 16:19

Change this code

$.ajax({
        url: "/home/GetOutBrainMarketers",
        data: { id: $("marketerID").val() },
        success: function (result) {
            var marketer = JSON.parse(result);
            document.getElementById("nameMarketer").innerHTML = (marketer.name);
        }
    });

by this :

$.ajax({
        url: "/home/GetOutBrainMarketers",
        data: { id: $("marketerID").val() },
        success: function (result) {
            var marketer = JSON.parse(result);
            $("#nameMarketer").html(marketer.name);
        }
    });

And Good luck

score 0 · Answer 4 · answered Nov 25 '16 at 07:54

I think, you have to put the your js files at the end, so it wwil be like this: 


@{
    ViewBag.Title = "Home Page";
}
<br />
<div class="details">
    <label>Enter Marketer ID</label>
    <input type="text" class="form-control" id="marketerID">
    <input type="button" class="btn btn-default" value="OK" id="buttonB" />
    <section class="details">
        <div class="name">
            <label>Name</label>
            <label id="nameMarketer"></label>
        </div>
    </section>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="~/Scripts/outBrain.js"></script>

I suggest you use @section, so your code will be more organize.

Javascript onClick function doesnt work

4 Answers4