CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
pjustindaryll
pjustindaryll

Reputation: 377

Updating parts of a .php page

Is it possible to update a page and proceeding the next function, similar to refreshing it?

I have a page that when Save button is pressed, it will submit the data into earnings_amendment_account_add.php, and the page will be refreshed.

Now, what I'm trying to achieve through AJAX is for the data to be submitted, and then display Success Notification and refresh the dataTable upon pressing Save in my modal.

Example, this part of the page <?php include 'includes/notif-info-display.php'; ?> will trigger this upon submitting a page.

This Screenshot only displays after I submit the form and the page was refreshed.

1

 <section class="content">
    <div id = "content">
<?php include 'panels/accounting_panel.php'; ?>
<?php include 'includes/notif-info-display.php'; ?>
</div>

Now, I did some modifications to avoid refreshing the page. It will send the data to the database, but I cant' find a way for the dataTable to be refreshed, and for <?php include 'includes/notif-info-display.php'; ?> to be reloaded and display if it is Success or Fail, based on the triggers in my earnings_amendment_account_add.php.

$(document).ready(function () {
  // Listen to click event on the submit button
  $('#add').click(function (e) {

    e.preventDefault();

    // Add trigger based on button name, value
    var add = $("#add").val();

    var add_accountcode = $("#add_accountcode").val();
    var accounttitle = $("#accounttitle").val();
    var accounttype = $("#accounttype").val();
    var postedby = $("#postedby").val();
    var dateposted = $("#dateposted").val();

    $.post("earnings_amendment_account_add.php", 
    {

    // Add trigger based on button name, value
      add: add,

      add_accountcode: add_accountcode,
      accounttitle: accounttitle,
      accounttype: accounttype,
      postedby: postedby,
      dateposted: dateposted
    }).complete(function() {
        console.log("Success");
      });
  });
});

The trigger comes from earnings_amendment_account_add.php page


        if(sqlsrv_query($conn, $sql, array(), array("Scrollable" => SQLSRV_CURSOR_KEYSET))){
            $_SESSION['success'] = 'Earnings Amendment Account Data added successfully';
        }
        else{
            $_SESSION['error'] = $conn->echo .print_r(sqlsrv_errors(), true);
        }
    }   
    else{
        $_SESSION['error'] = 'Fill up add form first';
    }
?>

This is the includes/notif-info-display.php

     <?php
        if(isset($_SESSION['error'])){
          echo "
            <div class='alert alert-danger alert-dismissible'>
              <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
              <h4><i class='icon fa fa-warning'></i> Error!</h4>
              ".$_SESSION['error']."
            </div>
          ";
          unset($_SESSION['error']);
        }
        if(isset($_SESSION['success'])){
          echo "
            <div class='alert alert-success alert-dismissible'>
              <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
              <h4><i class='icon fa fa-check'></i> Success!</h4>
              ".$_SESSION['success']."
            </div>
          ";
          unset($_SESSION['success']);
        }
      ?>

This happens after I click this the #addnew modal's submit.

<form autocomplete='off' class="form-horizontal" method="POST" action="earnings_amendment_account_add.php">

FORMS HERE ---

    <div class="modal-footer">
                <button type="button" class="btn btn-default btn-flat pull-left" data-dismiss="modal"><i class="fa fa-close"></i> Close</button>
                <!-- Add Button ID, Change Type to button, add name, add value -->
                <button type="button" class="btn btn-primary btn-flat" name="add" value="add" id="add"><i class="fa fa-save"></i> Save</button>
                </form>
            </div>
        </div>

Everything works perfectly fine, the data is added, my only problem is that I can't seem to find a way for <?php include 'includes/notif-info-display.php'; ?> to be reloaded again and display the Success Notification upon pressing save.

This is my modal.

2

Is there a way for this to happen? <?php include 'includes/notif-info-display.php'; ?> will be reloaded and display if the Data Submitted was a success, or a failure, and at the same time, refresh the dataTable and show the latest data there?

Upvotes: 0

Views: 89

Answers (2)

amazing777
amazing777

Reputation: 26

use echo "<meta http-equiv='refresh' content='0'>"; after your if(isset($_SESSION['success'])){for the reload. Also set $activateSuccess = true; here. Then echo your message with

if($activateSuccess == true) { echo " <div class='alert alert-success alert-dismissible'> <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button> <h4><i class='icon fa fa-check'></i> Success!</h4></div>"; } return;

Upvotes: 1

Dariush Hojabrian
Dariush Hojabrian

Reputation: 36

You must handle this issue on your jquery code.In php code handling the ajax request you must send back the success data as JSON. Then in your ajax request complete section, handle this data, create a table row to add to your Datatable and pop a success notification. Php does not update partially. this is a matter of client, php runs in server.

Upvotes: 1

Related Questions