Jquery Do not load in wordpress (multiple form show user before submitting)

Asked

Viewed 22 times

0

Good, I have a script on a Wordpress page (which is not running) where I am submitting a form with files via ajax.

I want to show the user which files are being uploaded and which the user can remove before submitting them...

The script runs the jQuery(document).ready(function() {}); but nothing else runs. I only see the first console log.

I tried the code on localhost and it went great.

Can someone help me?

       
           
        <div class="row files" id="files1">
            <h2>Ficheiros</h2>
          
               <input type="file" name="files1" id="file" multiple required/>
            </span>
            <br />
            <ul class="fileList"></ul>
        </div>
            <div class="row">
            <div class="span16">
             <table class="zebra-striped">
                    <tbody class="files"></tbody>
                </table>
            </div>
        </div>
           <p> <select id="selectPastas" name="selectPastas" required>
                <option value="">Escolher pasta </option>
                <?php echo $pastaSelecionada ?>
            </select>
        </p>
        <input type="hidden" value="<?php echo $userId; ?>" name="userPostingId" id="userPostingId">
        <input type="hidden" value="<?php echo $q; ?>" name="userFileToId" id="userFileToId">

        <input type="submit" name="btnSubmit" id="btnSubmit" value="Submeter">

    </form>
 
<script type="text/javascript" >
  
        jQuery(document).ready(function() { 

     console.log("Vai começar");
       
       jQuery.fn.fileUploader = function (filesToUpload, sectionIdentifier) {
    var fileIdCounter = 0;
console.log("Prepara-te");
    this.closest(".files").change(function (evt) {
        var output=[];
console.log("E ai vaiiiiii");
        for (var i = 0; i < evt.target.files.length; i++) {
            fileIdCounter++;
            var file = evt.target.files[i];
            var fileId = sectionIdentifier + fileIdCounter;

            filesToUpload.push({
                id: fileId,
                file: file
            });

            var removeLink = "<a class=\"removeFile\" href=\"#\" data-fileid=\"" + fileId + "\">Remove</a>";

            output.push("<li><strong>", escape(file.name), "</strong> - ", file.size, " bytes. &nbsp; &nbsp; ", removeLink, "</li> ");
        };

       jQuery(this).children(".fileList").append(output.join(""));

        //reset the input to null - nice little chrome bug!
        evt.target.value = null;
    });

    jQuery(this).on("click",".removeFile",function (e) {
        e.preventDefault();

        var fileId = jQuery(this).parent().children("a").data("fileid");

        // loop through the files array and check if the name of that file matches FileName
        // and get the index of the match
        for (var i = 0; i < filesToUpload.length; ++i) {
            if (filesToUpload[i].id === fileId)
                filesToUpload.splice(i, 1);
        }

        jQuery(this).parent().remove();
    });

    this.clear = function () {
        for (var i = 0; i < filesToUpload.length; ++i) {
            if (filesToUpload[i].id.indexOf(sectionIdentifier) >= 0)
                filesToUpload.splice(i, 1);
        }

        jQuery(this).children(".fileList").empty();
    }

    return this;
};

(function () {
    var filesToUpload = [];

    var files1Uploader = $("#files1").fileUploader(filesToUpload, "files1");

    
    jQuery("#formFilesToClient").on("submit", function (event) {
         //Stop the form from submitting itself to the server.
    event.preventDefault();
    
            var formData = new FormData();

            for (var i = 0, len = filesToUpload.length; i < len; i++) {
                formData.append("files", filesToUpload[i].file);
            }
           jQuery.ajax({
                         type: "POST",
                         url: 'https://cliente.apostalcancada.pt/wp-content/themes/oceanwp-child-theme-master/php/submitFilesToCliente.php',
                         data: formData,
                         contentType: false,
                        processData: false,
                        cache:false,
                         success: function (data) {
                            alert(data);

                             jQuery('#formFilesToClient')[0].reset();

                         },
                         error: function (data) {
                alert("ERROR - " + data.responseText);
            }
                     });
                        });
});
     
});
        

</script> ```
  • You don’t even make a mistake? ajax with post method only works when you are accessing the page by localhost (or dedicated server), I am not sure the reason for this.

  • good, The console ta cleans, I have other post requests working. It only arrives until the first console.log(will start) , after that nothing. I suspect it is incompatibility with wordpress the prototype fn

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.