06th May2015

Simple “Are you sure?” warning for unsaved changes in WP

by Gyro

I spent quite a few hours getting a seemingly simple piece of javascript to work in a WP plugin I am currently working on.

Naturally, I started with jquery as it is already included in the WP Admin, but after several hours of trying various solutions I found on the web I had to admit defeat. I just could not get it to work the same way it obviously worked for others using jquery.

So, I ended up looking around a bit to find all natural javascript to do this.

function myplugin_js() {
echo ' <script>
window.onload = function(){
var theform = document.myform;
window.onbeforeunload = function(e){
var e = e || window.event, simon = "go";
for (i=0; i<theform.elements.length; i++){
if(theform.elements[i].type == "radio" || theform.elements[i].type == "checkbox"){
if(theform.elements[i].checked != theform.elements[i].defaultChecked){simon = "no";}
}else if(theform.elements[i].type == "select-one"){
if(!theform.elements[i].options[theform.elements[i].selectedIndex].defaultSelected){simon = "no";}
}else if(theform.elements[i].type == 'submit'){
theform.elements[i].onmouseup=function(){
simon = 'go';
}
}else{
if(theform.elements[i].value != theform.elements[i].defaultValue){simon = "no";}
}
}
if(simon != "go"){if(e){e.returnValue = "unsaved chages detected";}return "unsaved chages detected";}
}
};
</script>';
}
add_action('admin_enqueue_scripts', 'myplugin_js');

You can put this in a theme functions.php or in your plugin file.

This will cause a warning message to popup whenever the form with the name "myform" was modified and one attempts to load a new page.

Change ‘admin_enqueue_scripts' to ‘wp_enqueue_scripts' to enable this feature on the front-end of your website.

If you use a select element, make sure you have a default option "selected", else the script will fail.

Enjoy :crazy:

Sources:

543

Category : Java Script, Web Design, WordPress
0 Comm
30th Dec2014

PHP Perfection: Ajax Image Upload Script

by Gyro

Today I stumbled upon a neat little PHP image upload script that includes the html/js front-end script to easily upload images. The script displays a simple upload form, you select an image from your computer, click on upload, and the script uploads the image via php. Once the image has been uploaded, a thumbnail will be displayed in place of the upload form and button. The script can be easily implemented into any existing code and customization is also no problem for anyone with some html/js/php expience.

For me, it's simply perfect :)

 

567

Category : Java Script, PHP, Web Design
0 Comm
17th Jan2013

Add customized Google Translate to your website

by Gyro

Google translate has a feature called the Website Translator to help you translate your website.

Here is how it works:

  1. Add your website
  2. Customize the way the Google Translate will look on your website, I usually add a google translate dropdown menu to websites.
  3. Add the custom code to your website.
  4. View your website in another language and click on text that has not been translated to your satisfaction, you will see a popup with the option to submit a translation suggestion. Once a translation suggestion has been submitted, you can review and activate it in the Website Translator

Enjoy :enjoy:

1716

Category : Java Script, Web Design
0 Comm