CODEWITHSUNDEEP
jqueryjquery-mobile
Lee
Lee

Reputation: 8744

jQuery Mobile PageShow not working as expected

I am using jQuery Mobile's PageShow event to set the width of certain input elements. If I load the page directly (i.e. through the URL) everything works as expected.

If I load the page through the standard ajax navigation system (i.e. an in-app link), I get the 'hello' alert and the correct width of the 'span.add-on', but the 'div.content-padd' element gets a width of zero? The 'div.content-padd' is a container element for all the other elements in the page and gives them some padding etc. All JS is loaded in the of my Rails layout template.

I don't know what is going on here. My code is as per below:

$(document).bind('pageshow', function() {

alert('hello')

    $('.add-on').addClass('ui-corner-all');

    //Set the width of the input following the appends or prepends to the remaining space
    var containerWidth = $('div.content-padd').width();
    console.log('container width:' + containerWidth);

    var appendsAndPrepends = '.input-prepend, .input-append';
    $(appendsAndPrepends).each(function () {
        var remainingSpace = containerWidth - $(this).find('span.add-on').outerWidth();
        console.log('span width' + $(this).find('span.add-on').outerWidth());

        $(this).find('div.ui-input-text').outerWidth(remainingSpace);
    });

});

Upvotes: 0

Views: 1047

Answers (1)

Gajotres
Gajotres

Reputation: 57309

This is a wild guess but you will need to change your logic. From what you have just said I guess you have several pages with same .content-padd div. If this is the case then you need to understand how jQuery Mobile and javascript works. jQuery Mobile uses ajax to load content into the DOM. One or more pages can be loaded.

If you have several pages with a same DIV id, when you try to access it you will access first element found in the DOM that has that id, and it usually is not a DIV you want.

To access correct DIV you will need to use jQuery Mobile selector called active page:

$.mobile.activePage

And without testing your code should look like this:

$(document).bind('pageshow', function() {

    alert('hello')

    $.mobile.activePage.find('.add-on').addClass('ui-corner-all');

    //Set the width of the input following the appends or prepends to the remaining space
    var containerWidth = $.mobile.activePage.find('div.content-padd').width();
    console.log('container width:' + containerWidth);

    var appendsAndPrepends = '.input-prepend, .input-append';
    $.mobile.activePage.find(appendsAndPrepends).each(function () {
        var remainingSpace = containerWidth - $(this).find('span.add-on').outerWidth();
        console.log('span width' + $(this).find('span.add-on').outerWidth());

        $(this).find('div.ui-input-text').outerWidth(remainingSpace);
    });

});

I am not sure this code is working correctly but I think you now should understand the point.

Upvotes: 1

Related Questions