Question

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.

Answer 1

you can do it like this:

html

<form action='explore.php' method='post' id='myForm'>

jquery

$('#myForm').submit(function(event){  //added event
    event.preventDefault(); //added to prevent submit
    $.ajax
        ({ 
        type: 'POST', 
        url: 'explore_be.php', 
        data: data, success: 
        success function(data, textStatus, jqXHR),
        complete: function(),
        dataType: dataType 
    });


});

edit: remove the onclick events you added in your edit