CODEWITHSUNDEEP
jqueryjquery-mobileasp.net-mvc-4
Paulo Mendonça
Paulo Mendonça

Reputation: 643

jQuery Mobile bind events

I have a little problem with jquery mobile. always my page is called this function runs.

$(document).bind('pagechange', function () { 
  // peforms ajax operations
})

The problem is that each time my page is viewed it increases the times my ajax is called... example: if the page is viewed 5 times, next time will peform the same ajax request 6 times.

I'm using asp.Net MVC 4.

Multiple ajax requests

Full code:

@{
    //ViewBag.Title = "Consulta";
    Layout = "~/Views/Shared/_LayoutMenu.cshtml";
}
<div class="ui-body ui-body-b" id="test">
    (...) some html code (...)
</div>
<script>        
$(document).bind('pagechange', function () {
    $('#info').css('visibility', 'hidden');

    $('#name').keypress(function (e) {

        if (e.keyCode == 13) {

            var code = $(this)[0].value;

            $.ajax({
                url: '/Consulta/ObterDadosPulseira',
                data: $(this).serialize(),
                success: function (data) {

                    $('#info').css('visibility', 'visible');

                    var info = $('#info')[0];

                    $('#info [id=gridCod]').html(data[0].cod);
                    $('#info [id=gridName]').html(data[0].nome);

                },
                complete: function () { },
                error: function () { alert('error!'); }
            });

            $(this)[0].value = '';
        }
    });
    $('#name').focus();                       
});

Upvotes: 5

Views: 5534

Answers (1)

Jasper
Jasper

Reputation: 75993

Normally this happens because you are binding an event handler within another event handler. For instance if you were binding a pagechange event handler inside of a pageshow event handler.

Also if you want to bind to the page events for a specific page, you can just bind to the data-role="page" element:

$(document).delegate('#my-page-id', 'pageshow', function () {
    //now `this` refers to the `#my-page-id` element
});

Update

I just saw your updated answer with the extra code, and your problem is that you are binding an event handler inside another event handler. Basically each time the pagechange event is firing, a new event handler is bound to the #name element.

Try this:

$(document).delegate('#name', 'keypress', function () {

    if (e.keyCode == 13) {

        var code = this.value;

        $.ajax({
            url: '/Consulta/ObterDadosPulseira',
            data: $(this).serialize(),
            success: function (data) {

                $('#info').css('visibility', 'visible');

                var info = $('#info')[0];

                $('#info [id=gridCod]').html(data[0].cod);
                $('#info [id=gridName]').html(data[0].nome);

            },
            complete: function () { },
            error: function () { alert('error!'); }
        });

        this.value = '';
    }
}).bind('pagechange', function () {
    $('#info').css('visibility', 'hidden');
    $('#name').focus();                       
});

This uses event delegation to bind the event handler to the #name element, this way the event handler will be bound once for all-time.

Docs for .delegate(): http://api.jquery.com/delegate

Upvotes: 8

Related Questions