Same page data updating

Damond · September 6, 2015

Hello again everyone. Here I go jumping into something that is way over my head in the terms of coding skill, but what better way to learn to swim then by jumping into the deep end?

So here is the idea. I have a screen that has a little map and four direction arrows. I'm trying to figure out how to code things so that when you click on one of the arrows it updates your location with out changing pages. I know the page will refresh. My limited coding skills are telling me to use a form or a switch but I know both of these are wrong. There must be a simpler way of doing this that I just don't see.

Here is a shot of the screen I am working with. Each of the arrows is already a link that goes no where.

[ATTACH=CONFIG]2183[/ATTACH]

KyleMassacre · September 6, 2015

you can use a button inside a form like you suggested or an anchor like:

<a href="?direction=up" id="upArrow"><img src="yourImagePathHere.ext"/></a><!-- or done with CSS styling -->

Or done with ajax would be cool too:

<?php
echo '<a href="#" class="directional" id="up"><img src="yourImagePathHere.ext"/></a>';

$('.directional').on('click',function(e){
   var direction = $(this).attr('id');
   $.ajax({
       method: "POST",
       url: "some.php",
       data: { 
           direction: direction
       }
   }).done(function( msg ) {
       $( "#notificationArea" ).html( msg );
   }).fail(function(req,msg) {
       $( "#notificationArea" ).html('Request failed: ' + msg );
   });
   e.preventDefault();
});

Damond · September 6, 2015

[MENTION=68711]KyleMassacre[/MENTION] Thanks for the advice.

While I agree ajax would be cool that is even farther away from any coding I know how to do...

So lets go with your anchor:

<a href="?direction=up" id="upArrow"><img src="yourImagePathHere.ext"/></a>

If I use this method would I just move on to something like:

if (direction=up]{
    $db->query("UPDATE DB HERE");
}

KyleMassacre · September 6, 2015

With that concept it would be via a $_GET request so I'm not sure if you were using some kind of pseudo code there but it would fail. It yes that would be the way to do it. Me personally, I would use a switch statement for each of the directions, that way they can't really fiddle around with the request that easily

Damond · September 6, 2015

But won't a switch make it change pages?

KyleMassacre · September 6, 2015

No, not unless you make it go to another page. You can have a look here to see what I did. I commented out the Ajax portion on it though:

http://jsfiddle.net/owebfb0g/

Coly010 · September 7, 2015

you can use a button inside a form like you suggested or an anchor like:

<a href="?direction=up" id="upArrow"><img src="yourImagePathHere.ext"/></a><!-- or done with CSS styling -->

Or done with ajax would be cool too:

<?php
echo '<a href="#" class="directional" id="up"><img src="yourImagePathHere.ext"/></a>';

$('.directional').on('click',function(e){
   var direction = $(this).attr('id');
   $.ajax({
       method: "POST",
       url: "some.php",
       data: { 
           direction: direction
       }
   }).done(function( msg ) {
       $( "#notificationArea" ).html( msg );
   }).fail(function(req,msg) {
       $( "#notificationArea" ).html('Request failed: ' + msg );
   });
   e.preventDefault();
});

I always have a problem with event.preventDefault(). it doesnt like me, i have to use event.stopPropagation(); also for it to behave.

KyleMassacre · September 7, 2015

Or you can be ghetto and do a return false; in place of the event.*()

Damond · September 7, 2015

So I used the anchor method and figured out how to work it with a switch:

print"<center><a href='?direction=north'><img src='images/north.png'></center></a>";

My switch:

$_GET['direction'] = array_key_exists('direction', $_GET) && in_array($_GET['direction'], ['north', 'east', 'south', 'west']) ? $_GET['direction'] : null;
switch($_GET['direction']) {
   case 'north':
   	$db->query("UPDATE user_minions SET north_south=north_south+1 WHERE userid=$userid");
        if ($minions['north_south']>50){
         $db->query("UPDATE north_south=50 WHERE userid=$userid");
        }
       break;
   case 'east':
       $db->query("UPDATE user_minions SET east_west=east_west+1 WHERE userid=$userid");
       if ($minions['east_west']>50){
         $db->query("UPDATE east_west=50 WHERE userid=$userid");
        }
       break;
   case 'south':
       $db->query("UPDATE user_minions SET north_south=north_south-1 WHERE userid=$userid");
       if ($minions['north_south']<0){
         $db->query("UPDATE north_south=0 WHERE userid=$userid");
        }
       break;
   case 'west':
       $db->query("UPDATE user_minions SET east_west=east_west-1 WHERE userid=$userid");
       if ($minions['east_west']<0){
         $db->query("UPDATE east_west=0 WHERE userid=$userid");
        }
       break;
}

I'm running into the issue that the location is not updating correctly. It is always one behind which forced me to add another if statement.

I did like the way [MENTION=68711]KyleMassacre[/MENTION] showed me with the ajax but I would have no idea how to add other actions such as update db or random events like the chance of finding an item.

KyleMassacre · September 7, 2015

Easy:

move.php

<?php
include_once('globals_nonauth.php');


$userid = $_POST['userid'];


$minions = ""; //add your query for this minions array here
$_POST['direction'] = array_key_exists('direction', $_POST) && in_array($_POST['direction'], ['north', 'east', 'south', 'west']) ? $_POST['direction'] : null;
switch($_POST['direction']) {
   case 'north':
       $db->query("UPDATE user_minions SET north_south=north_south+1 WHERE userid=$userid");
        if ($minions['north_south']>50){
            $db->query("UPDATE north_south=50 WHERE userid=$userid");
            echo "You have just moved". $_POST['direction'];
        }
       break;
   case 'east':
       $db->query("UPDATE user_minions SET east_west=east_west+1 WHERE userid=$userid");
       if ($minions['east_west']>50){
            $db->query("UPDATE east_west=50 WHERE userid=$userid");
            echo "You have just moved". $_POST['direction'];
        }
       break;
   case 'south':
       $db->query("UPDATE user_minions SET north_south=north_south-1 WHERE userid=$userid");
       if ($minions['north_south']<0){
            $db->query("UPDATE north_south=0 WHERE userid=$userid");
            echo "You have just moved". $_POST['direction'];
        }
       break;
   case 'west':
       $db->query("UPDATE user_minions SET east_west=east_west-1 WHERE userid=$userid");
       if ($minions['east_west']<0){
            $db->query("UPDATE east_west=0 WHERE userid=$userid");
            echo "You have just moved". $_POST['direction'];
        }
       break;
       default:
       echo "There seems to be an error";
       break;
}

Inside your actual script:

//This goes where you want to display some text to them after they click
echo '<div id="notificationArea"></div>';
//These are your links and place them where you want. Just change the id="whatever direction"
echo '<center><a href="#" class="directional" id="north"><img src="images/north.png"></a></center>';
<script>

$('.directional').on('click',function(e){
   var direction = $(this).attr('id');
   $.ajax({
       method: "POST",
       url: "move.php",
       data: {
           userid: <?php echo $userid; ?>, 
           direction: direction
       }
   }).done(function( msg ) {
       $( "#notificationArea" ).html( msg );
   }).fail(function(req,msg) {
       $( "#notificationArea" ).html('Request failed: ' + msg );
   });
   e.preventDefault();
});
</script>

Damond · September 9, 2015

[MENTION=68711]KyleMassacre[/MENTION]

I did mention that AJAX was way over my head didn't I? :p

So normally I have a coding partner that can help me figure this stuff out but as he has no net for the next few weeks I am on my own.

I get that I needed to create a new page called move.php and put my case stuff in there.

Where I am getting stuck is the AJAX script. Here is my full page code.

<?php
include "globals.php";
if(($ir['jail'] || $ir['hospital']) && $ir['user_level'] !=2) {
   showErrMsg("This page cannot be accessed while on Moa Isle or Regeneration.");
}

$minions=$db->fetch_row($db->query("SELECT * FROM user_minions WHERE userid=$userid"));
if ($minions['location']!=$ir['location'] && $minions['north_south']!=0 && $minions['east_west']!=0){
$loc=$db->fetch_row($db->query("SELECT cityname FROM cities WHERE cityid={$minions['location']}"));
showErrMsg("You are searching the forest in ".$loc['cityname'].". You must move to 0,0 there first.");
}

if ($minions['location']==0){
$db->query("UPDATE user_minions SET location={$ir['location']} WHERE userid=$userid");
} else if ($minions['location']!=$ir['location'] && $minions['north_south']==0 && $minions['east_west']==0){
$db->query("UPDATE user_minions SET location={$ir['location']} WHERE userid=$userid");
} 
print"

<div class='box-style5'>
   <div class='title7c'>
       <h2>Minion Hunting</h2>
   </div>
</div>


<div class='box-style5'>
   <div class='title7e'>
       <h2>Location: ".$minions['north_south'].",".$minions['east_west']."<br>
       Endurance: ".$minions['endurance']."</h2>
   </div>
</div>

<div id='notificationArea'></div>
<table width=75%>
<tr>
	<td colspan=3>";
	if ($minions['north_south']==50){
		print"<center><img src='images/north.png'></center>";
	} else {
		print"<center><a href='#' class='directional' id='north'><img src='images/north.png'></a></center></a>

		<script>

		$('.directional').on('click',function(e){
		    var direction = $(this).attr('id');
		    $.ajax({
		        method: 'POST',
		        url: 'move.php',
		        data: {
		            userid: $userid, 
		            direction: direction
		        }
		    }).done(function( msg ) {
		        $( 'notificationArea' ).html( it works );
		    }).fail(function(req,msg) {
		        $( 'notificationArea' ).html('Request failed: ' + msg );
		    });
		    e.preventDefault();
		});
		</script>";

	}
	print"	
	</td>
</tr>
<tr>
	<td>";
	if ($minions['east_west']<=0){
		print"<img src='images/west.png'>";
	} else {
		print"<a href='#' class='directional' id='west'><img src='images/west.png'>";
		}
		print"
		</td>
	<td><img src='images/forest.png'></td>
	<td>
	";
	if ($minions['east_west']==50){
		print"<img src='images/east.png'>";
	} else {
		print"<a href='#' class='directional' id='east'><img src='images/east.png'></a>";
	}
	print"
	</td>
</tr>
<tr>
	<td colspan=3>";
	if ($minions['north_south']<=0){
		print"<center><img src='images/south.png'></center>";
	} else {
		print"
		<center><a href='#' class='directional' id='south'><img src='images/south.png'></a></center></a>";
		}
	print"
	</td>
</tr>
</table>
<div id=isla-quest> Here you can search the forest of Aniari looking for minions to recruit.  <br><br>You will find a variety of creatures such as Humans, Elves, and Dwarves. You can try and recruit any group of them you come across, but remember that they don't always agree. <br><br>
You have a limited endurance for these hunts. When it is gone you will have to wait for it to refill before you can start looking again.<br><br>
Also if your wish to search the forest of another city you must first move back to location 0,0 in the forest that you are currently searching. 
</div>
";


?>

The finished page should work something like this:

[ATTACH=CONFIG]2185[/ATTACH]

The top box:

Location: The first number should change +1 for north -1 for south. Second number should change +1 for east -1 for west.

Both need to stop at 0 and at 50. My original code was a count behind so it kept going over and under.

Endurance: Should drop by 1 each move. (Not as worried about this as I am getting the location to work.)

Under that box will be another information box that pops up when you actually find something.

"You found a group of 22 Humans."

Something like that.

The very last thing, something else I'm not as worried about until I can get the location to work, is we want to make it to where you can't refresh the page. I don't want someone sitting in one spot and refreshing to make the random run over and over until they find something. They should be forced to change locations.

I know its a lot and I'm not asking for someone to recode my page. I just need some education in using the ajax correctly.

SRB · September 9, 2015

Damond, hit me on Skype later today

Damond · September 12, 2015

[MENTION=50378]Guest[/MENTION] I have been trying to get up with you for a couple of days now. Seems our schedules are just not lining up.

Anyone else out there care to give me a hand with this? I'm completely stuck on this project until I can get this working.

Damond · September 13, 2015

Ok so I talked with [MENTION=65518]Kyle[/MENTION] yesterday for a bit and we tried to do a little debugging. The coding has changed a little.

In the header: I don't know why there are two different ones I think it has something to do with the AJAX chat we are using as well as something else.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

move.php :

<?php
include_once('globals_nonauth.php');
$userid = $_POST['userid'];
$minions=$db->fetch_row($db->query("SELECT * FROM user_minions WHERE userid=$userid"));
$_POST['direction'] = array_key_exists('direction', $_GET) && in_array($_GET['direction'], ['north', 'east', 'south', 'west']) ? $_GET['direction'] : null;
switch($_POST['direction']) {
   case 'north':
        // do north stuff
        if ($minions['north_south']>=50){
         $db->query("UPDATE user_minions SET north_south=50 WHERE userid=$userid");
         print"You can't move any farther north!";
         echo '<META http-equiv="refresh" content="5;URL= /minion_hunt.php"">';
        } 

        if ($minions['north_south']>=0 && $minions['north_south']<=49){
         $db->query("UPDATE user_minions SET north_south=north_south+1 WHERE userid=$userid");
         echo "You have just moved". $_POST['direction'];
        }
       break;
   case 'east':
       // do east stuff
       if ($minions['east_west']>=50){
         $db->query("UPDATE user_minions SET east_west=50 WHERE userid=$userid");
         print"You can't move any farther east!";
         echo '<META http-equiv="refresh" content="5;URL= /minion_hunt.php"">';
        } else {
         $db->query("UPDATE user_minions SET east_west=east_west+1 WHERE userid=$userid");
         echo "You have just moved". $_POST['direction'];
        }
       break;
   case 'south':
       // do east stuff
       if ($minions['north_south']<=0){
         $db->query("UPDATE user_minions SET north_south=0 WHERE userid=$userid");
         print"You can't move any farther south!";
         echo '<META http-equiv="refresh" content="5;URL= /minion_hunt.php"">';
        } else {
         $db->query("UPDATE user_minions SET north_south=north_south-1 WHERE userid=$userid");
         echo "You have just moved". $_POST['direction'];
        }
       break;
   case 'west':
       // do east stuff
       if ($minions['east_west']<=0){
         $db->query("UPDATE user_minions SET east_west=0 WHERE userid=$userid");
         print"You can't move any farther west!";
         echo '<META http-equiv="refresh" content="5;URL= /minion_hunt.php"">';
        } else {
         $db->query("UPDATE user_minions SET east_west=east_west-1 WHERE userid=$userid");
         echo "You have just moved". $_POST['direction'];
        }
       break;

}
?>

minion_hunt.php:

<?php
include "globals.php";

if(($ir['jail'] || $ir['hospital']) && $ir['user_level'] !=2) {
   showErrMsg("This page cannot be accessed while on Moa Isle or Regeneration.");
}

$minions=$db->fetch_row($db->query("SELECT * FROM user_minions WHERE userid=$userid"));
if ($minions['location']!=$ir['location'] && $minions['north_south']!=0 && $minions['east_west']!=0){
$loc=$db->fetch_row($db->query("SELECT cityname FROM cities WHERE cityid={$minions['location']}"));
showErrMsg("You are searching the forest in ".$loc['cityname'].". You must move to 0,0 there first.");
}

if ($minions['location']==0){
$db->query("UPDATE user_minions SET location={$ir['location']} WHERE userid=$userid");
} else if ($minions['location']!=$ir['location'] && $minions['north_south']==0 && $minions['east_west']==0){
$db->query("UPDATE user_minions SET location={$ir['location']} WHERE userid=$userid");
} 



print"

<div class='box-style5'>
   <div class='title7c'>
       <h2>Minion Hunting</h2>
   </div>
</div>


<div class='box-style5'>
   <div class='title7e'>
       <h2>Location: ".$minions['north_south'].",".$minions['east_west']."<br>
       Endurance: ".$minions['endurance']."</h2>
   </div>
</div>";

//notification
echo '<div id="notificationArea"></div>';

print"
<table width=75%>
<tr>
	<td colspan=3>";
	if ($minions['north_south']==50){
		print"<center><img src='images/north.png'></center>";
	} else {
		echo '<center><a href="#" class="directional" id="north"><img src="images/north.png"></a></center>';
	}
	print"	
	</td>
</tr>
<tr>
	<td>";
	if ($minions['east_west']<=0){
		print"<img src='images/west.png'>";
	} else {
		echo '<a href="#" class="directional" id="west"><img src="images/west.png"></a>';
		}
		print"
		</td>
	<td><img src='images/forest.png'></td>
	<td>
	";
	if ($minions['east_west']==50){
		print"<img src='images/east.png'>";
	} else {
		echo '<a href="#" class="directional" id="east"><img src="images/east.png"></a>';
	}
	print"
	</td>
</tr>
<tr>
	<td colspan=3>";
	if ($minions['north_south']<=0){
		print"<center><img src='images/south.png'></center>";
	} else {
		echo '<center><a href="#" class="directional" id="south"><img src="images/south.png"></a></center>';
		}
	print"
	</td>
</tr>
</table>
<div id=isla-quest> Here you can search the forest of Aniari looking for minions to recruit.  <br><br>You will find a variety of creatures such as Humans, Elves, and Dwarves. You can try and recruit any group of them you come across, but remember that they don't always agree. <br><br>
You have a limited endurance for these hunts. When it is gone you will have to wait for it to refill before you can start looking again.<br><br>
Also if your wish to search the forest of another city you must first move back to location 0,0 in the forest that you are currently searching. 
</div>
";


?>
<script>
(function() {
$('.directional').on('click',function(e){
   var direction = $(this).attr('id');
   $.ajax({
       method: "POST",
       url: "move.php",
       data: {
           userid: <?php echo $userid; ?>, 
           direction: direction
       }
   }).done(function( msg ) {
       $( "#notificationArea" ).html( msg );
        console.log(msg);
   }).fail(function(req,msg) {
       $( "#notificationArea" ).html('Request failed: ' + msg );
   });
   e.preventDefault();
});
});
</script>

Using the error console there are no errors, and no warnings, yet we can't seem to get any response from the AJAX. There is no text posted. There is no update to the data base.

Same page data updating

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation