jQuery Validations

As part of the doco-loco assessment, the group decided to use a jQuery validator to check input fields.

Doco-Loco feedback from

For the feedback from I was required to use the validator to make that every field was filled out otherwise the form would not submit. Following the documentation on the website I wrote out the needed code in order to make it work  and when I tested it, it didn’t seem to pass the script at all. From here I filled around with the data-validation=”” in case I was missing something or forgot to add a piece of code. When that didn’t work I went in search for similar problems and solutions of google. here I found a lot of helpful information but none of them helped me when I tried them. After this, I decided to look through the other files in the directory to see if they had code that I didn’t. I found some code to call the validation script that was different from what I had been trying and it looked promising.

var form = $(‘form#aca_form’);
$.validate({
form : form,
});

Finally the validation worked! however, on closer inspection it came to my attention that the form was submitting even though the users hadn’t filled out the fields. So the validation was half working it was detecting that there was an error just not stopping them from submitting the form. From here I realised that I was activating the validation on the “click” of the submit button rather than on when it submitted the whole form.

$(“#aca_form #submit”).on(‘submit’, function() {
academic_form();
});

Using this code fixed the problem.

Split function while checking for specific email domain

As part of the login from the user was asked to use their SAE email such meant that as developers had to find a way to make sure that the email domain was SAE. For this I used a split function. This function splits strings based on what is inside the split(”); function. Therefore, I could use this to detect the domain on the end of the email and check if it was either a teacher or a student as well as making sure it was an SAE email. I tried adding this onto the end of the web-page but when this didn’t work I placed the code inside the validation file. Which unsurprisingly didn’t work either. In the end it was a lot simpler than I thought it would be I just had to add the two specific strings to the existing validtation function.

var emailParts = email.toLowerCase().split(‘@’),
localPart = emailParts[0],
domain = emailParts[1];
var email_student = “student.sae.edu.au”;
var email_staff = “sae.edu”;
if (localPart && domain && domain == email_student || localPart && domain && domain == email_staff) {

if( localPart.indexOf(‘”‘) === 0 ) {
var len = localPart.length;
localPart = localPart.replace(/\”/g, ”);
if( localPart.length !== (len-2) ) {
return false; // It was not allowed to have more than two apostrophes
}
}

Amped UP

On on of the pages I was getting the users to submit a form that registered their band. I felt that this needed to have validation and why not practice with the jQuery validation I already had? This worked with minimal problems as the standard $.validate(); script seemed to call the function.

Student Films list inside Teahcer’s Profile

As an added feature to the website, a list of all student films of a specific lecture were to be should in a teacher’s profile. For this to occur an ajax would use the search function and filter by campus, showing all the films in that campus.

Making the ajax was simple by now as I had already done this exact function before. From here I kept the same value for the campus selection and left the search variable blank. From here I had to make sure that only lectures could see the list of student films. For this to happen I needed to check the user_type which was set when they registered with their SAE email.

Styling

Initially, I had the cover image, title and the synopsis  that was displayed three rows of films at a time. However, in order to differentiate between the search results and the student film results I took away the cover images and kept the results in a simple list format with one row of results.

In terms of problems, I didn’t really have any with the code as I literally copied and pasted the code from another function and edited it to fit this particular function. When it came to the styling of it I did have a few ifs, buts and changes but no major hiccups.  Im quite pleased with how it turned out overall.

Usability Testing

In order to make sure that this website was functioning correctly for the users a usability test was conducted before the site went live. For this to happen a non-disclosure form had to be signed bay all participants in order to make sure that they would not speak about the website until it was live. As part of this usability test at least one film student, one potential employer and one onlooker who enjoys watching videos as a past time were asked to sign the disclosure form and answer a series of questions about the website.

One film person responded he liked the look of the website, however, he felt that the feedback form and the function to select a cover image did not work as expected. The participant also suggested that there be a next button to continue watching the documentaries rather than having to go back to the main menu.

An employer was tested and thought that the website,

“was an inivative way to show student work from around Austraila”.

She also when on to say that it gave her an opportunity to view work that she would not otherwise get access to.

With both participants mentioning  positive feedback about website’s look I feel that this is a win the design elements of the website. However, the functions such as the feedback form the and the cover image upload need work.

The third participant in this survey was a user who has an interest in watching films and enjoys browsing the internet on a daily basis to do so. She felt that the website was well designed and “really liked the yellow”. Like the second participant, she also likes how there is a range of films from across Australia that shows you “what the other states are up to”.

It was interesting to note that some of the functions on the website weren’t working like they were on the local version.

Overall, this feedback was helpful in the improvement of the website  and all comments and suggestions will be taken into consideration when we update the website.

I Really Really Hate Tables

What can I say tables…. as part of my internship I was asked to design and set up email signatures for both their main business Milestones Technology Group (MTG) and a start-up app they have recently created WorkApp. Designing the signatures was the same process as it always is: design, modify, design modify, design, modify. Once that was done it was time to HTML it.

Once I had made the signature responsive I looked into how I would install a HTML email signature. After some research, I found that annoyingly that  mac mail and outlook don’t support CSS properties or floats. Tables it was then.

Working with tables is not fun for one they are not responsive at all and then suddenly a row grows in width out of nowhere! and when I try to set a width it does nothing!

After pulling my hair out about it for about 10 minutes I go in search for any other way I can do this without having to use table and I found a video by Online Mastery that uses divs and spans instead of  floats. This will also allow me to make it semi-responsive ! 🙂 however, the video was not clear on where all of his styling was coming from. After some investigating I realised that I will need to place all styling within each tag as well as when I copied Online Mastery’s process my email signature turned out looking like this:

Right at the end he also mentioned that I need a direct link to any images I am using if I want them to appear on the screen. All in all this process is much longer than I thought it would be.

In the end, I used tables because the mail host wouldn’t style the signature properly. Go figures.

 

Creating an Ajax Search Engine

When we first got given this assessment I was really excited that there was going to be a search engine in it as I have always wanted to know how to create one that functions instead of just a placeholder image on the screen.

As always I had no idea how to actually create a search engine only that there were two main types and Ajax and a PHP based search engine. An Ajax system uses a form and jQuery as a result allows for data to appear without having the refresh the page.

First off I googled Ajax search engine and found an article that, while helpful was not exactly what I was looking for. It discussed how to make your website ‘search friendly’ by:

• adding relevant keywords and alt tags to images
• removing hidden text
• eliminating apparent content duplication
• using straight HTML navigation links on your website

Going onto youtube I found many videos that created ajax search systems. All of them used the same format:

$.ajax({
type:”POST”,
url:””,
data:{
function:function,
target:traget
},
dataType:”,
success:function(res) {
// LOOP THROUGH THE DATA IN THE DATABASE IF SOMEONE SEARCHES SOMETHING
}
});

However, none of them seemed to work for me when I tried to replicate them. Finally, I came across another video tutorial that went through the same process above but for some reason worked when I copied it. At this point, I was able to search specific keywords from a separate document  which I placed in the url:””, part of the function. Now came the challenge of linking what the function to the assessment’s databse.

This proved not as difficult as I thought it would be as all I had to do was change the url and tell the ajax which the spesific funciton it was searching for on the file. That wasn’t the end of it though I had to make sure that I saved the values of what the user searched as a variable everytime they pressed a key so that it would search while the user was typing a word into the search bar. Now this might seem simple but at the time I was havig trouble saving the variables to the overlord the SELECT query was not ‘perfect’ and therefore nothign worked. After some brianstorming the SELECT query was altered and the search engine functioned all was needed was to filter it by campus.

Filtering campuses

In order to filter the search results by new fuction had to be added to the overlord file so that the resuslts would only show if the value of the campus was selected unless it would show all campuses. Once this was created all I had to do was add another post value to the data:{} function and created a drop down menu with all campuses that were going to use the webite. Now this wasn’t where the prolems started saving teh values of the drop down menu to match the values in the database in order for the search to function was pretty straight forward. Making the funciton work was a different story. For some reason none of the data from the database was being passed to the search page. After much brainstorming and  consoleloging it was discovered that the php had to be converted to the JSON file inorder to be read by the Ajax. Once this was done the search function worked smoothly the users were able to search a flim name and look up keyword and the film’s synopsis while displaying the cover image of the said film.

By the end the code looked like this:

// SEARCH ENGINE FUNCTION
function search() {
console.log(‘Keypress!’);
var search = $(‘#search’).val();
var campus_selection = $(‘#campus_selection’).val();
console.log(campus_selection);
if (search != ”) {
$.ajax({
type:”POST”,
url:”overlord.php”,
data:{
function:’search_project’,
target:search,
campus:campus_selection
},
dataType:’json’,
success:function(res) {
// LOOP THROUGH THE DATA IN THE DATABASE IF SOMEONE SEARCHES SOMETHING
$(‘#searchList’).html(”);
var count = 0;
$.each(res, function(index,value) {
if(value[‘id’] != null){
console.log(value);
$(‘#searchList’).append(“

</a><a href=’displayfilm.php?id=”+value[‘id’]+”‘><p class=’film_title_search text_width’>”+value[‘title’]+”</p></a><p class=’max_length text_width’>”+value[‘synopsis’]+”</p>”);
// WHEN THE CONENT IS NOT IN THE DATABASE
count++;
}
});
$(‘#searchList’).append( “

“);
if (count < 1){
$(‘#searchList’).html(”);
$(‘#searchList’).append(“<p class=’empty_search’>Sorry there are no results</p>”);
}

}
});
} else {
$(‘#searchList’).html(”);
}
}

$(document).ready(function(){

<?php if (isset($_POST[‘search’])) { ?>
search();
<?php }?>

$(document).on(‘change keyup’, ‘#search, #campus_selection’, function() {
search();
});

});

I have to say I am very happy with how this turned out and I learnt alot from it I look forwrad to using this knoweldge in future projects.

Fixing the Star Ratings

As part of the assessment we were required to create a star rating system that allowed the user can rate a film once whether they were logged on or not. To start this tatiana started the star rating icons that rated a million times. It was my job to make sure that they only rated once and that a thank you message was displayed after they rated.

First off I looked at the types of functions that I could use to allow the input field to stop being clicked on after the first rate. I found a removeAttr(); function that looked promising.

$(‘#’ + mediaId + ‘ .star_bar #’ + rate).removeAttr(‘onclick’); allows to click once

when I replaced that functions values to suit mine it still didn’t work it was suggested that I use $().off(); function which turn off all functions in relation to the id or class in question.

Again it failed.

Upon a moment of extreme frustration I had a look at the file itself and after console.logging everything I noticed that it wast’t actually passing the rating value through to the overlord.

The value it was trying to send didn’t exist : $(‘input.star’).off() so I tried using the id’s of all ratings input.star1 – star this (unsurprisingly) still didn’t work. From here I tried using the id by themselves that didn’t work either it wasn’t until it us pointed out to me as the user wasn’t clicking on the stars themselves but the labels.

On a side note I also found out the if there is a $(input …) the jquery is searing for the input and then the … inside the input value.

finally used $(‘#rating label’).val();

From here I looked into getting to looked at getting the value of a radio button and found these two pieces of code that looked promising:

 document.getElementById(“selectlist”).value

and

$(‘.radioBoxClass’).each(function() {
if ($(this).prop(‘checked’)) {
// set value
}
});

Eventually it was solved with the help of tatiana buy using get element Id(label) this sent the rating to the database once but still allowed the user to click console.log was still saying that there was an uneven amount of variables and the $data was null.

Thankfully that was solved easily all I needed to do was to get rid of the console.log(res); as it was asking for the database to retrieve something that wasn’t there.

jQuery local storage was used to store the rating so that users could only rate once. One other problem though was that I needed to disable the hover effect on the stars as well as the thank you message however this was’t as simple as it sounded. After using $(‘#rating input’).prop(‘disabled’,’disabled’); $(‘#rating label’).removeClass(‘hover_class’);when this wasn’t working I then realised that label:checked was not a feature.

localStorage.setItem(“rating_<?php echo $_GET[‘id’];?>”, rating); was used to make sure that they could rate once per film rather than just once on the whole website.

In the end all that was needed to make sure that the stars wouldn’t hover once the user had rated was this:

// Retrieve
$(‘#star’+localStorage.getItem(“rating_<?php echo $_GET[‘id’];?>”)).prop(‘checked’,’checked’);
$(‘#rating input’).prop(‘disabled’,’disabled’);
$(‘#rating label’).removeClass(‘hover_class’);

Once all the issues were sorted I merged it to Github and then the whole website was sent off to the client for review.