Manipulating the $.ajax( ) data Parameter

[iwato]

BACKGROUND:  I have successfully integrated both pagination and the simplePagination paginator into my website.  Now I must fine tune the integration so as to overcome several associated non-optimal conditions.  In order to achieve it appears that I need to understand better the use of the variables and functions utilized with the AJAX request.  Please consider the following pieces of code and answer the questions below. 

The JAVASCRIPT:

					.click(function() {
						$.ajax({
							url: '_utilities/php/ajax_data_dscr.php',
							dataType: 'JSON',
							data: { 'podType': podType },
							statusCode: {
								404: function() {
								alert( "Page not found" );
							}},
							success: function (jsonData){
								console.log(jsonData)
								$('#main').html('');
								$.each(jsonData, function(key, object){
										$('#main').append("<div class='paginate'><div class='item_info podcast_item'><div class='pod_num'>" + object.podcast_no_item + "</div><div class='pod_title'>" + object.item_title + "<br />" + object.item_pubdate + "</div></div><div class='pod_describe'>" + object.item_description + "</div></div>");
								});
								var collection = $(".paginate");
								var collNum = collection.length;
								var perPage = 10;
								collection.slice(perPage).hide();
								$("#pagn").pagination({
									items: collNum,
									itemsOnPage: perPage,
									cssStyle: "light-theme",
									onPageClick: function(pageNum) {
										var start = perPage * (pageNum - 1);
										var end = start + perPage;
	//									console.log(event);
	//									console.log(pageNum);
										collection.hide().slice(start, end).show();
									}
								});
							}

The HTML:

		<div id='main'>...</div><!-- end div#main -->
		<div id='pagn'>&nbsp;</div><!-- end div#pagn -->

BACKGROUND:   From the above code you can probably notice that the #main DIV is emptied before it is dynamically filled via jQuery's .append() method. The heading of the newly filled #main DIV should vary with the kind of information that is entered.  To this end I created the following switch. Unfortunately, however, I cannot get it to work.  Either the value of the podType variable is not being read, or the code itself has not been properly set into the AJAX routine.  The following is an example of one of my attempts.

							beforeSend: function(podType) {
								$('#main').html('');
								switch (podType) {
									case clausal:
										$('#main').html('<h1>Clausal Analysis</h1>');
										break;
									case linear:
										$('#main').html('<h1>Linear Analysis</h1>');
										break;
									case inversion:
										$('#main').html('<h1>Socratic Inversion</h1>');
										break;
									case chrono:
										$('#main').html('<h1>All Categories</h1>');
										break;
								}
							}

QUESTION ONE: How do I access the key-value pair entered as the value of the data property?

QUESTION TWO: How would you go about insuring that a new list heading is entered with each different value of podType.

NOTE:  You can visit the page by clicking on the words PROXY LINK at the bottom of  http://www.grammarcaptive.com/sender_proxy.php  In the navigation bar on the page that opens find the word Chronology, click on it, and then click on the phrase Podcast index ...  This will show you a successful implementation of simplePagination and provide you with a visual understanding of what I am able and not able to achieve.

Roddy

Edited October 20, 2017 by iwato

[justsomeguy]

According to the documentation for the ajax method, beforeSend is called before the request is even sent.  The 2 parameters that the function gets passed are the jQuery XHR object, and the settings object.  So in your code, podType is set to the jQuery XHR object.  The beforeSend function is really for modifying the request before it goes out (or canceling it), so I would think your code for changing the page should all go in the success function.  Inside that success function podType will still have the value it had when you send the request, unless you change the value inside the function.  You also need to quote all of those values in your case statements, otherwise you're trying to compare the value with different variables.

[iwato]

Yes, it turns out that the value of the podType variable was still available within the success function.  Placing quotations marks around the switch options was also very important.

Have a great weekend!

Tell nest tea

Roddy

Edited October 21, 2017 by iwato