Home jQuery/JavaScript/CSS

node js server downloads text/html as file on browser

Those of you who work with webserver, like apache, might already have seen that problem – like the php file that was intended to display content would be downloaded as file.. this has some fix on configuration right..
Now coming to node js, once you install the server like 

  1 var http_server=require("http");
  2 http_server.createServer(function(request, response){
  3     response.writeHead(200, {'Content-Type': "text/html"});
  4     response.write("I am listening @port 8896");
  5     response.end();
  6 }).listen(8896);

This should run fine once you run node filename.js where filename.js is the file containing the above code.
but, when you try to run by going to localhost:8896 and in place of seeing the text on your browser, if the browser decided to download the file, give a a careful look at line number 3 to be sure that you have specified correct content type..

Browser automatically sorting json object based on key problem..

Json data got sorted on browser by its key

This a problem where the browser decides to sort the json you provided its own way rather than the one you sorted.

And it happens especially if you have key value pair in json payload you are passing.

So the scenario would be, there JSON data you are sending from the backend is sorted and you displayed it on front end with some javascript, but the result you are showing is not sorted with the original sorting order you set.

Solution

I observed that some browsers, at least Chrome, is doing the sorting in the situation that is discussed above.

For the fix: make the key of the json values you are passing string format rather than number

like

in place of using:
{1:"one", 4:"four"}

use

{"1":"one", "4":"four"}

Convert list tag li to horizontal links using CSS

Anybody involved on the front part of the web would be using it since s/he is 3 or something..
but if your programming time logs heavily show you are working much on the backend stuff.. this might help a bit..

here is the given list
<pre>
<ul>
<li>link1</li>
<li>link2</li>
</li>http://gullele.wordpress.com</li>
</ul>
</pre>

do the following css and it would take of making it horizontal

<pre>

ul{

margin:0;

padding:0;

}

li{

display: inline;

padding: 0 0 0 0 – give appropriate values here based on your chice

}

</pre>

This shall produce a li tag being on the horizontal..

 

handling array inputs in zend. Passing inputs that are generated from javascript to zend controller

Hello There,
Was working on a project that is on zend framework. The task involves having having javascript generated input boxes and passing those to the controller.
I have done that before using some other mechanism but they were not somehow natural ways to do it.
It can be done in a much easier way -NATURALLY- though :)
lets assume your form has javascript powered email address adding inputboxes. There would be some link you would hit as add emails and it will create input boxes for you..

1. have the input box in your zend form as 

		$this->addElement('text', 'emails', array(
			'label'        => 'Emails',
			'isArray'      => TRUE,
			'name'         => 'emails[]'
		));

Or however you are creating the inputbox – or anyother input
2. Then in the javascript where you are creating the input, use the same name as the element’s name

	    var new_email = document.createElement('input');
	    new_email.name = 'emails[]';
	    new_email.type = 'text';
	    new_email.setAttribute('size', 30);

3. yes, you are done!. When the form is submitted, the element with name emails[] would be passed along with the other form elements.
In your controller you would have an array of emails[] and the rest is …

Happy zenjsing

jQuery bind/unbind not working on firefox or in some other browsers

So, your jQuery bind is working OK on all browsers and not in firefox?

At least in my case, it worked on chrome and not on FF.

Let me put it using example:

let’s say we want to assign click event to some item with id = ‘bindable’


$('#bindable').bind('click', function(){
      alert ('From the truth and search of truth, I would prefer the later..');
});

this snippet works fine in chrome and others. but in firefox it is NOT.

The culprit is in passing the ‘event’


$('#bindable').bind('click', function(event){//look mom, i pass the event here..
      alert ('From the truth and search of truth, I would prefer the later..');
});

See mode javascript stuffs

Date Picker in jQuery misses next and prev arrow. How to add arrow on jQuery date picker

jQuery date picker missing navigation arrow

Did you add the date picket and it is missing the arrow for next month/year navigation?

I have been there – yea, jQuery missing the arrow for year and month navigation.

If you add the date picker on your project and for some reason you are not seeing the arrow for navigation, do the following:

  1. Go to the site jqueyrUI and download the file.
  2. Then in the css folder you will see the theme
  3. inside the theme, there is an images folder.
  4. Copy the whole folder and put it in you project in the same folder where the jQuery ui css resides and that will take care the problem.

The above is the solution for missing the arrow image in jQuery navigation.

Recommended for You:

You want to learn nodeJs and Angular in minutes? See this step by step guide

Selecting an element with multiple classes? Check this out

Did you upgrade and production is broken? Here is the fix

undefined variable error javascript with php

you want to do something simple like passing variable like this

<?php 
 $variable_name = "some value";
var some_var = <?=$variable_name" ?>;

but it didn’t work
Here is the solved version…
Very simple than you thought

<pre>
 $variable_name = "some value";
var some_var = "<?=$variable_name" ?>";
</pre>

yup, just quote it from left and right so that it wont be considered as string not JS variable. If the value in variable is number, there would not be any problem

Dynamically populate select box from JSON in javascript/jQuery

Populating select box with JSON tutorial example

JSON [JavaScriptObjectNotation] has become the defacto standard for web-consumers these days.

I also interact with it in a frequent manner.

The major usage might be when you are interacting with API based websites. Even though there are multiple response types, json is one of the most widely endorsed these days.

Based on the response you can apply it to different parts of the web app.

When would I be using json for select boxes?

Lets say you are calling an API to give you the list of available cars and the API would return the result in json format.

Then you can use that response as a selection in select box or you can also list it as options to be checked in the form of checkboxes and the like.

Node tutorial with http web server

Here is example of using json response used in select box

I will try to give some simple example on using JSON with old school javascript and jquery.
Lets have the following JSON for our example:


var cars=[{"color":"red","made":"toyota","model":"corrola","mileage":"10000"},{"color":"silver","made":"honda","model":"accord","mileage":"160000"},{"color":"white","made":"nissan","model":"maxima","mileage":"12200"}];

Just ordinary simple data to play with.

Using Old School Javascript:

Assuming there is select box with id “dynamic_slct”


var options = '';
slctbox = document.getElementById('dynamic_slct');
for(var i=0 ; i<cars.length ; i++)
{
    var label = cars[i]['made'];
    var model = cars[i]['model']; //or whatever the value you want to show
    var opt = document.createElement('option');
    slctbox.options.add(new Option(label, model));
}

As simple as that, the ‘cars’ should be available on the page being accessible to the javascript that is populating the options. If you are working on PHP, for example, spitting the json_encode(array) would provide what is needed for this

Uisng jQuery


var opt="";
$.each(cars, function(){
   var label = this['made'];
   var model = this['model'];
   opt += ""+model+"";
});
$('#dynamic_slct').html(opt);