Skip to main content

Posts

Showing posts with the label language-javascript

Made an app to quickly get short ebay affiliate links.

This article will be more about concepts than code. I’m not sure how ebay, and indirectly Impact the affiliate network, feel about programmatic website interaction. I’m also writing this well after I had created a working version of the program, so I’m working off of what information I gather after the fact. At one point, ebay was converting their affiliate linking system to a new format. The issue I had was hundreds of old links I had to re-create. Some aspects aren’t easily automatable like going through YouTube’s video descriptions. I don’t trust 3rd party tools linking to my YouTube account and I haven’t tried to roll my own. Though, I had wanted to make the process as fast as possible. Maybe ebay had a webservice to generate new links? Not that I could find. I even tried contacting support… nope. I set out with the goal of automating as much of the link generation process as possible through their affiliate website. My tool of choice was Visual Studio, C#, and WinForms. As I start...

Using Raphael the JavaScript graphics library.

In this example, I go over a simple use of Raphael.js. It draws 4 boxes on the page and allows you to move and resize each independently. Here is the graphics library (licenses under the MIT license): https://dmitrybaranovskiy.github.io/raphael/ Here is my code on GitHub. The basic gist of it is to initialize the primary Raphael object and apply it to the page. After that you create the boxes you want to draw and associate them with a “drag” function that is called when the user interacts with each box. Here is a selection of the code below: // Define 4 boxes to draw on screen var boxListing = [ { x: '10', y: '10', width: '70', height: '70', boxname: 'Box 1' }, { x: '110', y: '10', width: '70', height: '70', boxname: 'Box 2' }, { x: '210', y: '10', width: '80', height: '80', boxname: 'Box 3' }, { x: '310', y: '10', width: '90', ...

Javascript and HTML: Async Communication Prototype

In this article I go over an asynchronous communication prototype I had made in straight Javascript that you use to POST to a server script and pass along the response to a Javascript function specified by the initial call to the prototype. The main benefit here is that you don’t need a full page refresh, which is great for implementing web interfaces that have an application feel to them. It doesn’t use any bulky libraries and should work on all browsers. An ideal use case for this would be websites hosted in an internal network that you wanted to act like an application. Though, with extensive modification you could add security features or just run it through https with proper verification code in the PHP script. The example code is located on GitHub. In my example I have four files: example.html = the html page that gives the user two buttons that fire off asynchronous calls to a server side script. AsyncManager.js = The prototype (aka. class) that handles communication and respons...

Solid Basic Javascript Input Validation

Here is a simple yet pretty powerful and easy to use way to do validation on HTML form text boxes and text areas and similar controls. It checks to make sure required form field have *something* in them before allowing processing to continue. It’s a good simple way to add some basic validation to prevent trusted individuals from forgetting to fill out required fields. This is generally useful for internal websites where you can assume the user isn’t trying to hack the site. First we have two global JS variables that define the default and error-ed state of text boxes in question. Below I have standard controls with black borders and error-ed controls with red borders. // Assign a default border color for all form controls var defaultControlBorderColor = '#000000'; // Use a special color to highlight trouble (such as if a control doesn't validate) var notificationControlBorderColor = '#ff0000'; Below I have the primary function that does the field validation. F...

JavaScript Tip: Submit Form On Enter Key

A common practice with search forms is to have them submit when the enter key is pressed, instead of requiring the user to use their mouse to press the submit button (or using tab key to tab to the submit button). Update: I attempted to find a solution for working in Firefox, but the code I added has not been tested personally. Here is a simple way to do that in JavaScript: First, define a input box: <input name="txtsearchentries" id="txtsearchentries" type="text" size="13" value="" /> Second, create a function to be placed in the head area of the webpage: // see if the user pressed the enter key  // while using a specific control  function submitSearchOnEnter(variable) {     if (window.event) {         // keyCode = window.event.keyCode;         // this doesn't seem to work in Firefox,          // so try the code below...          keyCode = event.keyCode ? event.keyCode :...

Objects in Javascript

Javascript does not use a standard class model. It uses objects that are like associative array structures of data, or so I have read. Regardless of how it works, you can make a class-ish type construct in Javascript. I’ll try to go over the basics here to help anyone who is interested. Objects are defined by creating a new function. Inside the function you can define variables and methods that are attached to the primary function. The primary function is really like the constructor for the object as well. For example: function ObjectExample(constructorParameter1, constructorParameter2) {  //define a variable and assign a constructor value to it  this.variable1 = constructorParameter1;  //you can also define variables with var, but they act differently  this.variable2 = constructorParameter2;            //assigns an instance pointer to a "constructor" variable  var variable3 = this;  //defines a funct...

Javascript Rant

I’ve been working on something recently where I decided to have most of the program run in a client’s browser. It’s basically a blog system that works with that asp-xml-to-access-db class. The clients browser sends/requests information in XML to the server script and everything turned out peachy. I’m overall extremely happy with it. Now that I’m done writing the script. I learned quite a bit more about Javascript that I didn’t know in the past. The initial few days of working with it were tragic. I’m not too fond of Javascript’s (pseudo) object model and lack of a standard class model. While Javascript works and provides a good deal of functionality, it feels dirty. Maybe my fellow “old school” programmers can understand. Besides the object model, the DOM in general is a pain to work with, and hard to find information about (that works in multiple browsers). Inconsistencies, things that logically should work don’t,...

Accessing page content from the front and back-end of a site

As I’m programming this database driven website, I’ve come into a few irritating little issues. Today I’ll talk about a few methods to access page content (images) from the back-end. I’ve created a way to create and edit page content with a browser based WYSIWYG editor. The problem is after the first time the data is submitted to the server, all images are set with a path that now only works from the root directory of the website. So when a user tries to edit some page content with images in the WYSIWYG editor they see broken images (aka. “The dreaded Red X”). I thought of a few ways to fix the problem. I’ll also mention which method I actually used in the end. 1. Have the PHP script handle the path conversions. This would mean two functions or so with a few replacements using regular expressions. So when the fetched data is sent to the user all of the html image tags are modified. When or if the user sends the data back they are remodified (excluding any new images the user is...

VB.NET is a pleasure

I started using VB.NET to write that JSON/FTP/site editor program. I found a free ready made library to work with the JSON data. It’s from Newtonsoft Really easy to use. They don’t have much documentation, but just looking through the library with IntelliSense in the VB IDE is more than enough to understand how to use it. With around 6 lines of code I can flip data between CLR objects and JSON. Very nice! I used VB.NET 2003 version about a year ago for the final group project in the last computer class I had. It didn’t seem as easy to use as the 2005 express version I am using now. It’s probably because that was my first foray into using .NET… anyways. A a quick term list: CLR = common language runtime JSON = JavaScript object notation IDE = integrated development environment FTP = file transfer protocol VB = Visual Basic programming language (.NET version) IntelliSense = One of the ways Microsoft makes coding easier in the IDE.

A few mishaps while getting the site ready

The ajax/json site is fully functional now. I had a few problems though that I’ll discuss here. First off, the simple hosting that is provided my my isp isn’t working correctly, so I had to look for an alternative host to do testing on. I found 50webs.com which provides 60mb of free bannerless hosting. They even allow you to use domain names with their free service, which is great. I got that setup and now my sister’s site (while slow) is on there and directly uses the domain name. Today I showed the site to a friend, who in turn said that it didn’t work. He was using IE7. I use Firefox usually and had not gotten around to trying the completed site on different browsers… Anyways I figured out the problem and the site now works on Firefox2/Opera9/IE6/IE7. What caused IE6 and 7 to not display the site? It seems that IE requires a new AJAX object for every request. I had it setup initially to define one AJAX object when the page loaded and reuse it. I...

No, but there is more...much more thanks to my new friend ajax.

As I mentioned in the previous post, I made a static website in html, css, javascript, and json. It works pretty good and that’s great. The problem is my sister is the one who should be adding/editing content because it is her site. So the question is, how can I make an easily update-able site that is on a server without any server-side coding functionality? I had figured out pretty much how I wanted it to work even before I finished coding the first version of the site. Sure, I could just write a client application that spits out html\css code and uploads it to the server, but no, that isn’t cool enough. I wanted to break up the site data and formatting. That way the client application would only need to create json files and upload them along with any new content. That means the json data needs to be removed from the html files and the html page now needs to allow fetching of the data whenever the person using the site needs it. What does this mean? It means that I now have a site th...

Javascript and JSON Together Forever

I created a static website recently for my sister. It is hosted on our ISP’s server, which means there is no way to do any server-side coding. The site is coding in html with a few pages using JavaScript and JSON (JavaScript object notation). Just what is JSON you ask? It is simply a way of structuring data like the more commonly known XML format, but it’s easier to use with JavaScript. Why not just code the site in straight html? Well, I wanted the website to be somewhat easily modifiable. Even if the JSON is embedded in the page, it still allows easier access to the content and also cuts down on the actual number of pages. For example, there is a page that displays a list of graphic designs she has made. The JSON text is processed when the page loads. When one of the graphic design links are clicked, a javascript function modifies the html on the page to display the new picture/title/description. An example of JSON and the eval() function: var pageInformation = '{"collection...