Discussion Board

Results 1 to 3 of 3
  1. #1
    Registered User
    Join Date
    Nov 2008
    Posts
    9

    jquery .html() method not always working on device

    I'm using the jquery .html() method and although it works if I use it on dom ready, when I try to use it within a click event, it crashes the app.

    I'm delegating events to a div#nav, and on click, some JS executes and I need to update the html of div#header h1. For some reason, the .html() part crashes. I've tried commenting out all the other code that's executing on click, but it still crashes the app. It also happens if I try .text() instead of .html()

    Any help would be appreciated.

    Thanks.

  2. #2
    Nokia Developer Champion
    Join Date
    Nov 2007
    Location
    Rome, Italy
    Posts
    2,406

    Re: jquery .html() method not always working on device

    Hi alexheyd,

    can you post some relevant code, so It'll be possible to test it? Basic tests, like using html() to update a simple div with a hyperlink, seem to correctly work, so your problem could have something to do with the structure of the updated node, or also with the new node content (just guessing here...)

    Also, a question: are you testing on emulator or device, and which?

    Pit

  3. #3
    Registered User
    Join Date
    Nov 2008
    Posts
    9

    Re: jquery .html() method not always working on device

    Code:
    (function($){
    	$.Widget = function(options){	
    		var self = this;
    		this.defaults = {
    			hideNav: false, currentClass: 'current', sectionClass: 'section'
    		};
    		this.settings = $.extend({}, this.defaults, options);
    		
    		this.init = function(){
    			this.settings.container.find('.' + this.settings.sectionClass + ':first').css('left', 0).show();
    			
    			this.events.content['a.landing'] = this.events.nav['a'];
    			this.attach.events();
    				
    			var catCount = 0;
    			this.settings.container.find('.' + this.settings.sectionClass).each(function(){
    				$(this).data('index', catCount);
    				catCount++;
    			});
    		}
    		
    
    		
    		this.events = {
    			nav: {
    				'a': function(e){
    					e.preventDefault();								
    					$('#nav').show();
    					var $target = ($(e.target).is('a')) ? $(e.target) : $(e.target).parents('a');
    					var id = $target.attr('rel');
    					//if (!$('#' + id).is('.current')) self.show.page($('#' + id));
    
    					self.update.header(id);
    					
    				}
    			}
    		}
    		
    		this.attach = {
    			events: function(){
    				self.settings.nav.delegate('click', self.events.nav);
    				self.settings.content.delegate('click', self.events.content);
    			}
    		}
    		
    		this.update = {
    			header: function(id){
    				id = id.split(' ')[0];
    				var sectionName = self.get.sectionName(id);
    				var newCount = self.get.newCount(id);
    				
    				$('#header')
    					.attr('class', '')
    					.addClass(id)
    					
    				$('#header h1').html(self.settings.title + ' | <span class="sectionName">' + sectionName + '</span> ' + '(' + newCount + ')');
    			}
    		}
    		
    		this.get = {
    			sectionName: function(id){
    				switch(id){
    					case 'nokiaWorld':	return 'Nokia World';		break;
    					case 'forDevice':	return 'For Your Device'; 	break;
    					case 'shareOvi':	return 'Share on ovi'; 		break;
    				}
    			},
    			newCount: function(id){
    				return $('#' + id).find('a.new').size();
    			},
    			pipesId: function(id){
    				switch(id){
    					case 'nokiaWorld':	return '856b9414b753b5d8b9f5bb056f98bb49';		break;
    					case 'forDevice':	return '7631c5fbceb2fab25d4fa03a5045e7a4'; 		break;
    					case 'shareOvi':	return '02929cf5d8ca35fd756f9f53125a9b69'; 		break;
    				}
    			}
    		}
    	}
    })(jQuery);
    And calling this code is:

    Code:
    jQuery(function($){
    	$('#home a span').add('.settings').add('#nav').add('#content .section').add('#landingbar').hide();
    	
    	var newsWidget = new $.Widget({
    		container: $('#container'), nav: $('#nav'), content: $('#content'), title: 'Nokia News'
    	});
    });

    The troublesome code is in the $.Widget class, this.events.nav. The node being updated is <div id="header"><h1>Text</h1>[... some more html...]</div>

    Edit: However, this works if I do $('#header h1').get(0).innerHTML = '<p>TEST</p>' instead
    Last edited by alexheyd; 2008-11-14 at 22:45.

Similar Threads

  1. not working in device
    By arumilli in forum Symbian
    Replies: 11
    Last Post: 2008-06-11, 08:17
  2. Problems with on device debugging on N80 device
    By grai in forum Mobile Java Tools & SDKs
    Replies: 7
    Last Post: 2007-08-16, 15:05
  3. Wireless device testing method?
    By Nokia_Archived in forum PC Suite API and PC Connectivity SDK
    Replies: 0
    Last Post: 2002-05-27, 15:03

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
×