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