Where to put form processing php file in wordpress - javascript

I am trying to create a simple chat in wordpress, and I don't want to use any plugins. I am creating the index file by myself and in there, I have a javascript function where it calls a jQuery's post method like the following:
function chatinitial(){
var user=document.getElementById("chatuser").value;
jQuery.post("chat.php",/*{stage:"initial",user:user},*/function(data){
alert(data);
});
}
In here, I need to call the chat.php to process my inputs, but I don't know where to put the chat.php file and how to point to it in the javascript code above. Do I put it in the theme folder?

Put the chat.php in your root folder and change your JavaScript to:
jQuery.post("/chat.php",
Or put chat.php in your themes directory and change your JavaScript to:
jQuery.post("/wp-content/themes/your_theme_name/chat.php",
The second version would be my preference, the only downside being that the JavaScript is then tied to your theme name, so it will break if ever you rename your theme.

If you want to do it quick and dirty put all the code into your theme's functions.php file.
You need to add a hook to your chat functions that are accessed via AJAX. There are two types of access - privileged and non-privileged. Here is how you add a hook:
add_action( 'wp_ajax_chat_function', 'my_chat_function' );
add_action( 'wp_ajax_nopriv_chat_function', 'my_chat_function');
Recently I completed a blog entry that could help you http://mehaul.me/blog/wordpress-using-ajax-to-query-posts/

Related

Js Function not defined when I use php include

I used to write JS inline in my footer but since it's getting too much I want to write it in an external file and include the file in the footer then.
I'm currently using
<?php include "https://example.com/myjs.php"; ?>
in the footer.
In that Php file which is mainly js with a few php expressions, I'm defining all the functions first and afterwards I'm calling some of them functions "onload" with
jQuery(document).ready(function() {
// functions....
});
I've put everything inside
<script></script>
The thing is that I get an error showing the functions I'm calling arent defined. However, when I just paste the code in the footer template inside
<script> </script>
tags it works fine.
I'm assuming that the error is with the tags and inlcude...
What am I doing wrong?
EDIT:
I am using WP functions which are based on logged in user id and page id. Do these might cause the errors?
I'm using wordpress with jQuery.
Since it's a remote URL, all php scripts will be executed before inclusion into your file. So how about
echo file_get_contents("https://example.com/myjs.php");
I could solve the problem:
I defined the php vars in JS before the script within the footer.php. Credits to: Access PHP var from external javascript file
Then I just replaced the php vars wih the js vars and included it with html as script.
Works like a charm now,
thanks anyway for all the help!

Wordpress - How do I take the theme directory in a js file?

I have an external script to integrate in a Wordpress theme. This script has different mixed resources in it like js, php files, etc.
It's something like:
/mytheme/myscript/
...main.php
...folder/main.js
Now, main.js post to main.php and uses something like:
var comet = new vpb_start_comet('main.php');
comet.connect();
My problem's here. Main.php is not found because I should change it with the relative wordpress path, being in a subfolder of my theme. So how could I get_bloginfo('template_url').'/myfolder/main.php in my main.js file?
If your folder/main.js is being included via the wp_enqueue_script() function ( which it probably should be, as this is the proper method with WP to load scripts ), then you can easily add the theme directory uri as a variable using the `localize_script()' function like so:
wp_localize_script( 'script_handle', 'themeDirURI', get_template_directory_uri() ) ;
You would put this code after the wp_enqueue for the main.js script. This will make the theme directory available as a javascript variable named themeDirURI, and the value will be something like: `http://www.example.com/wp-content/themes/theme-name/'
Hope this helps!

How to include javascript from wp plugin to all pages on a website?

I have a plugin that has js file in its folder.
My main plugin file looks like this:
require('api/myapi.class.php'); // API Library
require('settings.php'); // Configuration Options
require('register_shortcodes.php');
How to add a function that will inject js file to all client pages (Not admin pages)
I guess I need to use wp_enqueue_script but where should I add it?
wp_enqueue_script("myscript.js");
Try something like:
add_action( 'wp_enqueue_scripts', 'my_plugin_scripts' );
function my_plugin_scripts() {
wp_enqueue_script( 'myscript', plugins_url().'/plugin_name/js/myscript.js', array('jquery'));
}
This assumes you put your script in the js folder of the plugin folder, and that it depends on jquery.
EDIT:
A user tried to edit my answer, that added no real improvement to my answer. To explain my answer a bit more. You hook to wp_enqueue_scripts which will show the function with the enque script only on the front end, and not in the admin area, which is what the OP wanted, so there is really no need to check if you're on the admin page.

Write a line to javascript file

Im using a array to display some images in a website:
var paintingImages;
paintingImages =
[
{
url: 'images/objects/ron.jpg',
alt: 'ron'
}
];
This js code is written in paintings.js and my main js code is written in the file main.js
I have made this website for a artist and I want to give him the opportunity to login and add pictures to his website. I'm not that good with php, but adding images to a ftp in a folder is no problem.
Because I'm using a array for retrieving the images, I need to be able to add items to the array.
This is the part where I'm stuck. I don't know how to edit a existing js file, so the next time I open the website, the items (images) will been shown.
Activexobject is not a option because it's only possible in IE.
In summary:
I need to add a item to a array
I need to save this into the file, so the next time the website opens, it will be shown
I'm not verry good with php, I prefer javascript
Can't use Activexobject because of the use of multiple browsers
You can not simply modify a javascript file sitting on the server from browser side javascript.
You need to implement some server side logic.
If you don't like PHP, but like JavaScript, check out NodeJS for example.
With Node you should be able to build some lightweight serverside logic to modify your json array file with additional images.
You would need to change your logic .. You need to send this data to server anyhow . and when you load your next time take it back from server and update your webpage accordingly. I would suggest use any javascript MVC framework like backbone, angular.js. it will help you.
Use a database.
Save it to a database server (You figure this out, could be via forms, xhr, websockets, etc.).
On page load, load the correct data for the current user.
Create the $userPaintings array (call it what you want) from the user data in PHP.
Then simply output a JS object in the page with PHP:
<script>
var paintingImages = <?php json_encode($userPaintings); ?>
</script>

Wordpress child theme enqueue custom javascript

I'm having some trouble using a custom javascript file in my WP child theme.
What I've done in order to try and only make changes to the child theme is create a functions.php in my child theme's root folder. Like that I believe this functions.php to be prepended to the actual theme's fucntions.php file.
Now in this functions.php I want to enqueue my custom javascript file and thats where I get stuck. I'm having some difficulties thoroughly understanding the enqueue function but I have basically grabbed the enqueue function used in the original functions.php and I've altered it so it would point towards my child theme's "js" folder and then to the custom.js file in there.
Here is what my child functions.php looks like:
<?php
define( 'CHILD_DIR', get_stylesheet_directory() );
wp_enqueue_script('responsive-scripts', CHILD_DIR. '/js/custom.js');
?>
It looks like it is properly linking, or at least pointing to the correct file when I check my chrome console but it does say that it's not found (404) When I check the network tab in chrome it says the custom.js file's type is text/html (not application/javascript, which is what I see for my other javascript files), also for Time it says "pending".
Could anyone help me see where I'm going wrong?
The function you want to be using is get_stylesheet_directory_uri().
This is because get_stylesheet_directory will return the path to the stylesheet directory, which only makes sense in the context of server-side scripts, meaning it is the function you should use for things like includes.
On the other hand, get_stylesheet_directory_uri() will give you the URI of the stylesheet directory, which can be used in client-side contexts, such as linking scripts or stylesheets.

Categories

Resources