JavaScript Class Issues

  • (3 Pages)
  • +
  • 1
  • 2
  • 3

33 Replies - 1478 Views - Last Post: 13 August 2015 - 10:44 AM

#1 JeremyBenson11  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 230
  • Joined: 10-January 14

JavaScript Class Issues

Posted 10 August 2015 - 02:07 PM

Hey,

I'm having some major problems with a Javascript class. I'm hoping someone can help me point out bugs, and issues where I'm going wrong, and if I can understand them at all, better coding conventions. Right now I have this product class which gathers information from a form via inputs. I use functions to set field members via onkeyup and onchange.

The main function is my send_product() function which is hooked up to the forms onsubmit.

The class first sends the basic data and gathers a token.
The class then sends videos links and crew members to respective handling scripts via ajax.

Right now I'm having issue getting the code sorted out. I'll post the clean version of the class first.
When the class is like this send_product() returns false for some reason.

As a side not all my scripts ajax communicates with returns some basic text.

// When form_token is fixed of error not a function site must send whether or not crew and videos were added to php script.

function jProduct()
{
	
	this.title;
	this.genre;
	this.company;
	this.price;
	this.ulr;
	this.format;
	this.languages;
	this.systemRequirements;
	this.mediaFirst;
	this.videos = new Array();
	this.crewUsernames = new Array();
	this.token;
	
	this.hasCrew = false;
	this.hasVideos = false;
	
	this.errors = new Array();
	
	this.update_title = function()
	{
		
		this.title = $('#title').val();
		
	}
	
	this.update_genre = function()
	{
		
		this.genre = $('#genre').val();
		
	}
	
	this.update_company = function()
	{
		
		this.company = $('#company').val();
	}
	
	this.update_price = function()
	{
		
		this.price = $('#price').val();
		
	}
	
	this.update_url = function()
	{
		
		this.url = $('#url').val();
		
	}
	
	this.update_format = function()
	{
		
		this.format = $('#format').val();
		
	}
	
	this.update_languages = function()
	{
		
		
		this.languages = $('#languages').val();
		
	}
	
	this.update_system_requirements = function()
	{
		
		this.systemRequirements = $('#systemRequirements').val();
		
	}
	
	this.update_media_first = function()
	{
		
		this.mediaFirst = $('#mediaFirst').val();
		
	}
	
	this.add_crew = function(usernameSet)
	{
		
		this.crew.push(usernameSet);
		
	}
	
	this.send_product = function()
	{
		
		// this function sends the product to server side script 
		
		var validator = new jValidator;
		
		
		validator.validate_text(this.title, 1, 'title too short.');
		validator.validate_select(this.genre, '', 'select genre.');
		validator.validate_text(this.company, 1, 'enter company.');
		validator.validate_text(this.url, 2, 'enter url to store/site.');
		validator.validate_select(this.format, '', 'select format.');
	
		this.errors = validator.return_errors();
		
		var productSent = false;
			
		if(this.errors.length === 0)
		{
			
			// There were no errors, send basic product info to server side script post_product.php
		
			var productData = {"title":this.title, "genre":this.genre, "company":this.company, "url":this.url, "format":this.format, "operation":"post-js"};
            var reivedToken = "";
			
			$.ajax({
				method: "POST",
				url: "../../php/scripts/post_product.php",
				dataType:"html",
				data:productData
                    				
			}).done(function(html){
			    // The return must be outside of the .done function.
				
				if(html != '')
				{
				  
				  productSent = true;
			          recievedToken = html;
			
				}
							  
			});
			
			
		}else{
			
			// there were errors in validation
			
			return false;
		
		}
		
		 if(productSent)
			 {
				 
				 // append token to form, and send it with images and videos.
					
				  this.token = recievedToken;
				
				  var form = document.forms['post-product-form'];
				  this.token = html;
				 
				  this.form_token(form, 'token', this.token);
				  
				  this.send_crew();
				  this.send_videos();
				 
				 
			 }
	
	    alert("return: " + productSent);
		return productSent;
		// end send product
		
	}
	
	this.send_crew = function()
	{
		
		// loop this to send every crew member.
		
		if(this.crewUsernames.length >= 1)
		{		
			for(i = 0; i < this.crewUsernames.length; i++)
				{
				
						var crewDate = {"crewID":this.crew[i], "token":this.token};
						
						$.ajax({
								method: "POST",
								url: "../../php/scripts/post_product_crew.php",
								dataType:"html",
								data:crewData
													
							}).done(function(html){
								
								if(html === 'complete' && i === this.crewUsernames.length)
								{
									
									this.hasCrew = true;
							
								}
								
							});
							
					// End loop to send crew
				}
			
			// End if crew not empty
		}
		
		// end send crew function	  
	}

	// this function will send videos to post_product_videos.php
	
	this.send_videos = function()
	{
		// loop this to send every video.
		 if(this.videos.length >= 1)
		 {
				for(i = 0; i < this.videos.length; i++)
				{
				
						var crewDate = {"video":this.videos[i], "token":this.token};
						
						$.ajax({
								method: "POST",
								url: "../../php/scripts/post_product_videos.php",
								dataType:"html",
								data:videoData
													
							}).done(function(html){
								
								if(html === 'complete' && i === this.videos.length)
								{
									
									this.hasVideos = true;
								
								}
								
						});
					// end loop to send videos
				}
			// End if videos not empty.
		 }
		// end send videos function
	}
	
	this.form_token = function(formSet, keySet, valSet)
	{
		// This function will add product token to the form
		// This will allow for the server side script to update at token.
		
		var input = document.createElement('input');
		input.type = 'hidden';
		input.name = keySet;'variable name';
		input.value = valSet;
		formSet.appendChild(input);
	
		return true;
	}
	
	this.add_crew = function(usernameSet)
	{
		
		this.crewUsernames.push(usernameSet);
		
	}
	
	this.add_video = function (videoSet)
	{
		
		this.videos.push(videoSet);
		
	}
	
	
	
}


This next bit of code is odd, and perplexes me to the point of major confusion! lol. With the alerts in place, send_product() return true, and the site goes to the forms action script. I have no idea why. Somehow the alerts are effecting data, or some kind of communication.

// When form_token is fixed of error not a function site must send whether or not crew and videos were added to php script.

function jProduct()
{
	
	this.title;
	this.genre;
	this.company;
	this.price;
	this.ulr;
	this.format;
	this.languages;
	this.systemRequirements;
	this.mediaFirst;
	this.videos = new Array();
	this.crewUsernames = new Array();
	this.token;
	
	this.hasCrew = false;
	this.hasVideos = false;
	
	this.errors = new Array();
	
	this.update_title = function()
	{
		
		this.title = $('#title').val();
		
	}
	
	this.update_genre = function()
	{
		
		this.genre = $('#genre').val();
		
	}
	
	this.update_company = function()
	{
		
		this.company = $('#company').val();
	}
	
	this.update_price = function()
	{
		
		this.price = $('#price').val();
		
	}
	
	this.update_url = function()
	{
		
		this.url = $('#url').val();
		
	}
	
	this.update_format = function()
	{
		
		this.format = $('#format').val();
		
	}
	
	this.update_languages = function()
	{
		
		
		this.languages = $('#languages').val();
		
	}
	
	this.update_system_requirements = function()
	{
		
		this.systemRequirements = $('#systemRequirements').val();
		
	}
	
	this.update_media_first = function()
	{
		
		this.mediaFirst = $('#mediaFirst').val();
		
	}
	
	this.add_crew = function(usernameSet)
	{
		
		this.crew.push(usernameSet);
		
	}
	
	this.send_product = function()
	{
		
		// this function sends the product to server side script 
		
		var validator = new jValidator;
		
		
		validator.validate_text(this.title, 1, 'title too short.');
		validator.validate_select(this.genre, '', 'select genre.');
		validator.validate_text(this.company, 1, 'enter company.');
		validator.validate_text(this.url, 2, 'enter url to store/site.');
		validator.validate_select(this.format, '', 'select format.');
	
		this.errors = validator.return_errors();
		
		var productSent = false;
		
		alert("Function Start: " + productSent);
			
		if(this.errors.length === 0)
		{
			
			// There were no errors, send basic product info to server side script post_product.php
		
			var productData = {"title":this.title, "genre":this.genre, "company":this.company, "url":this.url, "format":this.format, "operation":"post-js"};
            var reivedToken = "";
			
			$.ajax({
				method: "POST",
				url: "../../php/scripts/post_product.php",
				dataType:"html",
				data:productData
                    				
			}).done(function(html){
			    // The return must be outside of the .done function.
				
				if(html != '')
				{
				  
				  productSent = true;
				  alert("inside ajax: " + productSent);
			      recievedToken = html;
			
				}
							  
			});
			
			
		}else{
			
			// there were errors in validation
			
			return false;
		
		}
		
		 if(productSent)
			 {
				 
				 // append token to form, and send it with images and videos.
					
				  this.token = recievedToken;
				
				  var form = document.forms['post-product-form'];
				  this.token = html;
				 
				  this.form_token(form, 'token', this.token);
				  
				  this.send_crew();
				  this.send_videos();
				 
				 
			 }
	
	    alert("return: " + productSent);
		return productSent;
		// end send product
		
	}
	
	this.send_crew = function()
	{
		
		// loop this to send every crew member.
		
		if(this.crewUsernames.length >= 1)
		{		
			for(i = 0; i < this.crewUsernames.length; i++)
				{
				
						var crewDate = {"crewID":this.crew[i], "token":this.token};
						
						$.ajax({
								method: "POST",
								url: "../../php/scripts/post_product_crew.php",
								dataType:"html",
								data:crewData
													
							}).done(function(html){
								
								if(html === 'complete' && i === this.crewUsernames.length)
								{
									
									this.hasCrew = true;
							
								}
								
							});
							
					// End loop to send crew
				}
			
			// End if crew not empty
		}
		
		// end send crew function	  
	}

	// this function will send videos to post_product_videos.php
	
	this.send_videos = function()
	{
		// loop this to send every video.
		 if(this.videos.length >= 1)
		 {
				for(i = 0; i < this.videos.length; i++)
				{
				
						var crewDate = {"video":this.videos[i], "token":this.token};
						
						$.ajax({
								method: "POST",
								url: "../../php/scripts/post_product_videos.php",
								dataType:"html",
								data:videoData
													
							}).done(function(html){
								
								if(html === 'complete' && i === this.videos.length)
								{
									
									this.hasVideos = true;
								
								}
								
						});
					// end loop to send videos
				}
			// End if videos not empty.
		 }
		// end send videos function
	}
	
	this.form_token = function(formSet, keySet, valSet)
	{
		// This function will add product token to the form
		// This will allow for the server side script to update at token.
		/*
		var input = document.createElement('input');
		input.type = 'hidden';
		input.name = keySet;'variable name';
		input.value = valSet;
		formSet.appendChild(input);
		*/
		return true;
	}
	
	this.add_crew = function(usernameSet)
	{
		
		this.crewUsernames.push(usernameSet);
		
	}
	
	this.add_video = function (videoSet)
	{
		
		this.videos.push(videoSet);
		
	}
	
	
	
}


Thanks for any help, this is got me scratching my head.

Is This A Good Question/Topic? 0
  • +

Replies To: JavaScript Class Issues

#2 andrewsw  Icon User is online

  • the case is sol-ved
  • member icon

Reputation: 6376
  • View blog
  • Posts: 25,763
  • Joined: 12-December 12

Re: JavaScript Class Issues

Posted 10 August 2015 - 02:21 PM

I've glanced through your code and the main problem seems to be, understanding that ajax runs asynchronously. You set productSent = true; within done() but, by this time, the function has already completed execution and returned false.

Most of the processing has to occur within the callbacks (done, etc.), although this may include calling an external function and/or updating content on the page.
Was This Post Helpful? 0
  • +
  • -

#3 JeremyBenson11  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 230
  • Joined: 10-January 14

Re: JavaScript Class Issues

Posted 10 August 2015 - 02:32 PM

Hm, can you explain a little bit?

Quote

within done() but, by this time, the function has already completed execution and returned false.


but the variable is set within the done.() function. Since I instantiated it in the beginning of send_product() wouldn't it have scope there, as it's function wide?

I had a bunch of send_product() code in the done function, but I was still having problems. I think before the function was something like below.

Thanks for the help :)/>/>/>

this.send_product = function()
	{
		
		// this function sends the product to server side script 
		
		var validator = new jValidator;
		
		
		validator.validate_text(this.title, 1, 'title too short.');
		validator.validate_select(this.genre, '', 'select genre.');
		validator.validate_text(this.company, 1, 'enter company.');
		validator.validate_text(this.url, 2, 'enter url to store/site.');
		validator.validate_select(this.format, '', 'select format.');
	
		this.errors = validator.return_errors();
		
		var productSent = false;
			
		if(this.errors.length === 0)
		{
			
			// There were no errors, send basic product info to server side script post_product.php
		
			var productData = {"title":this.title, "genre":this.genre, "company":this.company, "url":this.url, "format":this.format, "operation":"post-js"};
            var reivedToken = "";
			
			$.ajax({
				method: "POST",
				url: "../../php/scripts/post_product.php",
				dataType:"html",
				data:productData
                    				
			}).done(function(html){
			    // The return must be outside of the .done function.
				
				if(html != '')
				{
				  
				  productSent = true;
			          recievedToken = html;
                                  
                                 // append token to form, and send it with images and videos.
					
				  this.token = recievedToken;
				
				  var form = document.forms['post-product-form'];
				  this.token = html;
				 
				  this.form_token(form, 'token', this.token);
				  
				  this.send_crew();
				  this.send_videos();

			
				}
							  
			});
			
			
		}else{
			
			// there were errors in validation
			
			return false;
		
		}

		return productSent;
		// end send product
		
	}


This post has been edited by JeremyBenson11: 10 August 2015 - 02:40 PM
Reason for edit:: Removed previous quote, just press REPLY

Was This Post Helpful? 0
  • +
  • -

#4 JeremyBenson11  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 230
  • Joined: 10-January 14

Re: JavaScript Class Issues

Posted 10 August 2015 - 02:39 PM

I switched the code back, like you mentioned... my error here is

this.form_token() is not a function... if I comment that out the next function says it's not a function it does this for this.send_crew and this.send_videos

here's the code

// When form_token is fixed of error not a function site must send whether or not crew and videos were added to php script.

function jProduct()
{
	
	this.title;
	this.genre;
	this.company;
	this.price;
	this.ulr;
	this.format;
	this.languages;
	this.systemRequirements;
	this.mediaFirst;
	this.videos = new Array();
	this.crewUsernames = new Array();
	this.token;
	
	this.hasCrew = false;
	this.hasVideos = false;
	
	this.errors = new Array();
	
	this.update_title = function()
	{
		
		this.title = $('#title').val();
		
	}
	
	this.update_genre = function()
	{
		
		this.genre = $('#genre').val();
		
	}
	
	this.update_company = function()
	{
		
		this.company = $('#company').val();
	}
	
	this.update_price = function()
	{
		
		this.price = $('#price').val();
		
	}
	
	this.update_url = function()
	{
		
		this.url = $('#url').val();
		
	}
	
	this.update_format = function()
	{
		
		this.format = $('#format').val();
		
	}
	
	this.update_languages = function()
	{
		
		
		this.languages = $('#languages').val();
		
	}
	
	this.update_system_requirements = function()
	{
		
		this.systemRequirements = $('#systemRequirements').val();
		
	}
	
	this.update_media_first = function()
	{
		
		this.mediaFirst = $('#mediaFirst').val();
		
	}
	
	this.add_crew = function(usernameSet)
	{
		
		this.crew.push(usernameSet);
		
	}
	
	this.send_product = function()
	{
		
		// this function sends the product to server side script 
		
		var validator = new jValidator;
		
		
		validator.validate_text(this.title, 1, 'title too short.');
		validator.validate_select(this.genre, '', 'select genre.');
		validator.validate_text(this.company, 1, 'enter company.');
		validator.validate_text(this.url, 2, 'enter url to store/site.');
		validator.validate_select(this.format, '', 'select format.');
	
		this.errors = validator.return_errors();
		
		var productSent = false;
		
		alert("Function Start: " + productSent);
			
		if(this.errors.length === 0)
		{
			
			// There were no errors, send basic product info to server side script post_product.php
		
			var productData = {"title":this.title, "genre":this.genre, "company":this.company, "url":this.url, "format":this.format, "operation":"post-js"};
            var reivedToken = "";
			
			$.ajax({
				method: "POST",
				url: "../../php/scripts/post_product.php",
				dataType:"html",
				data:productData
                    				
			}).done(function(html){
			    // The return must be outside of the .done function.
				
				if(html != '')
				{
				  
				  productSent = true;
			      recievedToken = html;
				  
				  // append token to form, and send it with images and videos.
					
				  this.token = recievedToken;
				
				  var form = document.forms['post-product-form'];
				  this.token = html;
				 
				  this.form_token(form, 'token', this.token);
				  
				  this.send_crew();
				  this.send_videos();
				 
			
				}
							  
			});
			
			
		}else{
			
			// there were errors in validation
			
			return false;
		
		}
		
		return productSent;
		// end send product
		
	}
	
	this.send_crew = function()
	{
		
		// loop this to send every crew member.
		
		if(this.crewUsernames.length >= 1)
		{		
			for(i = 0; i < this.crewUsernames.length; i++)
				{
				
						var crewDate = {"crewID":this.crew[i], "token":this.token};
						
						$.ajax({
								method: "POST",
								url: "../../php/scripts/post_product_crew.php",
								dataType:"html",
								data:crewData
													
							}).done(function(html){
								
								if(html === 'complete' && i === this.crewUsernames.length)
								{
									
									this.hasCrew = true;
							
								}
								
							});
							
					// End loop to send crew
				}
			
			// End if crew not empty
		}
		
		// end send crew function	  
	}

	// this function will send videos to post_product_videos.php
	
	this.send_videos = function()
	{
		// loop this to send every video.
		 if(this.videos.length >= 1)
		 {
				for(i = 0; i < this.videos.length; i++)
				{
				
						var crewDate = {"video":this.videos[i], "token":this.token};
						
						$.ajax({
								method: "POST",
								url: "../../php/scripts/post_product_videos.php",
								dataType:"html",
								data:videoData
													
							}).done(function(html){
								
								if(html === 'complete' && i === this.videos.length)
								{
									
									this.hasVideos = true;
								
								}
								
						});
					// end loop to send videos
				}
			// End if videos not empty.
		 }
		// end send videos function
	}
	
	this.form_token = function(formSet, keySet, valSet)
	{
		// This function will add product token to the form
		// This will allow for the server side script to update at token.
		/*
		var input = document.createElement('input');
		input.type = 'hidden';
		input.name = keySet;'variable name';
		input.value = valSet;
		formSet.appendChild(input);
		*/
		return true;
	}
	
	this.add_crew = function(usernameSet)
	{
		
		this.crewUsernames.push(usernameSet);
		
	}
	
	this.add_video = function (videoSet)
	{
		
		this.videos.push(videoSet);
		
	}
	
	
	
}


Was This Post Helpful? 0
  • +
  • -

#5 andrewsw  Icon User is online

  • the case is sol-ved
  • member icon

Reputation: 6376
  • View blog
  • Posts: 25,763
  • Joined: 12-December 12

Re: JavaScript Class Issues

Posted 10 August 2015 - 02:39 PM

Quote

but the variable is set within the done.() function. Since I instantiated it in the beginning of send_product() wouldn't it have scope there, as it's function wide?

Yes, it is in scope, but done() doesn't execute straight-away. The rest of the code in the function is executed immediately. done() will be executed later, when the asynchronous ajax call has completed. Asynchronous means that it executes independently of the main code, the main process.
Was This Post Helpful? 0
  • +
  • -

#6 andrewsw  Icon User is online

  • the case is sol-ved
  • member icon

Reputation: 6376
  • View blog
  • Posts: 25,763
  • Joined: 12-December 12

Re: JavaScript Class Issues

Posted 10 August 2015 - 02:46 PM

Within done() if you use console.log(this) you will find that it doesn't refer to your object instance.

There are several ways to retain the reference to this discussed here, including:
$.ajax({
    context: this

Was This Post Helpful? 1
  • +
  • -

#7 JeremyBenson11  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 230
  • Joined: 10-January 14

Re: JavaScript Class Issues

Posted 10 August 2015 - 03:11 PM

I see what you're saying. So inside done() the keyword 'this' is not associating itself with my class members inside jProduct? Can I call them functions without the this keyword? Just write:

send_crew();

This post has been edited by Dormilich: 11 August 2015 - 12:21 AM

Was This Post Helpful? 0
  • +
  • -

#8 andrewsw  Icon User is online

  • the case is sol-ved
  • member icon

Reputation: 6376
  • View blog
  • Posts: 25,763
  • Joined: 12-December 12

Re: JavaScript Class Issues

Posted 10 August 2015 - 03:17 PM

No, you have to retain the reference to this in order to use a method of the current object.

Note that you don't have to quote the previous post, there is a Reply button further down the page, or use the Fast Reply box.
Was This Post Helpful? 0
  • +
  • -

#9 JeremyBenson11  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 230
  • Joined: 10-January 14

Re: JavaScript Class Issues

Posted 10 August 2015 - 03:27 PM

I see. The example you gave me has a lot of advanced code for what I'm trying to do here. I don't really understand how to do this... What I have to do is bind each function to something, or bind my entire object to something? I'm not sure.. Where do I start? I don't mind reading a few things, or what ever, just not sure...
Was This Post Helpful? 0
  • +
  • -

#10 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1828
  • View blog
  • Posts: 5,755
  • Joined: 15-January 14

Re: JavaScript Class Issues

Posted 10 August 2015 - 03:33 PM

The two best options are to either change the scope in which jQuery executes the ajax callback so that executes in the scope of your object, or before you send the ajax request save this in another variable that you access inside the callback.
Was This Post Helpful? 0
  • +
  • -

#11 JeremyBenson11  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 230
  • Joined: 10-January 14

Re: JavaScript Class Issues

Posted 10 August 2015 - 03:38 PM

I've tried putting this inside an object called myClass with the rest of the class members, but the function send_product() is still returning false, yet returning true if I put any kind of alert above send_product's return statement... weird... Can someone take a look and tell me if I'm doing this right... I really need some pointers towards working examples...

This is where I got this new idea from:

http://stackoverflow...pt-class-method

// When form_token is fixed of error not a function site must send whether or not crew and videos were added to php script.

function jProduct()
{
	
	this.title;
	this.genre;
	this.company;
	this.price;
	this.ulr;
	this.format;
	this.languages;
	this.systemRequirements;
	this.mediaFirst;
	this.videos = new Array();
	this.crewUsernames = new Array();
	this.token;
	
	this.hasCrew = false;
	this.hasVideos = false;
	
	this.errors = new Array();
	
	var thisClass = this;
	
	this.update_title = function()
	{
		
		this.title = $('#title').val();
		
	}
	
	this.update_genre = function()
	{
		
		this.genre = $('#genre').val();
		
	}
	
	this.update_company = function()
	{
		
		this.company = $('#company').val();
	}
	
	this.update_price = function()
	{
		
		this.price = $('#price').val();
		
	}
	
	this.update_url = function()
	{
		
		this.url = $('#url').val();
		
	}
	
	this.update_format = function()
	{
		
		this.format = $('#format').val();
		
	}
	
	this.update_languages = function()
	{
		
		
		this.languages = $('#languages').val();
		
	}
	
	this.update_system_requirements = function()
	{
		
		this.systemRequirements = $('#systemRequirements').val();
		
	}
	
	this.update_media_first = function()
	{
		
		this.mediaFirst = $('#mediaFirst').val();
		
	}
	
	this.add_crew = function(usernameSet)
	{
		
		this.crew.push(usernameSet);
		
	}
	
	this.send_product = function()
	{
		
		// this function sends the product to server side script 
		
		var validator = new jValidator;
		
		
		validator.validate_text(this.title, 1, 'title too short.');
		validator.validate_select(this.genre, '', 'select genre.');
		validator.validate_text(this.company, 1, 'enter company.');
		validator.validate_text(this.url, 2, 'enter url to store/site.');
		validator.validate_select(this.format, '', 'select format.');
	
		this.errors = validator.return_errors();
		
		var productSent = false;
					
		if(this.errors.length === 0)
		{
			
			// There were no errors, send basic product info to server side script post_product.php
		
			var productData = {"title":this.title, "genre":this.genre, "company":this.company, "url":this.url, "format":this.format, "operation":"post-js"};
            var reivedToken = "";
			
			$.ajax({
				method: "POST",
				url: "../../php/scripts/post_product.php",
				dataType:"html",
				data:productData
                    				
			}).done(function(html){
			    // The return must be outside of the .done function.
				
				if(html != '')
				{

				  productSent = true;
			      recievedToken = html;
				  
				  // append token to form, and send it with images and videos.
					
				  thisClass.token = recievedToken;
				
				  var form = document.forms['post-product-form'];
				  thisClass.token = html;
				 
				  thisClass.form_token(form, 'token', thisClass.token);
				  
				  thisClass.send_crew();
				  thisClass.send_videos();
				 
			
				}
							  
			});
			
			
		}else{
			
			// there were errors in validation
			
			return false;
		
		}
		
		return productSent;
		// end send product
		
	}
	
	this.send_crew = function()
	{
		
		// loop this to send every crew member.
		
		if(this.crewUsernames.length >= 1)
		{		
			for(i = 0; i < this.crewUsernames.length; i++)
				{
				
						var crewDate = {"crewID":this.crew[i], "token":this.token};
						
						$.ajax({
								method: "POST",
								url: "../../php/scripts/post_product_crew.php",
								dataType:"html",
								data:crewData
													
							}).done(function(html){
								
								if(html === 'complete' && i === this.crewUsernames.length)
								{
									
									this.hasCrew = true;
							
								}
								
							});
							
					// End loop to send crew
				}
			
			// End if crew not empty
		}
		
		// end send crew function	  
	}

	// this function will send videos to post_product_videos.php
	
	this.send_videos = function()
	{
		// loop this to send every video.
		 if(this.videos.length >= 1)
		 {
				for(i = 0; i < this.videos.length; i++)
				{
				
						var crewDate = {"video":this.videos[i], "token":this.token};
						
						$.ajax({
								method: "POST",
								url: "../../php/scripts/post_product_videos.php",
								dataType:"html",
								data:videoData
													
							}).done(function(html){
								
								if(html === 'complete' && i === this.videos.length)
								{
									
									this.hasVideos = true;
								
								}
								
						});
					// end loop to send videos
				}
			// End if videos not empty.
		 }
		// end send videos function
	}
	
	this.form_token = function(formSet, keySet, valSet)
	{
		// This function will add product token to the form
		// This will allow for the server side script to update at token.
		/*
		var input = document.createElement('input');
		input.type = 'hidden';
		input.name = keySet;'variable name';
		input.value = valSet;
		formSet.appendChild(input);
		*/
		return true;
	}
	
	this.add_crew = function(usernameSet)
	{
		
		this.crewUsernames.push(usernameSet);
		
	}
	
	this.add_video = function (videoSet)
	{
		
		this.videos.push(videoSet);
		
	}
	
	
	
}


Was This Post Helpful? 0
  • +
  • -

#12 andrewsw  Icon User is online

  • the case is sol-ved
  • member icon

Reputation: 6376
  • View blog
  • Posts: 25,763
  • Joined: 12-December 12

Re: JavaScript Class Issues

Posted 10 August 2015 - 03:40 PM

You use ajax three times so I would probably modify to this three times:
$.ajax({
    context: this,

BTW It is spelt received ;)

This post has been edited by andrewsw: 10 August 2015 - 03:41 PM

Was This Post Helpful? 0
  • +
  • -

#13 JeremyBenson11  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 230
  • Joined: 10-January 14

Re: JavaScript Class Issues

Posted 10 August 2015 - 03:47 PM

Lol, thanks for the spelling :P/>

Um, so you're saying I should put context: this inside the parameters of my $.ajax() call and revert back to accessing my class members via 'this'? Just wondering. Do I have to do anything else, like write some kind of binding? Not sure how to do that if I do.

This post has been edited by Dormilich: 11 August 2015 - 12:22 AM

Was This Post Helpful? 0
  • +
  • -

#14 JeremyBenson11  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 230
  • Joined: 10-January 14

Re: JavaScript Class Issues

Posted 10 August 2015 - 04:00 PM

I modified the code back, and used this for context in $.ajax, but nothing. The form doesn't send, the button doesn't do anything, and there's no firebug errors....

// When form_token is fixed of error not a function site must send whether or not crew and videos were added to php script.

function jProduct()
{
	
	this.title;
	this.genre;
	this.company;
	this.price;
	this.ulr;
	this.format;
	this.languages;
	this.systemRequirements;
	this.mediaFirst;
	this.videos = new Array();
	this.crewUsernames = new Array();
	this.token;
	
	this.hasCrew = false;
	this.hasVideos = false;
	
	this.errors = new Array();
		
	this.update_title = function()
	{
		
		this.title = $('#title').val();
		
	}
	
	this.update_genre = function()
	{
		
		this.genre = $('#genre').val();
		
	}
	
	this.update_company = function()
	{
		
		this.company = $('#company').val();
	}
	
	this.update_price = function()
	{
		
		this.price = $('#price').val();
		
	}
	
	this.update_url = function()
	{
		
		this.url = $('#url').val();
		
	}
	
	this.update_format = function()
	{
		
		this.format = $('#format').val();
		
	}
	
	this.update_languages = function()
	{
		
		
		this.languages = $('#languages').val();
		
	}
	
	this.update_system_requirements = function()
	{
		
		this.systemRequirements = $('#systemRequirements').val();
		
	}
	
	this.update_media_first = function()
	{
		
		this.mediaFirst = $('#mediaFirst').val();
		
	}
	
	this.add_crew = function(usernameSet)
	{
		
		this.crew.push(usernameSet);
		
	}
	
	this.send_product = function()
	{
		
		// this function sends the product to server side script 
		
		var validator = new jValidator;
		
		
		validator.validate_text(this.title, 1, 'title too short.');
		validator.validate_select(this.genre, '', 'select genre.');
		validator.validate_text(this.company, 1, 'enter company.');
		validator.validate_text(this.url, 2, 'enter url to store/site.');
		validator.validate_select(this.format, '', 'select format.');
	
		this.errors = validator.return_errors();
		
		var productSent = false;
					
		if(this.errors.length === 0)
		{
			
			// There were no errors, send basic product info to server side script post_product.php
		
			var productData = {"title":this.title, "genre":this.genre, "company":this.company, "url":this.url, "format":this.format, "operation":"post-js"};
			
			$.ajax({
				context:this,
				method: "POST",
				url: "../../php/scripts/post_product.php",
				dataType:"html",
				data:productData
                    				
			}).done(function(html){
			    // The return must be outside of the .done function.
				
				if(html != '')
				{

				  productSent = true;
				  
				  // append token to form, and send it with images and videos.
					
				  this.token = html;
				
				  var form = document.forms['post-product-form'];				 
				  this.form_token(form, 'token', this.token);
				  
				  this.send_crew();
				  this.send_videos();
				 
			
				}
							  
			});
			
			
		}else{
			
			// there were errors in validation
			
			return false;
		
		}
		
		return productSent;
		// end send product
		
	}
	
	this.send_crew = function()
	{
		
		// loop this to send every crew member.
		
		if(this.crewUsernames.length >= 1)
		{		
			for(i = 0; i < this.crewUsernames.length; i++)
				{
				
						var crewDate = {"crewID":this.crew[i], "token":this.token};
						
						$.ajax({
								context:this,
								method: "POST",
								url: "../../php/scripts/post_product_crew.php",
								dataType:"html",
								data:crewData
													
							}).done(function(html){
								
								if(html === 'complete' && i === this.crewUsernames.length)
								{
									
									this.hasCrew = true;
							
								}
								
							});
							
					// End loop to send crew
				}
			
			// End if crew not empty
		}
		
		// end send crew function	  
	}

	// this function will send videos to post_product_videos.php
	
	this.send_videos = function()
	{
		// loop this to send every video.
		 if(this.videos.length >= 1)
		 {
				for(i = 0; i < this.videos.length; i++)
				{
				
						var crewDate = {"video":this.videos[i], "token":this.token};
						
						$.ajax({
								context:this,
								method: "POST",
								url: "../../php/scripts/post_product_videos.php",
								dataType:"html",
								data:videoData
													
							}).done(function(html){
								
								if(html === 'complete' && i === this.videos.length)
								{
									
									this.hasVideos = true;
								
								}
								
						});
					// end loop to send videos
				}
			// End if videos not empty.
		 }
		// end send videos function
	}
	
	this.form_token = function(formSet, keySet, valSet)
	{
		// This function will add product token to the form
		// This will allow for the server side script to update at token.
		/*
		var input = document.createElement('input');
		input.type = 'hidden';
		input.name = keySet;'variable name';
		input.value = valSet;
		formSet.appendChild(input);
		*/
		return true;
	}
	
	this.add_crew = function(usernameSet)
	{
		
		this.crewUsernames.push(usernameSet);
		
	}
	
	this.add_video = function (videoSet)
	{
		
		this.videos.push(videoSet);
		
	}
	
	
	
}



Wait, the error has to be hidden somewhere else... I just echoed out this.token inside of the done() function and got 'complete' which is what is returned as html in the php script, so the context of this seems to be working... I'll have to alert some other data.... see any other issues here?
Was This Post Helpful? 0
  • +
  • -

#15 andrewsw  Icon User is online

  • the case is sol-ved
  • member icon

Reputation: 6376
  • View blog
  • Posts: 25,763
  • Joined: 12-December 12

Re: JavaScript Class Issues

Posted 10 August 2015 - 04:04 PM

If there are no errors you could use console.log('here..') or console.log(this) etc. in strategic places of your code to check if certain code blocks are entered/executed. If you know, or learn, the debugging features of your browser you will be able to set breakpoints and step through your code. There are links for a few browsers in my signature below. Also check the Network tab (or similar).
Was This Post Helpful? 0
  • +
  • -

  • (3 Pages)
  • +
  • 1
  • 2
  • 3