Register Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools
  #1  
Old 01 Feb 2015, 07:57
Medi0cr3 Medi0cr3 is offline
 
Join Date: Aug 2014
Arrow Custom Edited Template utilizing JQuery

Custom Edited Template utilizing Jquery

Skill level: Late Beginner
Some Knowledge requred:
-PHP Syntax formatting
-Jquery Syntax formatting

If you dont know what JQuery is, check out some things on youtube of what people do with JQuery. Jquery is essentially JavaScript condensed into something everybody can use. I learned by sitting through many tutorials until I got the following process right. Many tutorials didn't have exactly what I needed, or were so old. I had to figure out things a lot on my own.

There's some interesting things you can do with the forum. I'm using Jquery and PHP to manipulate things in my database on my custom pages. I'm going to show you how I did it. This does require some knowledge of PHP and Jquery alike.

First off, I like to create templates of a page so that I can just copy and paste my code later. I'm using a forum that has some darker color grays for most of its make up. It looks nice. I added some CSS from a CSS creator I found on the net to give my page some effect of a 3D to it, so it doesn't appear as blocky on my custom pages.

Prior to creating files, I do have to recommend that you use a naming prefix for all your files. Such as "A_name.php". Keeping all your files close in the list is key. I also like to use NotePad++ as I can upload very quickly and mash my F5 key to see if the next iteration of code is working.

Lets get started!

Create a php file called "templater.php" and paste the following custom edited template into it. I got this edited template somewhere else on vbulletin years ago. I just use this same template as a starter for each new page.

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

I have edited the code with comments to show you what I do with my custom templates. Dont forget to change your database name :P.


Create a new style template in your CPAdmin->Styles Manager for the forum style you want. I call it "TEMPLATE TEMPLATE". Copy and paste the following code into it.

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

In the above mentioned code in the <script></script> tags you'll see that there's a .js file for the Jquery and an .js file for your Jquery. I like to use the google one so that my browser caches it. If Jquery ever gets updated, I can easily google JQuery CDN. https://developers.google.com/speed/...evguide#jquery



Next you'll need some Jquery. Create a new file called "JQUERY TEMPLATE.js". Copy and paste the following code.

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


Last edited by Medi0cr3; 01 Feb 2015 at 08:07.
Reply With Quote
  #2  
Old 01 Feb 2015, 07:57
Medi0cr3 Medi0cr3 is offline
 
Join Date: Aug 2014
Next we need a PHP file to take all the header requests that jquery is sending. Create a php file named "TemplateJQ.php". I Like to put JQ at the end of all my php files that have this role as its easy to identify later.

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Rule #1: Always escape the data you bring into your PHP files in preparation for database work.
Rule #2: With the Jquery function configuration we have, Jquery expects a return of data. There's options to set that differently and save time loading a page, however I like to have error control and handshake agreements between my codes. With the 2 way handshake you MUST send data back to the Jquery call. Even if it is NULL, it's still something sent back.
Rule #3: It is super important to think about how to control your errors. Always send something back to the Jquery function so you know what part of the code has failed. 10 times out of 10 if you have a PHP code failure, the way the Jquery function was handled will tell you that you had a "failure message:". Just be ontop of your game and you will soon see why. There is no way for php to send back that there was an error that I know of. Just comment out your code and ensure that you use the $Json and Echo Json to send back to your Jquery to hopefully tell you if you have an error or not. Use the "Console" in your browser. Most browser's consoles are brought up with F12. I use it heavily to ensure my code is being sent, received, and if it straight out fails, it will tell me.


I hope this helps out the new beginners that want to see some Jquery bring their custom pages to life.

-Medi0cr3
Reply With Quote
Reply

Similar Threads
Thread Thread Starter Forum Replies Last Post
Forum Style Know Style - Custom Jquery and DropDown Menu Readboy vBulletin 4.x Styles 6 31 Jul 2010 20:06



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


New To Site? Need Help?

All times are GMT. The time now is 16:40.

Layout Options | Width: Wide Color: