Help decoding JavaScript in WordPress theme

JavaScript
1

Hi,

I’m working on a site using a ready made WordPress theme. This includes a template for a Calendar page listing upcoming events. I’ve edited the Calendar page template so that before the events listings there is a paragraph of introductory text using the WordPress function ‘the_content’. This is followed by listings for the current month and users can click ‘Prev’ and ‘Next’ to move through the calendar.

My problem is that when a user scrolls through to the next or previous month the introductory paragraph text is lost, but the URL stays the same. After a lot of digging around today I’ve established that this is because the the content in ‘the_content’ is lost when the page updates.

The links look like this:

<div class="monthselect">
  <a class="prevlink plink" "="" rel="2/2012" href="#">PREV</a>
  <a class="nxtlink plink" "="" rel="4/2012" href="#">NEXT</a>
</div>

I don’t think this loss of data is related to the PHP due to fixes I’ve tried. So, I was looking through the themes JavaScript and have found this, listed under a section titled ‘calendar’:

  	$('a.plink').live('click', function() {
  		$(this).addClass('currp');
  		ado();
  		return false;
  	});
  	
  	function ado() {
  		$('.imgloader').show();
  		var sender = $('.currp').attr('rel'),
  			data = { action: 'netlabs_get_ajaxdata', type: 'get_cal', senddata: sender};
		$.post(ajax_url, data, function(response) {	
			$('.calselect').html(response);
			$('.imgloader').hide();
		});
  	}

Could anyone give me their thoughts on this? I have absolutely zero experience of JavaScript, so don’t know where to start with decoding a custom built function like this. If you could tell me roughly what its doing, that would be great!

2

Is the content you want to keep inside of the .calselect element? If so it will be replaced out when $(‘.calselect’).html(response); runs.

Additionally it’s probably worth noting that those links look a little malformed, with the extra “=”" in between the two attributes, so you may want to remove that.


<div class="monthselect">
  <a class="prevlink plink" [COLOR=#ff0000]"=""[/COLOR] rel="2/2012" href="#">PREV</a>
  <a class="nxtlink plink"[COLOR=#ff0000] "=""[/COLOR] rel="4/2012" href="#">NEXT</a>
</div>
3

What it’s doing is to send data to ajax_url, and when it receives a response it takes the element with a ‘.calselect’ class and replaces its contents with the response that was returned from the ajax_url.

4

@AussieJohn - yes, the content I want is in the ‘.calselect’ element. Thanks for the info, very helpful! As for the wierd “=”" bit - it’s code generated from the themefiles somehow, so not sure how to edit that! I figure it’s not doing any harm though?..

@paul_wilkins - thanks for the response, its really helpful :slight_smile:

The theme author has agreed to take a look, but this has been really helpful in aiding my understanding and giving him my best guess as to where the issue is - massive thanks to you both :slight_smile: