Home javascript

Select an element with multiple classes jQuery

CSS Classes, as we know are the main drivers in the UI. Since we have only one id per element, our arena or tweak on that area is almost limited.
But classes are possible to be deployed multiple times per element and we can apply independent actions per classes..
Now, when you have two classes assigned and you want to single out that element having two classes in jQuery you would do

$('.class1.class2')

Without any space in between.
Common usage would be with javascript where you would take and put classes based on actions.

Yup!

Mommy look.. Upgrading jQuery breaks live :(

If you have upgraded jQuery to 1.9 then you would have dreaded Uncaught TypeError: undefined is not a function would be barking at you on your javascript console.

The fix
According to the jQuery site, you would need to replace live with on

Say if you have: 

$('.selector-class-name').live('click', function(){console.log('
Applications programming is a race between software engineers, who strive to produce idiot-proof programs, and the universe which strives to produce bigger idiots. So far the Universe is winning.
Rick Cook
')});

Then you would have to change this to the new version using on as follows.
*The current on will be passed the event owner as a parameter so, we have to have a way to know the parent of the event owner, in this case the object with class selector-class-name.
If we don’t know the parent we can implement body tag

$('parent-of-object').on('click', '.selector-class-name', function(){
Applications programming is a race between software engineers, who strive to produce idiot-proof programs, and the universe which strives to produce bigger idiots. So far the Universe is winning.
Rick Cook
});

This shall take care of the problem.

How to dynamically construct Backbone js collection url

Constructing Dynamic URL in backboneJS Tutorial with Example

Working on Backbone js and wanted to pass the url dynamically?

Say you want to fetch the data based on the url


url: someurl/{dynamic-value}/content/{dynamic-value}

Here are some steps to accomplish constructing backboneJS url dynamically based on runtime values.

How to select element with multiple class

Solution

Lets assume your collection looks like this


var Members=Backbone.Collection.extend({
	url: function(){
		return url+'attendees/'+this.options.group;
	},
	initialize: function(models, options){
		this.options=options;
	}
});

On the above example your dynamic url might look like
http://somethingsomething.com/attendees/presenters – where presenters is something you added dynamically

and on your view


var Attendees=Backbone.View.extend({
	el: 'YOUR VIEW',
	render: function(){
		var view=this;
		var member=new Members([], {group: 'presenters'});
		member.fetch({
			success: function(members){
				var template= ...YOUR STUFF GOES HERE
		});
	},
	events: {
		'click #activities': 'membersByActivity'
	},
	membersByActivity: function(){
                YOUR LOGIC..
		return false;
	}
});

The important part for creating dynamic url in backbone js is:


var member=new Members([], {group: 'presenters'});

where you can change the presenters part as you like dynamically

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

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);

Hidden Frame Pattern / Pre-Ajax

This is one of the knows patterns in the web devs. The idea would be having two – or possibly more – frames and making one the front one for interaction while would be HIDDEN.
Why Hidden?
The visible frame would pass make a request to the hidden frame to make the server side interaction behalf of it. Doing so would make the visible frame to remain loaded. The hidden would play the rest of the game by consulting the server and grabbing all the required data. Of course, how do they talk? well, Mr. Javascript will be the ‘man in the middle’ – don’t wanna mention the security flaw known by this name 😉

Let’s see a quick example: the example will show how to interact with the server side script without page reload. For demo purpose, A page will accept first name and last name and will display the concatenated full name. Though the logic done is is too easy to accomplish, one has to bear in mind that any complex logic can be done in the same way.

First create a simple index file containing the frames 

<html>
	<head><title>Lab01</title>
		<frameset rows="100%, 0" style="border: 0px">
			<frame name="visibleframe" src="enterName.html" noresize="noresize"></frame>
			<frame name="hiddenframe" src="about:blank" noresize="noresize"></frame>
		</frameset>
	</head>
</html>

Making the frameset row 100% will assure the full visibility.
Then have the page for first and last name.
enterName.html.


<script>
	//get full name by delegating the task to the php 
	function getFullName(){
		var firstName = document.getElementById("txtFirstName").value;
		var lastName = document.getElementById("txtLastName").value;
		top.frames["hiddenframe"].location = "concateName.php?firstName="+firstName+"&lastName="+lastName;
	}
	//display it on the front page 
	function showFullName(fullName){
		showdiv = document.getElementById("fullName");
		showdiv.innerHTML = fullName;
	}
</script>
Your First Name <input type="text" id = "txtFirstName" name="txtFirstName" /> <br>
YOur Last Name<input type="text" id="txtLastName" name="txtLastName" /> <br>

<input type="submit" name="subGetFullName" value = "concate" onClick="getFullName();" /> <br>
<textArea id="fullName" name="fullName"></textArea>

This file contains two javascripts: one for sending the form values to the hidden frame and the other to accept and display the result from the hidden frame.
Since the hidden frame had no source initially, the getFullName() function would be responsible for assigning the file to it.

Now lets build the server side script which will combine and return the full name
concateName.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head><title></title>
    <script>
    window.onload = function(){
       var fullNameDiv = document.getElementById("fullName");
       top.frames["visibleframe"].showFullName(fullNameDiv.innerHTML);
    };
    </script>
    <?php
        $firstName = $_GET['firstName'];
        $lastName = $_GET['lastName'];
        $fullName = $firstName . $lastName;
    ?>
    </head>
        <body><div id="fullName"><?php echo "FULL name is " . $fullName ?>
        </div></body>
</html>

Now we are done. :)
The concateName.php would get the parameters from the enterName.html through hiddenframe. Once it access the values, it will concatenate them and will deploy the result in the “fullName” div.
The defined window.onload would wait until things are in place and it will fire the result back to the “visibleframe” through javascript.
Now – the user has no what is going on behind he scene – as she will not see the page being reloaded on refreshed.

reference: Professional Ajax 2nd edition Wrox