AJAX submission returns to Ninja Forms

As of version 2.1.2 of Ninja Forms we’ve re-added the AJAX submission feature.

If you used Ninja Forms prior to version 2.0, then you know that we launched the new version without including support for AJAX submissions. For those who haven’t used a previous version of Ninja Forms, AJAX submission allows your users to submit the form without reloading the page. By default, a message is displayed to let the user know that their submission is being processed. This message can be changed in the “Plugin Settings” section of Ninja Forms, underneath the labels tab.

There were several reasons we delayed adding AJAX submissions to the new version of Ninja Forms, but when it came down to it, we just didn’t feel that we had an adequate handle on how to implement the feature. Over the past few weeks, however, we think we’ve finally cracked it.

We have several ideas for improving the AJAX functionality, and you will see those being added to the plugin over the next few weeks. Some of these include: easier customization, better settings layouts, and many more. If you want to enable AJAX submissions for your form, just go to the “Form Settings” tab and check (or tick) the “Submit via Ajax” setting. That’s all you have to do. We’re excited to be able to add this new (old) feature and hope you get a chance to check it out. If you do, we’d love to hear your feedback on it. You can leave a comment on this post or leave a thread in our forums.

(Please note that the Multi-Part Extension isn’t quite ready for AJAX submissions yet, but we’re working on it. Keep an eye out for an update to the extension later this week.)

Troubleshooting Javascript and jQuery problems with WordPress Plugins and Themes

As a plugin developer, I’ve come to have a love/hate relationship with using jQuery with WordPress. I love everything that I can do using jQuery, but the lack of standards, and rampant incorrect usage of jQuery by other developers, means I wind up spending more time troubleshooting. The previous version of Ninja Forms relied heavily upon jQuery, and 90% of our support issues were related to that. If you are a plugin or theme developer, please, please, please, ensure that your work is done in such a way that it won’t conflict with other jQuery code.

The next post in this series will discuss some standards for using jQuery within your plugins and themes. This post, however, is about how you can track down the pesky scripts or plugins that might be causing Javascript errors on your site. (Please note that this post will be focusing mainly upon the front-end of WordPress sites, but the basics will apply to the wp-admin as well.)

Step 1:

View your site using Chrome or FireFox:  If you have Chrome, right click on the page and select “inspect element.” Then click on the “console” tab. This will show you any Javascript errors that your site may be experiencing. If you have FireFox, you’ll need to download the FireBug extension, then go to the error console. If there is an error, it will include a filename and line number. If the filename is within a plugin, try deactivating that plugin and reload the page. This first step is very important, so don’t overlook it.

Step 2:

View the source of your page: Using any browser, right click on your page and select “view source.” With the source opened, use the search feature of your browser (often CTRL + F) to search for ‘jQuery’ without the single quotes. Paging through the results, look for multiple instances of jQuery.js, jQuery.1.3.4.js, jQuery.1.8.2.min.js, or something similar. Keep in mind that a lot of jQuery extensions are named jQuery.somethingCool.js. To quote Obi-Wan, those aren’t the ones you’re looking for. If you locate multiple inclusions of jQuery, you have probably uncovered the cause of your Javascript woes. To find out where the multiple calls are coming from, you’ll need to change your theme over to the basic “twenty twelve” WordPress theme, and deactivate plugins one by one. Once you find the culprit, feel  free to email their creators asking them to fix their poor coding choices. ;)

Step 3:

Switch to the default “twenty twelve” WordPress Theme: I mentioned this in the previous step, but it bears repeating: if you have jQuery or Javascript errors on your page, revert back to the basic “twenty twelve” WordPress Theme. This is especially true if you have purchased a third party theme or had a theme developed by someone else. Theme authors are notorious for improperly adding their own Javascript and/or jQuery.

Step 4:

Deactivate all of your plugins: In order to find which plugin is causing your Javascript issues, you’ll have to do a bit of leg-work. I know that it sucks to deactivate and reactivate 20 plugins, but there’s just no way around it. Once all of your plugins are deactivated, activate them one at a time, reloading the page between each activation. Once the Javascript on your page stops working properly, you have probably found the problem plugin. I say probably because it is possible that there are multiple plugins improperly using Javascript or jQuery. If you think that you’ve found the problem plugin, deactivate it and go through the rest of your plugins anyway. Hopefully you don’t find any more, but it’s better to be safe than sorry.

I hope that these steps help you in troubleshooting why your WordPress front-end doesn’t work properly with Javascript or jQuery. In a perfect world, theme and plugin developers would use Javascript and jQuery responsibly. Unfortunately, we don’t yet live in that world. :)

Ninja Forms – Monday (02/11/2013) Update Notes

Although today’s releases are mostly related to bugfixes, there are a few new features. A new field has been added to Ninja Forms that will allow users to insert password fields into their forms. These fields will automatically output a password textbox and a re-enter password textbox in addition to ensuring that the text inside each matches. The WordPress back end “password strength” meter has also been included and can be activated or deactivated on a per-password field basis.

We are still coding away on the Front End Administration extension and Ajax submitting. We hope to have some previews for those in a week or two.

Here are the details:

Core Update:

Features:

  • Added a new field type of “Password.” This field offers the ability to add a password input textbox to your forms, including both password and re-enter password boxes. Ninja Forms will ensure that the text entered into these boxes matches. Please note that using this field within your forms to do things like logins, registrations, etc. will require custom coding.

Bugs:

  • Modified the way that Ninja Forms created admin metaboxes. Metabox options should now properly output in the order in which they are registered.
  • Added a new serializeToArray function to the admin.js to fix a bug some users encountered with popup boxes.

Multi-Part Update:

Changes:

  • Added a prev/next wrapper, adjust default styling for breadcrumbs and progress-bar.

Conditionals Update:

Changes:

  • Moved a JS function from ninja-forms-conditionals-admin.js to the ninja-forms-admin.js.

Post Creation Update:

Changes:

  • Modified the layout of the Post Creation metabox to make it easier to understand.

Layout and Styles Update:

Features:

  • Added styling options for Multi-Part Forms elements.

Ninja Forms Monday (02/04/2013) Pre-Patch Notes

We released the Styling Extension just a few days ago, so if you haven’t checked it out yet, head on over to the introduction video.

Much like last week, there isn’t much going on in this week’s update.

Here’s what you can expect in Monday’s update:

Core Update:

Features:

  • Added the option to set an email address as the “From” address within the field settings.
  • Added basic email validation. This does NOT validate that the email address exists, but only that it is semantically correct.
    • Added a label in the plugin settings “Label” tab for an invalid email address.
  • Added Shortcode and Template Function output to the Form List. You can now copy and paste the shortcode from there.

Changes:

  • Admin metaboxes will now remember whether or not they were closed or open.

Bugs:

  • Fixed a bug that prevented some users from adding new fields.

Multi-Part Update:

Bugs:

  • Fixed a bug that prevented the Multi-Part extension from interacted properly with the Save Progress extension.

Save Progress Update:

Changes:

  • Fixed a bug that prevented the Save Progress extension from interacting properly with the Multi-Part extension.

Layout and Styles Update:

bugs:

  • Fixed a bug that prevented some users from activating their installations.

Remote Desktop Assistance

As my family’s resident tech expert, they were a little nervous about their PCs’ continued health when I recently moved from the US to the UK for graduate school. Just before I left, my mom got her first computer and I helped connect her to the internet. I’ve lived in England for about a year now, and since then she has had several computer questions, bugs, and other issues that required attention. For a while, we tried using the built-in Windows remote desktop application, but it was a little bit too difficult for my mom, who had never used a computer before, to figure out. After a bit of web searching and getting recommendations from friends, I downloaded and tried out TeamViewer. TeamViewer is a great program for controlling desktops remotely.

Some of the features of TeamViewer:

  • Free for private use.
  • Control any number of PCs from the same console.
  • Control desktops via your smartphone with the TeamViewer app.
  • Easy for the user on the other end to use.
  • Create a ‘client list’ of PCs.
  • Works over slower internet connections.

The setup was simple enough that I could walk my mom through its installation over the phone, and once it’s installed she didn’t have to do anything but start up her computer. The program uses port 80, so I didn’t have to explain to her how to open ports on her router, which would have been impossible. TeamViewer runs on the remote machine in the background as a Windows service and works with Windows 7 and XP (if anyone out there still has XP installed). Once you connect to the PC through TeamViewer, you can control everything on the target PC as if you were using it in person.

For me, TeamViewer has been a lifesaver. I’ve installed it on several family members’ PCs and use it on a fairly regular basis to fix problems. I’ve even fixed a few things from my iPhone while out in town.

You can download TeamViewer for free at www.teamviewer.com.

Creating custom tables in your WordPress database

When you create a WordPress plugin, you can usually store and retrieve all of your plugin data using the WordPress options() functions. Sometimes, though, you need a more robust storage solution for the data gathered by your plugin. When you need to store large amounts of data, or you need to have more control over the storage structure, you can make use of WordPress’s custom MySQL tables. These custom tables can be created, updated, and deleted using WordPress functions, rather than interacting with the database directly. In this post series, we’ll discuss how to create a custom table to store our data, how to insert data into our custom tables, how to update our custom tables, and, finally, how to delete rows in our custom tables. *Note* – this series assumes that you have already created your plugin.

Creating custom tables inside WordPress

The code for creating a custom table is pretty simple, but involves a little bit of MySQL.
In the sample below, you’ll need to replace my_custom_table_name with whatever you want your table name to be. It should be something unique to your plugin. You’ll also want to replace my_title and show_title with your table’s column names. You can add additional columns by using the format: “column_name column_type NULL/NOT NULL,“. (A quick Google search for MySQL column types will get you a list of proper values)

And that’s all there is to it, we now have a custom table in our WordPress database in which we can store our plugin data.

Next post we’ll talk about how to insert rows into our newly created table.

Adding dashboard-like screen options to your plugin administration pages

On Monday, I explained how to add help tabs to your plugin administration pages. Today I’m going to explain how to add the screen options tab to those same pages. If you aren’t familiar with what the screen options tab looks like, here are some screen shots:

   

As you can see from the images above, WordPress uses this options panel to allow users to hide or show dashboard metaboxes. Don’t worry if you don’t need this functionality for your plugin, you can use the screen options tab for any type of plugin settings.

The first thing we need to do is create a function that will contain the screen option registration code. In this example, I’ve named this function ‘register_my_option’:

Now that I have a function to hold my code, I need to hook it into WordPress using the add_action() function. This page at WordPress.org lists all of the hooks available, in the order in which they are carried out. For registering screen options, we have to use a hook that happens after “current_screen”. I’ve decided to use ‘admin_head’.

This function will allow us to register our screen options panel. However, unlike when registering help tabs, we have to do a little bit of extra work to add our own HTML to the screen options panel. To do this, we have to use the WordPress “add_filter()” function. When we call add_filter() the first value required is what we want to filter; in this case we use ‘screen_layout_columns’. The second option required by add_filter() is the name of a function which will be called to modify what is shown by ‘screen_layout_columns’. In the example below, we call the function named ‘display_my_option’ which will output the HTML we want to appear in the screen options panel.

Now that we have added our filter and screen option tab, we need to create the HTML for the options panel. Since we named the display function: ‘display_my_option’ above, we’ll be sure to use that same for our function.

So far we’ve registered our screen options tab and created a very simple HTML form for the option panel. Now we need to process the values we get from the form when the user clicks on the “Submit” button. To do this, we’ll create a function to do our saving and then hook it into the WordPress page load by using the add_action() function.

Finally, let’s throw all of that together:

And, that’s all there is to it! If it works out right, your screen tab should look like this:

Please note that it’s best practice to always include a security field, like a nonce (number used once), whenever processing data gathered from your users. We haven’t included that in this tutorial, but we’ll cover how to do that on Friday.

Adding dashboard-like help tabs to your plugin administration pages

If you’ve used WordPress for long, you’ve probably noticed a contextual help tab in the upper-right hand corner of the dashboard. It looks something like this:

 

While working on the newest version of one of our plugins, I was looking for a place to display help information. After trying a few different solutions, I decided that I’d really like to use the same contextual help menu seen above. I was able to find instructions on Google, but they were spread over a few different websites, so I thought I’d put together this post.  In this quick tutorial I’ll show you how you can add the contextual help menu to your plugin. It’s really a simple project.

First, I’m assuming that you’ve already created your plugin. This code can go anywhere in your plugin code, for my usage, I created a separate help.php and put all of this in it.

If you wanted to add multiple help tabs, you wouldn’t have to repeat $screen = get_current_screen();.

So, that’s all there is to it. In the examples above, I’ve set the content with the ‘content’ variable, but you can also use ‘callback’ to define a function which will output the help text. This is helpful if you want to create more dynamic help text.

On Wednesday we’ll talk about how to replicate the dashboard’s  ”Screen Options” tab in your plugins.