show ajax result data save

Question

I am working with data & files form saved with ajax. I followed this post uploading-both-data-and-files-in-one-form-using-ajax and is working nice, the data is saved in DB and the file(image) is stored in his folder. The only thing is that I can't make it is show "success" when all is ok or "error" when something goes wrong... it always show me "Load was performed." but it shows because I inserted this but when there is an error inside it does not show me the error...always "Load was performed."

I made an error or success modal message inside of the insert code and I put the <?php echo $alert; ?> in the form page but the message does not appear...

Can you help me with my problem?

If can show a loader(in gif) will be nicer too..

Here show you the code:

JS:

$("form#data").submit(function(){   
    var formData = new FormData($(this)[0]);    
    $.ajax({
        url: "includes/galeria.php?ts=" + new Date().getTime(),
        type: 'POST',
        data: formData,
        async: false,
        success: function(data) {
 $('.result').html(data);
 alert('Load was performed.');
        },
        cache: false,
        contentType: false,
        processData: false
    }); 
    return false;
});

galeria.php:

<?php 
    require_once("connection.php");
    require_once("settings.php");
    $alert = "";
    if(isset($_FILES['imgaleria'])) {
        $extension = pathinfo($_FILES['imgaleria']['name']);
        $extension = $extension["extension"];
        $allowed_paths = explode(", ", $allowed_ext);
        $valid = 0;
        for($i = 0; $i < count($allowed_paths); $i++) {
            if ($allowed_paths[$i] == "$extension") {
                $valid = 1;
            }
        }
        if ($valid == 1 && $_FILES["imgaleria"]["size"] <= $max_weight) {
            if (file_exists("../assets/img/galeria/" . $_FILES["imgaleria"]["name"])) {
                $alert = '<p class="error">' . $_FILES["imgaleria"]["name"] . ' El nombre del archivo ya existe!' . '</p>';
            } else {
                move_uploaded_file($_FILES["imgaleria"]["tmp_name"], "../assets/img/galeria/" . $_FILES["imgaleria"]["name"]);
                $save = $_FILES["imgaleria"]["name"];
                $statement = $conn->prepare("INSERT INTO GALERIA (imgtitulo, imgdescripcion, imgcategoria, imgaleria) VALUES (?, ?, ?, ?)");
                if ($statement->execute(array($_POST['imgtitulo'],$_POST['imgdescripcion'],$_POST['imgcategoria'],$save))); 
                $dbSuccess = true; 
                $alert = '<p class="ok">' . ' Oferta agregada satisfactoriamente!' . '</p>';
                $dbh = null;
            }
        } else {
            $alert = '<p class="error">' . ' Tipo de archivo inv&aacute;lido!' . '</p>';
        }
    }
?>

form page.php:

    <form class="form-horizontal" id="data" name="data" method="post" enctype="multipart/form-data">
        <fieldset>
            <?php echo $alert; ?>
            <div class="control-group">
                <label class="control-label col-md-4"><?php echo $translate->__('Image title'); ?> :</label>
                <div class="col-md-5">
                    <input type="text" class="form-control" name="imgtitulo" />
                </div>
            </div>
            <div class="control-group">
                <label class="control-label col-md-4"><?php echo $translate->__('Image description'); ?> :</label>
                <div class="col-md-5">
                    <textarea id="maxlength_textarea" class="form-control" maxlength="225" name="imgdescripcion" /></textarea>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label col-md-4"><?php echo $translate->__('Image category'); ?> :</label>
                <div class="col-md-5">
                    <input type="text" class="form-control" name="imgcategoria" />
                </div>
            </div>                  
            <div class="control-group">
                <label class="control-label col-md-4"><?php echo $translate->__('File to upload'); ?> :</label>
                <div class="col-md-3">
                    <input name="imgaleria" type="file" />
                </div>
            </div>
            <div class="control-group">
                <div class="row">
                    <div class="col-md-12">
                        <div class="col-sd-offset-9 col-md-12"><br />
                            <button class="btn btn-info" name="enviar"><i class="fa fa-check"></i> <?php echo $translate->__('Save'); ?></button>
                        </div>
                    </div>
                </div>
            </div>          
        </fieldset>
    </form>
    <div id="loading" style="display:none;"><img src="assets/img/ajax_loader.gif" /></div>

Answer 1

You are misunderstanding the relationship between PHP, HTML, and JQuery (javascript).

PHP executes on the server, before any HTML is output to the browser. You can't do an ajax call after the page is loaded and then print that call out with PHP. Stop thinking like that. Instead, you need to manipulate the HTML using JQuery.

So this JQuery code is correct:

success: function(data) {
  $('.result').html(data);
}

But you need an HTML element on the page with class="result" for this to work:

<div class="result">RESULT APPEARS HERE AFTER AJAX CALL</div>

You should actually be targeting an ID instead of a class, so I would use #result instead of .result and id="result" instead of class="result". Please read a beginner's book on PHP and Javascript interaction because you need to understand the fundamentals before jumping in.