Drupal 7 Module Development - JavaScript confirm part 3

By shane
Wed, 2013-02-20 23:59
Daily Dose of Drupal Episode #113

Share with Others

In the last two episodes, we covered building a basic Drupal 7 module that displayed a JavaScript confirmation before a user leaves a specific page. In this episode we continue where we left off and add the ability to display the JavaScript confirm form on specific content type node edit pages.

In this episode you will learn:

  • How to add a checkbox field on the administration form that displays all the content types on your Drupal site
  • How to verify you are on the node edit page of a specific content type

Thanks to Drupalize.me for sponsoring this episode.

File attachments: 

Hello everyone and welcome to another Daily Dose of Drupal, today we’re on Episode Number 113 and we’re going to go ahead and round out the module that we’ve been developing in the last two episodes so if you want to check out episode number 111 and 112 it can get you up to this point or you can just hop over to 112 and download the zip folder with the module in it if you want to get started.

Before we get started though I’m Shane Thomas, you can follow me on Twitter at smthomas3, also head over to codekarate.com and sign up for the newsletter if you haven’t already, you can also find me on Google + and thanks again to today’s sponsor drupalize.me.

If you want to learn Drupal check out drupalize.me. It has tons of videos on Drupal from the basics to the most advance topics, also has videos on J Query and a whole bunch of other technology in web related topics so go ahead and give them a look if you haven’t already and if you do, use the coupon code CK20FEB so you can get 20% off and they know that I’m sending you over there.

Let’s go ahead and get started; so if you remember yesterday we left off with our js_confirm module where we could add paths to this text area here and when we added those paths as you can see I’m on the front page, if I try to navigate away it gives us this little Java Script Confirm box and one of the main reasons we’re going to be using this or I would want to use this on the site is for making sure people fill out long forms without accidentally clicking so if you have a form or web form or content type that’s extremely long and you want to make sure that they don’t accidentally click a link when they’re filling it out and maybe they get 70% done and they accidentally click away and they might get a little frustrated so you add a little Java Script just to make sure you can prevent that.

One of the things you’ll notice though, it’s easy to add it to a node add form. For instance I can easily add it to a node add article page just by coming in here and changing this to Node Add Article, now anytime I want to add an article and I start typing in and I want to leave the page it’s going to give me the message but what about when I’m trying to edit an article?

In this case it gets a little more difficult because if you look at the path … go ahead and open this in a new tab here so we can take a look at the path a little more easily, It’s Node 65 Edit, well because I want it to just get this Java Script on the article there’s really no way to do this, I can get it out on all node pages by using node/star/edit but that would be for every content type so that would be for basic page, client contact, any other content type I have in my site.

So I’m going to go ahead and add a little code that’s going to add some additional settings or one additional settings to this administration page and it’s going to allow me to check which node edit pages I want to use the Java Script on. So we’re going to start by hoping into our module here and I’m going to scroll down into this settings form and we’re going to start with that.

So essentially we’re just going to go ahead and add another form element and this time this form element is going to be a list of checkboxes so I’m going to say you can add a new form element and I’m going to call this js_confirm_contenttypeedit and I’m going to say this is of course an array.

The type in this case is going to be checkboxes, we give it a title here and for the title I’m going to use Content Type Edit Forms, you can add a default value and this default value is … this is where the whole old value are going to get pulled in and we want to make sure we use the same text that we use right here.

So the same piece is going to be used right here and we also want to give it a default in case there isn’t currently a variable I’m just going to use an array because it’s multiple checkboxes so there could be multiple values selected, I’m going to give it a description and I’m going to go ahead and just copy in this longer description here that I have. This longer description just says select the content types from the list to display the js_confirm pop up on, the pop-up will be displayed on these content types node edit pages, you need to change this to a double code here and the last section is going to be the actual options that we want to display and here we’re going to use a handy Drupal function called Node Type Get Names.

You see here in the nice little dialog and you can look this up on the api.drupal.org as well but this returns a list of available node type names and the way it works is an array and the key of the array is the actual type … the node type so in this case it’s going to be article with an _a and then the actual value is going to be the nice printed name. So in this case it’s going to give me a list with a key of article page client, these lower case values here and the actual display is going to be this nicer displayed vale right there.

So that should be all we need there, just go ahead and add a semi colon here, save this and we’ll go ahead and come back to our form and now you can see it pulls in all our content types, I can select article and client or whatever other content types I want to click save, the values will be stored of course but the next step is to of course make sure it actually gets displayed or the Java Script gets added on those pages.

So we’re going to come over here and I’m going to add a section down here right below our page match section that we have in this Hook In It function and remember the Hook In It function where this Hook In It hook in Drupal which in this case we use our module name in it runs every time a page is loaded.

Keep in mind this isn’t going to work on cache pages so just keep it in mind it’s not necessarily going to work on cache pages, it’s not going to run every time the page loads so if you have cache pages and you change the settings on your administration page you’ll have to clear the cache and then I believe it still will work after that point but just keep in mind if you have caching Hook In It is a little less reliable because it only runs the first time before the cache is built but the first section here we do the page matching, the second section we’re actually going to do this node edit matching so we’re going to match and see if we’re on a node edit page and if we are we’re going to check to see if we’re on the correct node type.

So in this case we of course only want it on article pages or I think I selected Client Pages and then whet we’re going to do is we’re going to check if it matches either the page match section or the node edit match section. We’re going to go ahead and make sure we add this Java Script that’s listed down below. So I’m just going to start by just setting a variable, I’m going to default it to False.

The reason I’m going to do that is that it just gives me the fallback so if everything goes through and it doesn’t match any of my other conditions it of course doesn’t match that it’s on the correct node edit page. I’m then going to use a function called ARG in Drupal which basically allows you to pull arguments from the URL starting with a zero so in this case the zero is going to match up with … if I’m on a node edit page here the zero is going to pull this node value, 1 would pull the 65 and 2 would pull edit.

So I want to say if the very first argument or the 0 argument in the URL is node and our 2 which is the 3rd argument in the list is Edit which essentially means we’re on a Node Edit page then I want to use a Drupal function called Menu Get Object and this is going to load by default the node object based on the page here on. So if you’re on Node 65 Edit as in the case up here it’s going to get the full node object for Node 65. If also false on the View page in the Node View so node/65 without the edit it’s still going to pull in the information for Node 65.

Each node object has a specific type so in this case we can use the node type to check if it’s in the variable that we of course set in this form field right here. So in this case we select it in Article and Client and when we created this form or when we submitted this form we want to check if this Node Type is either an article or a client type and if so then we’ll say the Node Edit does much so we’re going to go ahead and say if it’s in an array and then we had to select the actual needle or the thing we’re searching for so if the node type of this node which it could be article or it could be anything is in the array that is actually the variable we’re going to be pulling from which in this case if you remember we have this variable is going to pull an array with Article and Client because those are the two values we selected on our administration form then if this all comes through then we’re going to say Node Edit Match is True, we’re going to come down here and change this if statement because we want to add this Java Script if either the page matches which is calculated and checked right here or if this Node Edit matches which is right here.

So if it’s either on the Node Edit page that you selected or it matches one of the pages it’s going to go ahead and add the Java Script code that we wrote in the first two episodes or first two parts of this module. So let’s go ahead and give this a try; assuming everything is created correctly, you can see we of course have two values, Article and Client selected for our content type edit forms I am on the Edit Article Test so I am on an article page, I refresh the page and now if I click away you’ll notice I get the Java Script pop up, if I come into content and try to find a basic page here I will say here a Test Type and I edit this you’ll notice if I click away, nothing happens.

Of course I come back to an article type, try to click away and I guess maybe you actually have to open it up inside a new page. Let me see here; oh there it worked, let me open this up here, edit … okay so this is working, if you go to an article edit page and you try to navigate away the Java Script is going to pop up, if you go to any other page such as a test content type page and a basic page content type page or anything else that’s not selected, the Java Script is not going to work.

There seems to be some slight minor issues with pulling up and giving the Java Script to work inside this administration window here but for the most part it works and it was a really simple module, hopefully you learned something and if you have any questions you let me know. Thanks again to drupalize.me for sponsoring this episode of the Daily Dose of Drupal and thank you for watching and we’ll see you next time.