I make the internet beautiful. Front End Developer with a crush on the back end. Hubspot COS Penguin. Favorite color is #bada55 - I think I may have just told a lie! This purple color is more like my favorite color, I just wanted to write badass

logo

Jquery and Javascript to help with your clients need to change their website

javascriptI have had clients wanting to update their website.. Minimal things, where I don’t want to spend the time to go in and make the changes. I’ve started playing around with xml files when I was doing a google map plug in.. and I thought.. well, this isn’t so hard now! This one piece I started doing is an employment roster. They can add, change, and remove employees as they need to. All they have to do is update via FTP and they will be good to go. I imagine I will be supporting this for every new client I put this on. Let’s make sure we have our Jquery in thesection. Let’s load it from Google!   Once that is taken care of, I will show you a little excerpt of the code we are working with. We are going to assign classes to the places that we want to replace in the HTML file. The HTML  
<div id="staffSection">
<h2 class="staffName">name</h2>
<img class="staffPic" />
<h2 class="staffPosition">position</h2>
<p class="staffDescription">paragraphs of text</p>
</div>
The CSS
#staffSection { width: 300px; height: 500px; background-color: #ddd; }
h2 { font-size: 18px; color: #000; padding: 20px; }
.staffPic { width: 250px; background: #fff; padding: 10px; margin: 20px 15px; }
.staffDescription { font-size: 15px; margin: 20px; color: #000; }
Let’s get to the script we are going to put at the bottom of the page Because we are setting up one of these on each page, we will define a staff number for each page.
var displayStaffMember = 2; // This will display staff member 2 in the XML file, this will change for every file you want this page on
$(document).ready(function() { // Has to be on document read - the HTML has to be loaded for it to be replaced
Let’s go ahead and call in ajax to do some lifting
$.ajax({
Let’s get our ducks in a row
type: "GET",
 url: "ftp/staff.xml",
 dataType: "xml",
 success: function(xml) {
Now that we have all the setup out of the way, we have to locate the information we want out of the XML file. What I do is for each staff I want to go through the XML file and make sure I have the right staff (remember declaring our var displayStaffMember earlier?) number and we’ll replace that HTML with the proper information.
$(xml).find('staff').each(function () {
    var staffId = $(this).attr('id');
    var staffMember = $(this).attr('name');
    var staffPosition = $(this).attr('position');
    var staffPicture = $(this).attr('pic');
    var staffDescription = $(this).attr('description');
    if (staffId == displayStaffMember) {
        $('.staffName').replaceWith('<h3>' + staffMember + '</h3');
        $('.staffPosition').replaceWith('<h3>' + staffPosition + '</h3');
        $('.staffPic').replaceWith('<img class="shadow marginFixImg" src="ftp/' + staffPicture + '" />'); 
        $('.staffDescription').replaceWith('<p>' + staffDescription + '</p>'); 
        } else {  }
 });
}
});

});
 <?xml version="1.0" encoding="utf-8" ?>
 <employees>
 <staff id="1" name="Nicholas Decker" position="Wizard of Light Bulb Moments" pic="nicholas.jpg" description="Pancakes can save lives. Being a Morman Man can save wives. Having no legs can save dives. Riding your bike can save drives." />
 <staff id="2" name="Francisco Garcia" position="Bull Fighter" pic="frank.jpg" description="One always finds one's burden again. But Sisyphus teaches the higher fidelity that negates the gods and raises rocks. He too concludes that all is well. This universe henceforth without a master seems to him neither sterile nor futile. Each atom of that stone, each mineral flake of that night-filled mountain, in itself forms a world. The struggle itself toward the heights is enough to fill a man's heart. One must imagine Sisyphus happy." />
 <staff id="3" name="Smiling Shark" position="Death Biter" pic="http://i.imgur.com/VZVET.jpg" description="arks have skeletons composed of cartilage rather than of bone. With a few exceptions, sharks have torpedo-shaped bodies—an efficient, streamlined design for fast-swimming predators. " />
</employees>

Tags: , , ,

Trackback from your site.

Leave a comment

What about a meepface?

Somebody’s Instagram Feed