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

Using JSF form fields with jQuery – Can’t use jQuery with : (colon) problem

if you have a jsf page of the following

<h:body>
<h:form id="frmRegistration">
<h:panelGrid columns="2" rules="rows">
<h:outputLabel id="lblFirstName" value="First Name"  />
<h:inputText id="txtFirstName" value="#{memberRegisterBean.member.name}" label="First Name" required="true"/>
.
.
.

And say you want assign default value from javascript to the text box you would use:

    $("#frmRegistration:txtFirstName").val("this val");

Since that is how JSF would generate the id of the component
But, you wont see any effect as jQuery don’ like the generated colon (:).
use this instead> ‘escape it’

    $("#frmRegistration\:txtFirstName").val("this val");

Adding Anchor to a text on the fly using jQuery

I come across the requirement where I need to create an anchor to a list based on some condition – hence I can go that specific anchor right away.

Though this can fairly and easily performed from the server side while the list is being prepared – without a bandwidth problem, I have found javascript method more fancy and easy. But, for the poor browser whose javascript is disabled, you might want to consider an alternative of server side.

Lets assume this simple scenario. You have list of completed and pending code statues. and Assume this list is longer and the completed list can appear in any place on the list but it is assured that all the completed lists would be all together.

So, all you want to do is to create an anchor to the very first of the completed list on the fly. Here is the snippet for that:

<!--
   __ __ _______
  | |/ /|    | |
  |   / | / | |
  | | | -- | |___
  |_| __||_|____| 

    Kaleb Woldearegay<contactkaleb@gmail.com>
 -->
<html>
<head><title>Simple </head>
<body>
<div id="completed"></div>
<table>
<tr>
    <td>1</td><td>code for module one</td>
</tr>
<tr>
    <td>2</td><td>code for module two</td>
</tr>
<tr class='completed'>
    <td>3</td><td>code for module 3</td>
</tr>
<tr class='completed'>
    <td>4</td><td>code for module 4</td>
</tr>
<tr class='completed'>
    <td>5</td><td>code for module 5</td>
</tr>
</table>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
        $(document).ready(function(){
                //perform only if there is atleast one completed row
                if ($("table tr.complete").length > 0){
            $("#completed").html("<a href='#anchored'>Go to Anchored</a>"); 
                        var completed = $("tr.complete:first").find("td:nth-child(2)");    //choose the second td
                        completed.html("<a name='anchored'>" + completed.html() + "</a>");//create the anchor
                        $("table tr.complete").css('background', 'green'); //colorize
        }  
                $("table tr.pending").css('background', '#cccFFF');
        });

</script>
</body>
</html>

Adding default option on the fly to select with jQuery, removing and some more…

How can I add or remove option dynamically on the select element using jQuery

Using the following snippet, you can do the following and related tasks of adding default options or working with elements that are created dynamically at the client side

  • How to add default option to select
  • How to manipulate elements that are created on the fly

Selecting element with multiple classes with jQuery

<html>
	<head><title>Adding default selection list</title>
	</head>	
	<body>
		<select name = "items" id="items">
			<option value="item1">Item One</option>
			<option value="item2">Item Two</option>
			<option value="item3">Item Three</option>
		</select>
		<input type = "button" name="checkme" id = "checkme" value='check me' />
		<p class='static'>Existing Paragraph</p>
		<div class='newly'></div>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
		<script>
			$('#items').prepend('<option value= '' selected='selected'>Select Item Please</option>');
			$('#checkme').click(function(){
				if ($('#items').val() != ""){
					$('<p>Yup you have selected ' + $('#items').val()+'<a href=''>delete</a></p>').appendTo('.newly');
				}else{
					alert('Plase select proper item');				
				}
			});
			$('p a').live('click',(function(){

				var remove = confirm("You sure to delete?");
				if (remove){
						$(this).parent().remove();
				}
  			return false;
			}));

		</script>
	</body>
</html>

The prepend function on the selected element would put the given element on top of the list – there is also an append version of it

It would be difficult to access the elements that are created on the fly/dynamically with jQuery without the use of live() – it binds the given click event to newly created elements.

Why binding/unbinding not working on firefox?

Finally, when we delete, we want to delete the the paragraph as the whole that contains the anchor. Most of the time we want to do it with in the div tag.

In this case the anchor (a) is a child of the paragraph (p) – that is where the .parent().remove() would come to play.

Populate selectbox from JSON with jQuery

Do you know how to add anchor dynamically to text?

CSS rendered different for local and remote servers

I was banging against the wall for this weirdest scenario.

When I run my site locally using the localhost, http://localhost/site.., all is good and the desired width and everything is OK.

When I publish my site on my server, all the CSS were jacked as if I have never tried it on my local machine before I publish it.

The browser is the same, the css and everything is the same but the rendering is different from local machine.

Trying to figure out, when I access my local site from my other computer, it is still jacked .. I said “HA!”.

Then I changed the localhost with my computer name and yup it is all messed up.
Tried to find out why apache is acting nice for local and strange for the other ones. But at least I can work on my local machine and publish it now.

Also, check if you have any reference of the css and javascript files with localhost.