jQuery window on load is firing too early. What else can I use? Javascript in Wordpress

I'm learning jQuery and Javascript, and I'm trying to understand why my code is not working.

I'm learning jQuery and Javascript, and I'm trying to understand why my code is not working.

I'm doing this from inside a custom plugin in WordPress.

My javascript file with the function I'm trying to call is enqueued in the WordPress footer:

<script type='text/javascript' src='..... gf_timer.js?ver=1.1.0.1'></script>

and my PHP is generating items like the following:

<div id="gf_timer_1">Placeholder</div>
<script type="text/javascript">$j=jQuery.noConflict(); $j(window).on('load',gfInitTimer(1));</script>

I just want to call the function gfInitTimer() after each div. I keep on getting an error "gfInitTimer is not defined".

So I added the onclick handler as a test and that's finding the function properly:

<div id="gf_timer_1" onclick="gfInitTimer(1)">Placeholder</div>
<script type="text/javascript">$j=jQuery.noConflict(); $j(window).on('load',gfInitTimer(1));</script>

I thought the window.on('load', should fire after the page and all scripts are loaded.

What am I missing?

Ajax (jQuery) PHP Script // move_uploaded_file-problem

I'm working on a&nbsp;<strong>gallery-upload</strong>-function with

I'm working on a gallery-upload-function with

  • jQuery Ajax
  • PHP

The whole gallery-function contains 3 parts:

Form as view_create-char.php

    <form id='gallery_upload' method='post' enctype='multipart/form-data'>
     <input type='file' name='file' id='file'>
     <input type='hidden' name='name' value='".$_GET['c']."' id='owner'>
     <input type='button' class='create_submit' value='Upload' 
     id='add_image_gallery'>
    </form>";

Ajax Script as main.js

$(document).ready(function(){
$("#add_image_gallery").click(function(){

    var fd = new FormData();
    var files = $('#file')[0].files[0];
    var name = $('#owner').attr("value");
    fd.append('file',files);
    fd.append('name',name);


    $.ajax({
        url: 'includes/gallery_upload.php',
        type: 'post',
        data: fd,
        contentType: false,
        processData: false,
        success: function(response){
            if(response != 0){
                alert('file  uploaded');


            }else{
                alert('file not uploaded');
            }
        },
    });
});

});

PHP-Script as gallery_upload.php

<?php
include 'dbh.inc.php';

    $owner = $_POST['name'];
    $file = $_FILES['file'];
    $fileName = $_FILES['file']['name'];
    $fileTmpName = $_FILES['file']['tmp_name'];
    $fileSize = $_FILES['file']['size'];
    $fileError = $_FILES['file']['error'];
    $fileType = $_FILES['file']['type'];

    $fileExt = explode('.', $fileName);
    $fileActualExt = strtolower(end($fileExt));
    $allowed = array('jpg', 'jpeg', 'png', 'gif');
    $fileNameNew = uniqid('', true).'.'.$fileActualExt;
    $fileDestination = 'uploads/'.$fileNameNew;
    move_uploaded_file($fileTmpName, $fileDestination);

    $sql = "INSERT INTO 
    characters_gallery (owner, image) VALUES ('$owner', 
    '$fileNameNew');";
    $result = mysqli_query($conn, $sql);

The goal is to upload the image with Ajax and insert two values inside the characters_gallery-table. First, the owner of the table, then the name of the actual image, generated by the PHP Script. This works.

But the actual file is not getting moved to the designated folder /uploads by move_uploaded_file(). It remains empty although the table in my database is filled with the two values $owner and $fileNamenew. What confuses me is that before I used this Ajax-Script this PHP-Script to move files to the uploads-folder worked fine. It doesn't work with the script though.

I'm grateful for any help

Edit --- Reaction to warning concerning SQL Injections:

I'm not sure if I'm using this edit like I'm supposed to do but it is an additional information. If I'm wrong, please delete my edit.

I tried to add prepared statements and wondered if I eliminated any greater risk of SQL Injection:

<?php
include_once 'characterfunctions.inc.php';
include 'dbh.inc.php';

    $owner = mysqli_real_escape_string($conn, $_POST['name']);
    $file = mysqli_real_escape_string($conn, $_FILES['file']);
    $fileName = $_FILES['file']['name'];
    $fileTmpName = $_FILES['file']['tmp_name'];
    $fileSize = $_FILES['file']['size'];
    $fileError = $_FILES['file']['error'];
    $fileType = $_FILES['file']['type'];

    $fileExt = explode('.', $fileName);
    $fileActualExt = strtolower(end($fileExt));
    $allowed = array('jpg', 'jpeg', 'png', 'gif');
    $fileNameNew = uniqid('', true).'.'.$fileActualExt;
    $fileDestination = '../uploads/'.$fileNameNew;
    move_uploaded_file($fileTmpName, $fileDestination);

    $sql = "INSERT INTO characters_gallery (owner, image) VALUES (?, ?);";
    $stmt = mysqli_stmt_init($conn);
    if (!mysqli_stmt_prepare($stmt, $sql)) {
        echo "SQL Error";
    } else {
        mysqli_stmt_bind_param($stmt, "ss", $owner, $fileNameNew);
        mysqli_stmt_execute($stmt);
    }
    $result = mysqli_query($conn, $sql);


Building Custom WordPress Sites from Scratch - WordPress Theme Development

Building Custom WordPress Sites from Scratch - WordPress Theme Development

Learn to create a completely responsive website from scratch using WordPress, HTML, CSS, JavaScpript, and PHP. Also, learn to create a custom WordPress theme.

After watching this course you will have a solid understanding of how WordPress works and how to create your own custom theme in WordPress.

🔗 Design Source Code: https://github.com/Godsont/Responsive-Website-Design

🔗 Theme Source Code: https://gtcoding.net/product/gtcoding-wp-custom-theme/

⭐️ Contents ⭐️

⌨️ (0:00:00) Intro and Demo

⌨️ (0:00:55) Research & Planning

⌨️ (0:10:52) UI Design - The Front Page

⌨️ (0:27:47) UI Design - CSS

⌨️ (0:59:07) UI Design - JavaScript

⌨️ (1:05:11) UI Design - More Pages

⌨️ (1:20:43) PHP Basics

⌨️ (1:58:31) Installing WordPress locally

⌨️ (2:03:05) WordPress - style.css file

⌨️ (2:11:47) WordPress - linking CSS and JS

⌨️ (2:23:17) WordPress - Custom Post Type

⌨️ (2:33:31) WordPress - Template Hierarchy

⌨️ (2:43:29) WordPress - while loop

⌨️ (2:54:52) WordPress - the Front Page

⌨️ (3:11:44) WordPress - Blogs Index Page

⌨️ (3:26:42) WordPress - Single Post Page & Comments

⌨️ (3:52:59) WordPress - Sidebar & Search

⌨️ (4:14:35) WordPress - Contact Form

⌨️ (4:20:17) WordPress - Custom 404 Page

⌨️ (4:24:19) Finishing Up


Thanks for watching

If you liked this post, share it with all of your programming buddies!

Follow us on Facebook | Twitter

Further reading

The Web Developer Bootcamp

Angular 8 (formerly Angular 2) - The Complete Guide

The Complete JavaScript Course 2019: Build Real Projects!

Modern React with Redux [2019 Update]

Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)

Build Responsive Real World Websites with HTML5 and CSS3

Build a Progressive Web App In VueJs

Build Progressive Web Apps with React

The State of Progressive Web Apps - The State of the Web

A full-stack solution for fast PWA development