0

I have a single html page the id's and class'es are empty. They are filled by the data returned by ajax get request. So, users see the app as signin page, home page, offer page, and events page. On successful login, they see a home page. Only after the successful login, users will be able to see the footer, which are the image icons for home, offers and events. The elements inside the html page is shown or hidden based on what page user want to navigate by clicking on the image icons.

My issues are: If I already have offers, and events, then navigating to these pages from any other page will not be a problem, but if any one of these is empty, then navigating to the page (that has some content) from an empty content page, some of the jquery manipulations do not occur on click event. And, I am trying to find out why this is happening?

Say, from empty offer page to event page with some events already in the database, The events content gets populated, but

  • The headers will not change. The headers will still say offers, but the content is of events.
  • The image icons would not change. I have normal and click-over images. The click-over image will still be of offer, not the event.

But, if both of these pages are either empty or have some data,

  • The headers change normally.
  • The image icons change normally.

Below is the jquery click event script

$(".fevent").live('click', function(){
    $.ajax({
        url: 'http://192.168.3.100:3000/events.json?playerid='+$('#playerid').html(),
        type: "get",
        cache: false,
        success: function(data) {   
            //keep the element is always empty first before loading anything into it
            $('#events_table').html('');

            //fill the table with offers
            $.each(data, function(index, event) {
                if (event['read'] == 1){
                    $('#events_table').append('<tbody><tr class="event_list"><td class="spacer"><img alt="Spacer" src="css/images/spacer.png"></td><td class="image"><img height="60px" src="css/images/'+ event['code'] +'e.png" width="60px"></td></td><td class="description"><h3>'+ event['description']+ '</h3><p>Start Date: '+ month[(new Date(event["startdate"])).getMonth()] + ' ' + (new Date(event["startdate"])).getDate() +', '+ (new Date(event["startdate"])).getFullYear() +'</p><p>End Date: '+ month[(new Date(event["enddate"])).getMonth()] + ' ' + (new Date(event["enddate"])).getDate() +', '+ (new Date(event["enddate"])).getFullYear() +'</p></td></tr>');
                }
                else {
                    $('#events_table').append('<tbody><tr class="event_list_unread"><td class="spacer"><img alt="Spacer" src="css/images/spacer.png"></td><td class="image"><img height="60px" src="css/images/'+ event['code'] +'e.png" width="60px"></td></td><td class="description"><h3>'+ event['description']+ '</h3><p>Start Date: '+ month[(new Date(event["startdate"])).getMonth()] + ' ' + (new Date(event["startdate"])).getDate() +', '+ (new Date(event["startdate"])).getFullYear() +'</p><p>End Date: '+ month[(new Date(event["enddate"])).getMonth()] + ' ' + (new Date(event["enddate"])).getDate() +', '+ (new Date(event["enddate"])).getFullYear() +'</p></td><td class="mark_as_read"><img alt="Unread1" class="unread" src="css/images/unread1.png"><p class="read" style="display:none">events/'+event["id"]+'</p></td></tr></tbody>');    
                    $('#total_bulbs').html(event['total_bulbs']);
                }
                count_bulbs = count_bulbs + parseInt(event['total_bulbs']);
            });

            //working fine
            $('#signin_content').hide();
            //working fine
            $('#signin_header').hide();
            //working fine
            $('.submitimg').hide();
            //working fine
            $('#player_header').show();
            //working fine
            $('#player_content').hide();
            //working fine
            $('#offers_content').hide();
            //working fine
            $('#footer').show();
            //working fine
            $('#events_content').show();

            //*******************this is the header and it is not changing**************************
            $('.alignleft').html('Events');

            $('.fhome').html('<img alt="Home" class="footer_img" src="css/images/home.jpg" width="100%">');
            $('.foffer').html('<img alt="Offers" class="footer_img" src="css/images/offers.jpg" width="100%">');

            //****************this is not changing also****************************
            $('.fevent').html('<img alt="Events" class="footer_img" src="css/images/eventsover.jpg" width="100%">');

        }//end of fevent success
    });//end of fevent ajax
    $( "[data-position='fixed']" ).fixedtoolbar( 'updatePagePadding' );
});//end of fevent

The following is my header:

 <div data-role="header" data-tap-toggle="false" data-position="fixed" id="player_header" style="display:none">
    <img alt="Header" src="css/images/header.jpg" width="100%" class="headerimg">
    <div class="ui-bar">
        <h3 class="alignleft"></h3>

        <div class="alignright" id="home_notification"><img alt="Redlight" height="31px" src="css/images/redlight.png" class="notification_img" width="35px"></div>
        <div style="clear: both;"></div>

    </div>
</div>

and the following is my footer

 <div id="footer" style="display:none">
    <ul>
        <li class="fhome"><img alt="Home" class="footer_img" src="css/images/home.jpg" width="100%"></li>
        <li class="foffer"><img alt="Offers" class="footer_img" src="css/images/offers.jpg" width="100%"></li>
        <li class="fevent"><img alt="Events" class="footer_img" src="css/images/events.jpg" width="100%"></li>
        <li class="fpromo"><img alt="Promo" class="footer_img" src="css/images/promo.jpg" width="100%"></li>
        <li class="fnews"><img alt="News" class="footer_img" src="css/images/news.jpg" width="100%"></li>
    </ul>

</div>
8
  • Do you get any scripting errors when it doesn't do what you are expecting it to?
    – MrOBrian
    Sep 20, 2012 at 21:50
  • no, it does not give me any errors at all. More over, if i put an alert statement just before and after the manipulation, the alert statement indicates the different values, but the visuals won't change
    – sagar pant
    Sep 20, 2012 at 21:54
  • Canyou provide the complete markup... Where is the events_table table Sep 20, 2012 at 21:59
  • Make sure the inserted HTML is well formed. There's a spurious </td></td> (twice), a missing </tbody>, and all img tags should be of the form <img ..... /> (with trailing fwd-slash). Sep 20, 2012 at 23:15
  • @sushanthreddy : here is my events table HTML...<div id="events_content" style="display:none"><table id="events_table"><!-- events goes here--></table></div>.....@Beetroot-Beetroot: Event a simple replacement of text is not being executed...$('.alignleft').html('Events');....However, I think I have not mentioned that I am working on an android phone app. It is getting remote data from rails via ajax. The framework on android to make ajax request is phonegap
    – sagar pant
    Sep 21, 2012 at 1:06

1 Answer 1

0

.live is deprecated.. try using .on instead..

$(function() {
    $(".fevent").on('click', function(){

});

Also make sure your code is inside the DOM ready event.. Check in the browser whether you see a request being sent in the first place by hitting the F12 button

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.