Button not hitting javascript function in mvc

Question

I trying to create simple web app in mvc4.

In my view i used below scripts

<link href="~/Content/jquery.mobile-1.4.2.css" rel="stylesheet" />
<script src="~/Scripts/jquery-2.1.1.js"></script>
<script src="~/Scripts/jquery.mobile-1.4.2.min.js"></script>

And one simple button calling javascript function getWeather() when clicked.

<input type="button" data-icon="refresh" id="btnNewLoc" data-iconpos="notext" name="SaveButton" onclick="getWeather();" />

But my problem is when i clicked button is not hitting my below java script function.

<script type="text/javascript">
    function getWeather() {
        var URL = "/Weather/GetWeather/" + $("#Location").val();
        $.get(URL, function (data) {
            $("#Result").html(data);
        });
    }
</script>

Please guide me.

Answer 1

Never use inline javascript with jQuery Mobile, it will usually not work at all.

Do it directly with jQuery:

$(document).on('click', '#btnNewLoc', function(){ 
    var URL = "/Weather/GetWeather/" + $("#Location").val();
    $.get(URL, function (data) {
        $("#Result").html(data);
    });
});

Reason, inline javascript will usually not trigger when used with jQuery Mobile.

Answer 2

Try this : repalce your input button code to following code :

 <input type="button" id="btnNewLoc" value="Save" name="SaveButton" />

then use this script :

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $("#btnNewLoc").click(function () {
            var URL = "/Weather/GetWeather/" + $("#Location").val();
            $.get(URL, function (data) {
                $("#Result").html(data);
            });
        });
    });
</script>

Hopefully it works...!