I am have a hard time learning how to use ajax and jquery to post a button without reloading the page. Specificly: The form is still reloading the page and no variables are being updated.
Here is the code I am stumbling through.
What I used before I tried Jquery/AJAX. Just php
// $_POST['selected_dir'] is set when you click on a folder or link within the explore(r).php
if (isset($_POST['selected_dir']))
{
// last selected folder/directory
$current_dir = $_POST['selected_dir'];
// current_dir is the folder we are looking inside of.
// we make it a $session so that if we click a different submit (RELOAD)
// within the page it will remember $current_dir;
$_SESSION['selected_dir'] = $current_dir; //
}
else // if $_post isint set but $_session is
if (isset($_SESSION['selected_dir']))
{
$current_dir = $_SESSION['selected_dir'];
}
else
{
// default folder/directory
$current_dir = "$root"; //'D:\Hosting\538\html';
}
<form action='explore.php' method='post'>
<input type='image'
src='$folder_icon'
alt='Submit'
name=''
value='submit'/>
<input type='hidden'
value='$f_path/$value'
name='selected_dir'/>
<input type='submit'
value='$value'
name='$value'
class='submit_into_link'/>
</form>
so that worked great except everytime you click the image or the link the page reloads. I finally came to the conclusion i need to use jquery and ajax and I never even used javascript up till now. Ive been reading through tutorials and i cant really connect the dots to make this work
I have this in my header
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
I have this at the top of my page within the body
$.ajax
({
type: 'POST',
url: 'explore_be.php',
data: data, success:
success function(data, textStatus, jqXHR),
complete: function(),
dataType: dataType
});
I have a few questions about the code above. I'm not sure how to use it. Do I need to put this ajax code inside an onclick function? seems like some examples ive looked through in jquery use something like this..
$(document).ready(function()
{
$(".flip").click(function() // this is a piece of code i got from w3schools.com
});
.flip above is a class. I have seen them use button when talking about
<button>
but what about a button within a form with a specific input id? Or should i just add to the form input onclick="clicked()" then put the ajax in that function? Does the ajax need be in the $(document).ready(function()) as well?
What should i put for datatype?
I put my php code in the explore_be.php file.
explore_be.php
// $_POST['selected_dir'] is set when you click on a folder or link within the explore(r).php
if (isset($_POST['selected_dir']))
{
// last selected folder/directory
$current_dir = $_POST['selected_dir'];
// current_dir is the folder we are looking inside of.
// we make it a $session so that if we click a different submit (RELOAD)
// within the page it will remember $current_dir;
$_SESSION['selected_dir'] = $current_dir; //
}
else // if $_post isint set but $_session is
if (isset($_SESSION['selected_dir']))
{
$current_dir = $_SESSION['selected_dir'];
}
else
{
// default folder/directory
$current_dir = "$root"; //'D:\Hosting\538\html';
}
Is that all there is to the code behind page?
I changed my forms to have no action but added an onclick They are still reloading the page. What do I need to do to the form inputs to stop that?
My new form looks like this
<form action='' method='post'>
<input type='image'
src='$folder_icon'
alt='Submit'
name=''
onclick='clickity()'
value='submit'/>
<input type='hidden'
value='$f_path/$value'
name='selected_dir'/>
<input type='submit'
value='$value'
name='$value'
onclick='clickity()'
class='submit_into_link'/>
</form>
Any help is greatly appreciated.