tbsForum - Topic - updating table without reloading

By: Chris

Date: 2015-03-08

Time: 20:33

updating table without reloading

Hi TBS-User,

I quite new to TBS and got some problems. I dosen't get into the Manual and tried most by trail and error with the examples. So far, my fist page is running fine. Really easy to use when just want to show static values. Thanks for this easy way!

I got a page to load up some files. The upload is working fine. I can post some data to the Form when rendering the template and the query is running as well after rendering. But what is the best way to update the list of files next to the form?
I thought with a subtemplate and options. And try to do a ajax.load() function to trigger a new rendering. Get the controller in an extra file, detached from the "old" controller rendering the form and actual values for the file-table.

What is the best way?? Haven't found a way in php anyway to get a list reload by ajax anyway.... :-( I#m just a kind of hobby developer ;-)

here is my template:

<!DOCTYPE html>
<html lang="de">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>ZIPkv DMS-System</title>

    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">

</head>

<body>

    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">ZIP-Kanuverleih</a>
        </div>
        <div class="pull-right">
            <a href="http://......oku.php?id=help:pipeline:kv-contracts" target="_blank">Hilfe</a>
        </div>

       </div>
      </div>
    </nav>

<p><br /></p>

<div id="page-wrapper">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">DMS-System <small></small></h1>
            </div>
            
        </div>
        

        <div class="row">

            <div class="col-lg-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        Vertrag Speichern
                    </div>
                    
                    <div class="panel-body">
                        <div id="returndata"></div>
                        <p>
                              <form id="newContractForm" role="form" method="post" action="?action=upload" enctype="multipart/form-data">
                                <input type="number" name="show_booking" value="[onshow.newContract.show_booking]" class="form-control" placeholder="KV-Buchungsnummer">
                                <br />
                                <input type="file" name="datei" maxlength="2097152" class="form-control">
                                <br />
                                <input type="hidden" name="MAX_FILES_SIZE" value="2097152">
                                <button id="newContract-btn" type="submit" class="btn btn-default pull-right" name="action" value="upload">speichern</button>
                            </form>
                        </p>
                    </div>
                    
                </div>
                
           </div>
           


            <div class="col-lg-8">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        Liste aller Verträge
                    </div>
                    
                    <div class="panel-body">
                        <div>
                            <table class="table table-hover">
                              <tr class="title-section2">
                                <th align="left">Buchung</th>
                                <th align="left">link</th>
                                <th align="center">Befehle</th>
                              </tr>
                              <tr>
                                <td><a href="detail_booking.php?show_booking=[blk2.res_id]">[blk2.res_id]</a></td>
                                <td><a href="download.contract.php?show_booking=[blk2.res_id]" target="_blank">[blk2.res_file;block=tr]</a></td>
                                <td><a href="dms.func.php?action=delete&show_booking=[blk2.res_id]"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a></td>
                              </tr>
                              <tr>
                                <td colspan="3">[blk2;block=tr;nodata]There is no data. </td>
                              </tr>
                            </table>
                            <p style="text-align:center;">There are [blk2.#] displayed lines.</p>
                        </div>
                        <p>

                        </p>
                    </div>
                    
                </div>
                
           </div>
           

        </div>
        

                <div class="row">
        
                    <div class="col-lg-12">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <img style="-webkit-user-select:none;" src="../inc/qr.php?qr='[onshow.qr.uploadLink]">
                            </div>
                            
                        </div>
                        
                   </div>
                   

                </div>
                


    </div>

    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

    <script>

    $(document).ready(function(){
        $("#newContractForm").submit(function(event) {
            event.preventDefault();
            //grab all form data
            var formData = new FormData($(this)[0]);
            console.log(formData);

            $.ajax({
                url: 'dms.func.php',
                type: 'POST',
                data: formData,
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                success: function (returndata) {
                    $("#returndata").html(returndata).delay( 4000 ).fadeOut( 400 );
                    $('#newPwd-btn').prop("disabled", false);
                    $('#newContractForm').trigger("reset");
                    $("#newContract-btn").html("speichern");
                    //var thisPage = window.location;
                    //window.location.href = thisPage;
                },
                error: function(){
                    alert("error in ajax form submission");
                },
                beforeSend:function(){
                    $("#newContract-btn").attr("disabled", "disabled");
                    $("#newContract-btn").html("uploading...")

                }
            });


        return false;
        });
    });

    </script>

</body>
</html>

and this is my controller:

<?php

// Wenn bei Chris local ausgeführt ..., dann sonst ...
if($_SERVER['SERVER_NAME'] == 'chris-macbook')
{
    if(!mysql_connect("localhost","user","pwd"))
    {
        echo "<h2>".$TEXT['cds-error']."</h2>";
        die();
    }
    mysql_select_db("db");
}
else
{
    include("../inc/db.inc.php");
}

// Templatesystem
include("../inc/tinybutstrong/tbs_class.php");

// neue instanz für das Templatesystem
$TBS = new clsTinyButStrong;

// Varibalen für die Ausgabe
$newContract = new clsObj();
$newContract->setVar('show_booking',     $_REQUEST['show_booking']);
$newContract->setVar('postTo',             'dms.func.php');

$listFiles = new clsObj();
$listFiles->setVar('action',             'upload');
$listFiles->setVar('show_booking',         $_REQUEST['show_booking']);

$qr = new clsObj();
$qr->setVar('uploadLink',                 'http://...../qr.php?z=kvc%26show_booking='.$_REQUEST['show_booking']);

if($_SERVER['SERVER_NAME'] == 'chris-macbook')
{
    if(!mysql_connect("localhost","root","02316262"))
    {
        echo "<h2>".$TEXT['cds-error']."</h2>";
        die();
    }
    mysql_select_db("db1070461-kanubuchung");
}
else
{
    include("../inc/db.inc.php");
}

$sql = "SELECT id, filename FROM `bookings` WHERE filename IS NOT NULL";
$result = @mysql_query($sql);

while ($row = mysql_fetch_object($result))
{
    $array_type2[] = array('res_id'=>$row->id, 'res_file'=>$row->filename, 'res_link_del'=>'2003-01-10');
}

//---------------------------------
// Ausgabe rendern
//---------------------------------
$TBS->LoadTemplate('templates/dms.html');
$TBS->MergeBlock('blk2',$array_type2);

$TBS->Show();

// array zur übergabe an das Tamplate
class clsObj {

    public function setVar ($var, $value=NULL)
    {
        $this->$var = $value;
    }


}

?>

Btw, if you see other recommendations in my code, I'm always thankful as I never learned coding in any professional way ;-)

Thanks for giving me some kind of new ideas :-)
Chris

By: Skrol29

Date: 2015-03-09

Time: 01:39

Re: updating table without reloading

Hi Chris,

I think is is important to not have two ways for feeding the list. Feeding the list when the page open should be the same that when the list is refreshed.

So if you have a controller that use a TBS sub-template and return the HTML for the list, then it should be the same when the page is opened.
It should be at least the same sub-template.

If the controller return a JSON of the data, then the main template should use a piece of HTML for the list, which is merged with the data when the page is opened, and wich is updated using an Ajax+Json query when the list must be refreshed.

By: Anonymous

Date: 2015-03-09

Time: 08:30

Re: updating table without reloading

Hi Skrol,

thanks. So far I think the same.
My idea was a Ajax.get request Ehen losging the Main tamplate and feeling the subtemplate with the json Data of this request. So i Would use a Helfer Script Leasing the table and using this as well for the refresh.

Cheers, Chris

updating table without reloading

updating table without reloading

Re: updating table without reloading

Re: updating table without reloading

New message