Home dynamic

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

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