CODEWITHSUNDEEP
phpajaxjquerypost
Ric
Ric

Reputation: 87

ajax $_POST data then redirect to new page

I have been going crazy for the last 2 weeks trying to get this to work. I am calling a MySQL Db, and displaying the data in a table. Along the way I am creating href links that DELETE and EDIT the records. The delete pulls an alert and stays on the same page. The EDIT link will POST data then redirect to editDocument.php

Here is my PHP:

 <?php
 foreach ($query as $row){
        $id =  $row['document_id'];
        echo ('<tr>');
        echo ('<td>' . $row [clientName] . '</td>');
        echo ('<td>' . $row [documentNum] . '</td>');

        echo "<td><a href='**** I NEED CODE HERE ****'>Edit</a>";

        echo " / ";
        echo "<a href='#' onclick='deleteDocument( {$id} );'>Delete</a></td>";
        // this calls Javascript function deleteDocument(id) stays on same page
        echo ('</tr>');   
 } //end foreach
 ?>

I tried (without success) the AJAX method:

<script>
function editDocument(id){
  var edit_id = id;
     $.ajax({
        type: 'POST',
        url: 'editDocument.php',
        data: 'edit_id='edit_id,
        success: function(response){
          $('#result').html(response);
        }
     });
}
</script>

I have been using <? print_r($_POST); ?> on editDocument.php to see if the id has POSTed.

I realize that jQuery/AJAX is what I need to use. I am not sure if I need to use onclick, .bind, .submit, etc.

Here are the parameters for the code I need:

  1. POSTs the $id value: $_POST[id] = $id
  2. Redirects to editDocument.php (where I will use $_POST[id]).
  3. Does not affect other <a> OR any other tags on the page.
  4. I want AJAX to "virtually" create any <form> if needed. I do not want to put them in my PHP code.
  5. I do not want to use a button.
  6. I do not want to use $_GET.

I don't know what I am missing. I have been searching stackoverflow.com and other sites. I have been trying sample code. I think that I "can't see the forest through the trees." Maybe a different set of eyes. Please help.

Thank you in advance.

UPDATE:

According to Dany Caissy, I don't need to use AJAX. I just need to $_POST[id] = $id; and redirect to editDocument.php. I will then use a query on editDocument.php to create a sticky form.

Upvotes: 3

Views: 11465

Answers (4)

Maxx
Maxx

Reputation: 602

I was facing the same issue with you. I also wanted to redirect to a new page after ajax post. So what is did was just changed the success: callback to this

success: function(resp) {
        document.location.href = newURL; //redirect to the url you want
    }

I'm aware that it defies the whole purpose of ajax. But i had to get the value from a couple of select boxes, and instead of a traditional submit button i had a custom anchore link with custom styling in it. So in a hurry i found this to be a viable solution.

Upvotes: 0

Jason P
Jason P

Reputation: 27012

Given your comment, I think you might be looking for something like this:

<a href='#' class="editLink" data-id="123">Edit</a>

$(document).ready(function() {
    $('.editLink').click(function(e) {
        e.preventDefault();
        var $link = $(this);
        $('<form/>', { action: 'editdocument.php', method: 'POST' })
            .append('<input/>', {type:hidden, value: $link.data('id') })
            .appendTo('body')
            .submit(); 
    });
});

Now, I don't necessarily agree with this approach. If your user has permission to edit the item with the given id, it shouldn't matter whether they access it directly (like via a bookmark) or by clicking the link on the list. Your desired approach also prevents the user from opening links in new tabs, which I personally find extremely annoying.

Edit - Another idea:

Maybe when the user clicks an edit link, it pops up an edit form with the details of the item to be edited (details retrieved as JSON via ajax if necessary). Not a new page, just something like a jQuery modal over the top of the list page. When the user hits submit, post all of the edited data via ajax, and update the sql database. I think that would be a little more user-friendly method that meets your requirements.

Upvotes: 0

iConnor
iConnor

Reputation: 20189

You have a SyntaxError: Unexpected identifier in your $.ajax(); request here 

<script>
function editDocument(id){
  var edit_id = id;
     $.ajax({
        type: 'POST',
        url: 'editDocument.php',
        data: 'edit_id='edit_id,
        success: function(response){
          $('#result').html(response);
        }
     });
}
</script>

it should be like this 

<script>
function editDocument(id){
  var edit_id = id;
     $.ajax({
        type: 'POST',
        url: 'editDocument.php',
        data: {edit_id: edit_id},
        success: function(response){
          $('#result').html(response);
        }
     });
}
</script>

note the 'edit_id='edit_id, i changed, well for a start if you wanted it to be a string it would be like this 'edit_id = ' + edit_id but its common to use a object like this {edit_id: edit_id} or {'edit_id': edit_id}

and you could also use a form for the edit button like this 

<form action="editDocument.php" method="POST">
   <input type="hidden" name="edit_id" value="272727-example" />
   <!-- for each data you need use a <input type="hidden" />  -->
   <input type="submit" value="Edit" />
</form>

or in Javascript you could do this 

document.location = 'editDocument.php?edit_id=' + edit_id;

That will automatically redirect the user

Upvotes: 0

Dany Caissy
Dany Caissy

Reputation: 3206

AJAX is used when you need to communicate with the database without reloading the page because of a certain user action on your site.

In your case, you want to redirect your page, after you modify the database using AJAX, it makes little sense.

What you should do is put your data in a form, your form's action should lead to your EditDocument, and this page will handle your POST/GET parameters and do whatever database interaction that you need to get done.

In short : If ever you think you need to redirect the user after an AJAX call, you don't need AJAX.

Upvotes: 2

Related Questions