Text

JQuery Bug or no?

In working on some js to disable and enable a submit button, only if required fields are filled in, led me to uncover a surprising [to me] issue that I still need to do further research on.  In specifying the ID of the form, I believed that only the elements within that specified form would be affected; but to my chagrin the other form (with a completely different form-id but with a shared element type was also affected and prevented the targeted form button from becoming enabled - even though all the required fields had been filled in.  Is anyone else aware of this issue?  Is it a bug?  Did I do something incorrectly?  I need some clarification on the matter.. if anyone out there has the answer, please feel free to drop a comment.  Sample code below:

SCRIPT: 

$(‘button#cf-submit-btn’).attr(‘disabled’,’disabled’);

 $(‘#contact-form’).keyup(function() {

  …..

  if($(‘input[type=”text”]’).val() == “”) {

    $(‘button#cf-submit-btn’).attr(‘disabled’,’disabled’);

  }

 …..

}

and yes this is enclosed in the $(document).ready( function(){ … });

HTML:

<form id=”logIn”>

 <input type=”text” placeholder=”username” />

 …

</form>

…..

…..

<form id=”contact-form”>

  <input type=”text” placeholder=”Full Name” />

</form>

Text

Day 3: JQuery-JSON Instagram Photo Feed App: Caption Added

Decided to spend a little time today taking the Instagram Photo Feed App on my site a little further by displaying Photo Captions.  First let me step back just a bit to share the source code; which as mentioned in yesterday’s entry originates from and is available at https://forrst.com/posts/Using_the_Instagram_API-ti5.

Now let’s get down to business.  Instagram allows a user some options in the way of classifying the images they would like to display: you can display your own photos, images from people you follow if desired, by tags, by location, etc. - you can find out more on the developer pages.

For my project I chose to simply display a few of my own photos and additionally display the captions if they exist.

source for creating the photo feed:

$(function({
  $ajax.({
    type: “GET”,
    dataType: “jsonp”,
    cache: false,
    url: “https://api.instagram.com/v1/users/self/media/recent?access_token=[actionToken]&count=10”,
    timeout: 10000,
    success: function(data) {

    for (var i = 0; i < 10; i++) {

            $(“.instagram-photos”).append(“<div><a target=’_blank’ href=’” + data.data[i].link +”’><img class=’instagram-image’ src=’” + data.data[i].images.thumbnail.url +”’ /></a></div>”);

          }

  });
});

Note that I’ve bolded [actionToken] in the source above; you’ll need to retrieve this value from the Instagram API.  If you look at the code on forrst you will notice there is a slight difference in the url there and the one above; in my example I’ve opted to use {self}, while Dan used {userid}.  Using {self} eliminates the need to specify {userid} if you are displaying your own images.

Next, to display the photo caption you will need to include the following code somewhere inside your for loop:

// if photo caption is not null display it

if ( data.data[j].caption.text !== “null”) {

  $(“.instaphotos”).append(“<div class=’instagram-caption’>” + data.data[j].caption.text + “</div>”);

}

And there you have it.  View the example on my site khreativemedia.com/work.html.

If you have any questions about the material presented above or need some help please feel free to send me an <a href=”mailto:kh@khreativemedia.com”>email</a>.

Happy Coding!

Text

A bit of work life - JavaScript Form Validation

Even though a web developer, who has been coding for many years, the one area where I lack confidence is coding JavaScript.  It is definitely not my strength - the weird thing is I’m better at it than I think.  This one fact is continuously proven while on the job when tasks are thrown at me and the choice is to sink or swim.  I sit and sweat and shake - all the signs of nervousness commonly tied to the mention of JAVASCRIPT for me.  Clearly, the choice is always to SWIM!  Because one way or the other even if it takes a while (forever), it gets done.  A lot of faith and praying, accompanied by tons of googling, and if it really is above my head, I call on a backend developer - never refuse to ask for help when needed.

Anyway, there is a point to all my ramblings, because I am pretty sure there are folks out there who experience similar emotions when faced with JavaScript or perhaps some other language.

A personal task has been to redo my website in the hopes of taking a leap of faith in searching for more freelance gigs.  I currently work with a consulting firm… however it is a necessity for me to have other means of income for those times when things are slow on that end.

Not a trained designer - I do have an eye for great design and every now and again work on throwing a page together here and there and learn something in the process which is even more important to me - I’ve put the pedal to the metal or well in this case brought the mouse to photoshop (smile), mocked up a simple design and coding is under way.

Now, coding my contact page is a task that takes longer than I care to admit - partly due to procrastination. It needs some form of validation - both client side and back end validation.  Here is where JS comes in [client side that is].  Years ago I remember using some JQuery which was pretty comprehensive - unfortunately I could not find that code anywhere on this machine and realized it’s probably trapped on the now broken unit sitting on my bed in earnest need of repair if at all possible - it suffers from electrical problems… anyway, I diverge.

Luckily, determination came to my aide.  After endless googling and clicking thru the JQuery API’s I finally located the bit of code I longed for, the JQuery validation plugin.

So here’s an example of a simple form (HTML):

<form id=”yourformidhere”>
  <div>
    <label for=”fullname”>Name:</label>
    <input type=”text” name=”fullname” id=”fullname” required=”required” />
  </div>
  <div>
    <label for=”email”>Email:</label>
    <input type=”email” name=”email” id=”email” required=”required”/>
  </div>
  <div>
    <input type=”submit” value=”Submit” />
  </div>
</form>

And now here is the JQuery code needed for validation:

$(document).ready(function(){
  $(“#yourformidhere”).validate({
    rules: {
      fullname: “required”,
      email: {
        required: true,
        email: true }
    }  // end rules
  });
}); // end function

Now if you want to add your own custom validation error message for each field, you need to add the following bit of code (italized below) after the closing brace for rules, like so:

rules: {
 …

}, // make sure you put a comma after the closing bracket for rules

messages: {

  fullname: “Error message for full name”,
  email: {
    required: “This is a required field”,
    email: “You must enter a valid email address”
  }
}

And there you have it.  Hopefully you’ll be able to find this helpful!

Element Information

AttributesPositionOtherAncestorsChildren