2
\$\begingroup\$

I am not sure if this is the correct way to make an Ajax request and do the typical loading/processing GIF/animation while processing is happening and displaying the response.

HTML:

<!-- start content -->
<div class='content'>

    <!-- start setup section -->
        <div class='photo-setup'>

            <div class='setup-head'>
                <div class='photo-name'>Photo Name : <input type='text' placeholder='Photo Name' name='photo-name' title='Photo Name' value='Untitled'></div>
            </div>

            <div class='photo-section'>
                <img src="<?php echo 'tmp/' . $imgUpload->getFileName() . $imgUpload->getType() ?>" alt='photo'>
            </div>

            <div class='tag-section'>
                Photo Tags : <input type='text' placeholder='Tags e.g. (#beach #park #dog)'>
            </div>

            <div class='ajax-loading'>
                <img src='ajax-loader.gif'>
            </div>

            <div class='response'>
            </div>

            <div class='commit-section'>
                <a class='save' href='#'>Save</a><a class='cancel' href='upload.php'>Cancel</a>
            </div>

        </div>
    <!-- end setup section-->

</div>
<!-- end content -->

CSS:

img { border: none; }
input { padding: 0.30em; }

.photo-setup {
    width: 600px;
    height: auto;
    margin: 0 auto;
    font-weight: 200;
    font-size: 0.9em;
    letter-spacing: 1px;
}

.setup-head {
    border-left: 1px solid #cacece;
    border-right: 1px solid #cacece;
    border-top: 1px solid #cacece;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    padding: 1em;
    overflow: hidden;
}

.photo-name { float: left; }

.photo-section {
    border: 1px solid #cacece;
    text-align: center;
}

.tag-section {
    padding: 1em 0 1em 1em;
}

.tag-section input {
    width: 81%;
    display: inline-block;
}

.ajax-loading {
    text-align: center;
    margin: 1em;
    display: none;
}

.response {
    display: none;
    text-align: center;
}

.commit-section {
    text-align: center;
}

.commit-section a {
    margin-left: 1em;
}

jQuery:

$(document).ready(function() {

    $('.save').on('click', function(e) {
        e.preventDefault();
        save();
    });

    $(document).ajaxStart(function() {
        $('.commit-section .save').hide();
        $('.ajax-loading').fadeIn();
    });

    $(document).ajaxComplete(function() {
        setTimeout(function() {
            $('.ajax-loading, .commit-section').hide();
            $('.response').fadeIn();
        }, 500);
    });

});

// collect all photo data and send to php for database storage
function save() {

    // regex to parse hashtags
    var regex = /[#]+[A-Za-z0-9-_]+/g;
    var name = $.trim($('.photo-name input').val());
    var tags = $.trim($('.tag-section input').val()).match(regex);
    var photo = $.trim($('.photo-section img').attr('src'));

    $.ajax({

        url: 'save_photo.php',
        method: 'POST',
        dataType: 'html',
        data: {
            title: name,
            hash_tags: tags,
            filename: photo
        }

    })
    .done(function(response) {
        $('.response').html(response);
    })
    .fail(function() {
        alert('Something went wrong!')
    });
}
\$\endgroup\$
  • \$\begingroup\$ 'tags' will produce an array-object like ["#sun", "#fun", "#demo", "#test"] . Are you sure it works if you send it that way to your php-script? \$\endgroup\$ – michael.zech Jun 22 '16 at 6:42
1
\$\begingroup\$

As far as basic implementation. You've got it down pat. That being said, I do have a few suggestions that could allow your app to run more fluently. I assume that you are uploading these photos and that they aren't photos already on the server being accessed.


If my above assumption is true, I highly suggest you use the <input type='file' />. This will display the name of the file and will better maintain the file object for you when you pass it to the server. That being said, with the current implementation you actually don't upload any photos. All you do is give a name, but you don't physically package up the photo data and send it to the server to be processed.


Mizech makes a good point in his comment, though. Typically, you don't want to pass special characters unless you absolutely have to. That being said, the tagging system means you will having # showing up so why force the user to input it? Why not just have them input the tag without it? On the server side you can take the input and append the # in front because you know it should be there. It's about only having to do as much work as necessary and if you have to regex before sending then it would be easier to just send and then add it on the server.

\$\endgroup\$
  • \$\begingroup\$ Thanks for the reply. This file is not meant for uploading, the previous file to this one is, the photo is currently in a temp file on the server. This file is where you setup your photo with a name and tags. When the user clicks 'save' the photo location is saved in the db along with tags and saved in a permanent location. \$\endgroup\$ – Robert Rocha Jul 16 '16 at 5:35
  • \$\begingroup\$ The tagging works just like twitter and instagram hashtags where the user is forced to put the hastag to make a valid tag, work smarter not harder. \$\endgroup\$ – Robert Rocha Jul 16 '16 at 5:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.