gshell

I can log in to phpbb as admin (ID=2) with no problem.
I checked the phpbb cookie domain settings in the ACP and they are set to ‘localhost’. Should it be localhost:81?
I also changed my browser (Windows 10 – Edge) cookie settings to “Do Not Block Cookies” just to see if it made any difference. – No change. I can not log into WP admin account (ID=1) or a second administrator account that I created for testing.

Could it have anything to do with the installation directories of php and WP?
php is installed in C:\Website Development\apache2\htdocs\forum
phpbb is accessed via: https://localhost:81/forum/
wp is installed in C:\Website Development\apps\wordpress
and accessed via: https://localhost:81/wordpress/

Thanks for all of your help.

I cleaned cookies, and tried again – no luck. I still can not log into the WP site. I can log into the phpbb site under admin. I verified via phpmyadmin that the php admin user has ID=2 and that WP admin user has ID=1.

3) remember the joke about uid 1 in wp and phpBB uid 2, they are treated by id and not by username: if you’re installing with uid 1 in wordpress, the user id 2 in phpBB need to exist also

Are you implying that WP needs to have 2 users one with ID=1 and a second with ID=2 that matches the php ID=2? If so, then it seems to make sense to me that the WP ID=1 would need to be something other than ‘admin’ and that WP ID=2 would need to be ‘admin’ to match the php ID=2.

I copied the wp-w3all-config folder to C: and edited the values from the default config.php file as you suggested. When I edited the path in the plugin to point to it, nothing turned green, but when I saved the WP-W3all configuration, WordPress logged me out of the site, took me to the home page, and I could no longer log in. I commented the last line of the config file so that I could log in again. Then after being logged into the WP site as admin, I uncommented the line and saved it. When I then saved the WP-W3all configuration I received the error: “You can’t perform this action.” The browser URL showed: https://localhost:81/wordpress/wp-admin/options-general.php?page=wp-w3all-options

Any suggestions?

bcworkz,
Maybe I don’t understand what you are saying, but I don’t believe using the $jq click function is adding listeners to elements that already have listeners as I moved the function from where it was in the code to the success code. I did not duplicate it. Since the cancel buttons are only created by the event_list function that is called by the eventid_callback, I just added their event listener in the success code for that callback function. If I understand it correctly, the ajax exchange creates the cancel buttons, then the success code adds the event listener to the elements that it just created. I don’t see where they could have received another event listener prior to that.

OK, Not as easy as I had expected. Apparently the addEventListener method must be applied to specific elements by ID. I tried to apply it to a class=cancel_btn, but received an error that method was not allowed on those elements. Since I would have no idea how many cancel buttons are in the registrant list (cancel buttons only exist if the logged in user was also the same user that created the reservation in the first place), or what their IDs are, that would not be a solution path.
Since the cancel buttons are only created via the registrant list function and the registrant list function is only called by the eventid_callback function, I decided to simply move the $jq(“.cancel_btn”).click(function() to the success area of the eventid ajax call. Viola! All is well!
That pretty much completes the major programming efforts of this task. Now I need to move on to learning more about CSS so that I can make it ‘pretty’ and add a few minor tweaks.
Thank you so much for all the help you have provided along the way. It has been a rewarding learning experience that I am sure still has more rewards to be earned.

I suggest you instead use JavaScript .addEventListener() for each individual added element

I think that is the real issue. I have the same issue when attempting to add some CSS style to the elements. The elements added via the ajax call were not changed with the CSS coding.
If I understand what you are saying correctly, I need to add the event listener in the ‘success’ section of my eventid ajax call which is what is displaying the registrant list and all the new cancel buttons. I’ll let you know how I make out.

bcworkz,

Clearly I still have a lot to learn. Since processing the hardcoded eventid in the main function appeared to work properly, I decided to have the eventid_callback function call that function directly with the variable $event_id passed to it instead of passing it to the rsvp_event_list function thinking that would replace the hardcoded value with a dynamic variable and all would be fine. Wrong! the result was the same. The registrant list displayed correctly but the JS file did not recognize or process the cancel buttons created by the registrant list function.

This is why I have the suspicion that the problem is a timing issue. Think of the page as being 2 parts. The first part is the input form, the second part is the registrant list. If I hardcode the eventid into the main function both parts are created up front as the page is loaded and the JS file is able to recognize and process actions on all of the input fields and buttons. When the second part (the registrant list) is created after the page is loaded (as it must be in order for the eventid to be dynamically built from the page being displayed), the JS file does not recognize the cancel buttons created after the initial page load. Simply refreshing the page does not alleviate the issue.

Earlier I was calling the registrant list via a shortcode, but as I moved toward creating the $event_id variable dynamically, I did not know how to add a variable into the shortcode definition. I was wondering if something like this could be made to work and whether calling the event list via a shortcode changes the timing sequence so that the JS file would recognize the buttons:

add_shortcode( 'Event-List', 'rsvp_event_list($event_id)');

Any advice would be appreciated.

bcworkz,

Thanks for your input. I will have to study it more to see if it can help. I’ll try to explain better what I am doing.

On page load, the eventid is parsed from information on the page and sent to the server via ajax.

$jq(document).ready(function(){
	if($jq("#tribe-events-content").hasClass("tribe-events-single")) {
		// alert ("on single event page");
		$jq(".tribe-events-nav-pagination").hide();
		var event_category = ($jq( ".tribe-events-event-categories" ).text());
		// alert ("Event Category is " + event_category);
		var event_start = ($jq( ".tribe-events-start-date" ).attr("title"));
		// alert ("Event Start Date is " + event_start);
		var event_id = event_category.substring(0,1) + event_start.substring(0,4) + event_start.substring(5,7) + event_start.substring(8,10);
		alert ("Event ID is " + event_id);

		$jq.ajax({
			url : ajax_rsvp.ajax_url,
			type : 'post',
			data : {
				action: 'eventid_callback',
				event_id_name : event_id
			},
			success:function(data) {
				// This outputs the result of the ajax request
				console.log(data);
				// Return response to client side
				$jq('#ajax_response').html( data );
				return false;

			},
			error: function(errorThrown){
				console.log(errorThrown);
			}
		}); // End of AJAX function

Callback function:

add_action( 'wp_ajax_eventid_callback', 'eventid_callback' );
function eventid_callback() {
	$event_id = $_POST[event_id_name];
	echo "<p>Event ID from eventid_callback is: {$event_id} </p>";
	
	include ('event-rsvp-list.php');
	rsvp_event_list($event_id); // cancel buttons do not work from this display
		
	die();
}; // end of eventid_callback function

Cancel Button creation in event-rsvp-list.php:

<input type="button" class="cancel_btn" id="<?php echo $btn_id; ?>" name="<?php echo $btn_id; ?>" value="Cancel">

Cancel Button processing in the JS file:

	$jq(".cancel_btn").click(function(){
		// Determine which cancel button was clicked
		var btnid = event.srcElement.id;
		var strlng = btnid.length;
		var rowid = btnid.substring(11,strlng);
		// alert("Cancel Row_ID " + rowid);
		
			$jq.ajax({
				url : ajax_rsvp.ajax_url,
				type : 'post',
				data : {
					action: 'rsvp_callback',
					registrant_type : 'cancel',
					delete_row : rowid
				},
				success:function(data) {
					// This outputs the result of the ajax request
					console.log(data);
					// Return response to client side
					//$jq('#rsvp_response').html( data );

					alert("Sorry you will be unable to attend");
					location.reload(true);

				},
				error: function(errorThrown){
					console.log(errorThrown);
				}
			}); // End of AJAX function
			
	}); // End of Cancel Button function
					
}); // End of Main Document Ready Function

In the main plugin function that is executed via a shortcode, I temporarily have the following after creating an input form. I realize that at this point, two copies of the registrant list are created. One through the eventid_callback function that displays correctly, but the cancel buttons do not work, and a second from the main plugin function that displays and works correctly, but I have to hardcode the $event_id variable.

	$event_id = $_POST[event_id_name]; // not working
	$event_id = "C20181201"; /* eventually build from event category and start date */
	echo "<p>Event ID in MAIN following input table is: {$event_id} </p>";
	include ('event-rsvp-list.php');
	rsvp_event_list($event_id); // this works with hardcoded $event_id

	return '<div id="ajax_response"></div>';
	
}; // end of rsvp_event_rsvp function

If I could either pass the $event_id variable from the eventid_callback function to the main to replace the hardcoded variable, that should work, or figure out what I need to do to be able to make the JS file handle the Clicks on the cancel buttons added via the eventid_callback.

Thanks for any advice you may have.

I think I found the problem.

I had included the new eventi_id callback inside another function of the plugin, when I moved it outside of that function into the main plugin code, it worked properly.

Thanks to all that helped me out.

Josh,
Thanks, I tried that sequence, but it made no change.

What do you mean by your item 1)? I have included a JS Alert box with the variable displayed immediately before the ajax call. Is there something else I could do? I am looking for more methods to debug the ajax process as I still have trouble with it as you can tell.

What I am confused about is that if I change the action line in the JS file from:

			data : {
				action: 'rsvp_callback',
				event_id_name : event_id
			},

To:

			data : {
				action: 'eventid_callback',
				event_id_name : event_id
			},

I get an error in the console log of:

HTTP400: BAD REQUEST - The request could not be processed by the server due to invalid syntax.
(XHR)POST - https://localhost:81/wordpress/wp-admin/admin-ajax.php

When using the rsvp_callback function the AJAX call works fine although that function does things that I do not want to do all of the time.

The code for the eventid_callback function is pretty simple and I don’t see what I have wrong.

add_action( 'wp_ajax_eventid_callback', 'eventid_callback' );
function eventid_callback() {
	$event_id = $_POST[event_id_name];
	echo "<p>Event ID from eventid_callback is: {$event_id} </p>";
	die();
}; // end of eventid_callback function

Hi bcworkz,
I should have caught the omission of the die() in the callback function. I added it and it made no difference.
Does an AJAX call require a button or input function in order to work? All examples of an AJAX call seem to have a Submit button that fires it. In my case at this time, I added the call to extract information about the page immediately on page load IF the page has the proper ID and Class.

Thanks Jacob, That makes sense and I understand the hook process better.

In my case, the calls should always be executed only when a user is logged in, so I don’t see a need for the nopriv hook. In fact, if this routine were to be executed by someone that was not logged in, it should return an error and exit.

I still don’t understand why I am getting the HTTP400 BAD REQUEST error. Can I use the same AJAX URL (ajax_rsvp.ajax_url), for two separate callback functions (eventid_callback, and rsvp_callback) or do I need to have unique urls for each AJAX exchange?

Thank You. That worked.

Hi sjaure,
I haven’t had much time to work on this as I have been traveling. I have changed the names of a lot of the functions and variables so that I have a better handle on what value is changing when I make a change. I have patterned the revised code after the simple example you suggested at https://wptheming.com/2013/07/simple-ajax-example/. The previous syntax error is resolved, but I now have a new error that I can not resolve.

One error I had was that the callback function was buried inside the main php function. I have separated them to resolve. The my-ajax-test.php file now looks like:

add_action( 'wp_enqueue_scripts', 'ajax_test_enqueue_scripts' );
function ajax_test_enqueue_scripts() {
	wp_enqueue_script( 'my-script-handler', plugins_url( '/my-ajax-test.js', __FILE__ ), array('jquery'), '1.0', true );
	wp_localize_script( 'my-script-handler', 'ajax_test', array(
		'ajax_url' => admin_url( 'admin-ajax.php' )
	));
}
function my_ajax_test() {

	echo "<p>Hello World!</p>";
	
/****************************
* Create Input Form
****************************/
?>
	<form action="">
	<input type="text" id="ajax_fruit">
	<p>Enter Fruit Name</p>
	<br><br>
	<input type="button" id="ajax_submit" value="Enter">
	</form> 
<?php	

};
add_action( 'wp_ajax_my_ajax_callback', 'my_ajax_callback' );

function my_ajax_callback() {
	$fruit = $_POST[fruit];
	
	if ( isset($_POST) ) {
	echo "<p> $_POST SET! </p>";
	echo "<p> Submitted Fruit is {$fruit} </p>";

	// Let's take the data that was sent and do something with it
	if ( $fruit == 'Banana' ) {
		$fruit = 'Orange';
	}
	echo $fruit;	
	} else {
	echo "<p> $_POST NOT SET! </p>";
	};
	
	die();
};

add_shortcode('My-AJAX-Test', 'my_ajax_test');

The JS file is below. Note the comments at the various alert stages that work and the error shown in the Console at the AJAX call (‘fruit’ is not defined). I am not sure which fruit is being referred to, but hard coding it to fruit : ‘Banana’ makes that error go away, but obviously the data is no longer coming from the input field.
When hardcoded as ‘Banana’, Console has no errors and data properly displays echo’s from my_ajax_callback (<p> Array SET! </p><p> Submitted Fruit is Banana </p>Orange).

var $jq = jQuery.noConflict();
$jq(document).ready(function(){	
/* Send guest name to server via AJAX */

	$jq("#ajax_submit").click(function(){
	alert("Submit Button was clicked");
	
/* Send guest name to server via AJAX */

	var fruit = document.getElementById("ajax_fruit").value;
	alert("Submitted Fruit is " + fruit); // alert is correct to this point

});

$jq.ajax({                 // error in console:  SCRIPT5009: SCRIPT5009: 'fruit' is not defined
	url : ajax_test.ajax_url,
	type : 'post',
	data : {
		action: 'my_ajax_callback',
		fruit : fruit
	},
	success:function(data) {
		// This outputs the result of the ajax request
		console.log(data);
	},
	error: function(errorThrown){
		console.log(errorThrown);
	}
}); // End of AJAX function

}); // End of Main Document Ready Function

I’m not entirely sure how to grab the information from the callback function and use it in the my_ajax_test function yet, but would like to just deal with one error at a time.

Thank you so much for all of your help and your patience is dealing with a complete novice.

@sjaure
From the console I see the following immediately after loading the page with my input form:

HTML1300: Navigation occurred.
_test2 (1,1)
 JQMIGRATE: Migrate is installed, version 1.4.1
 TEC Debug: Tribe Events JS init, Init Timer started from tribe-events.js.

 User agent reported as: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/17.17134

 Live ajax returned its state as: "false

I suspect the last line is an issue.
Further down I have the following error message:

 HTTP400: BAD REQUEST - The request could not be processed by the server due to invalid syntax.
(XHR)POST - https://localhost:81/wordpress/wp-admin/admin-ajax.php

I can successfully display localhost:81/wordpress/wp-admin/admin-ajax.php in a browser page. It contains a single digit ‘0’. The php code exists in the htdocs/wp-admin folder. The last line of which is:
wp_die( ‘0’ );
Clearly where the 0 comes from.

I believe I have properly enqueued the script file with the following in the main plugin php file:

add_action( 'wp_enqueue_scripts', 'ajax_test_enqueue_scripts' );
function ajax_test_enqueue_scripts() {
	wp_enqueue_script( 'my-script-handler', plugins_url( '/my-ajax-test.js', __FILE__ ), array('jquery'), '1.0', true );

	wp_localize_script( 'my-script-handler', 'ajax_test', array(
		'ajax_url' => admin_url( 'admin-ajax.php' )
	));
}

The ajax code in the JS file looks like this:

$jq.ajax({
	url : ajax_test.ajax_url,
	type : 'post',
	data : {
		'action': 'my-ajax-test',
		'ajax_guest_name' : g_name
	},
	success:function(data) {
		// This outputs the result of the ajax request
		console.log(data);
	},
	error: function(errorThrown){
		console.log(errorThrown);
	}
}); // End of AJAX function

Any suggestions as to where I should go from here?
Thanks