Codeigniter Form_Dropdown

CodeIgniter Form_Dropdown

I had a little problem using CodeIgniter’s form_dropdown the other day. Form_dropdown produces an output similar to HTML’s form select option. I was trying to retrieve data queried from a database and display the result in a form. Well, after several test and trials, I finally got the script to work. Here’s how I did it.

Form_Dropdown

The form_dropdown function typically has 3 options. The first option is the fieldname. The second option is the option data usually laid out in an array. The third is the selected data.

form_dropdown(‘name’, array(’1′=>’one’,’2′=>’two’,’3′=>’three’),1);

This produces:

<select name=’name’>
<option value=”1″ selected=”selected”>One</option>
<option value=”2″>Two</option>
<option value=”3″>Three</option>
</select>

CodeIgniter

In CodeIgniter, I have a simple script that stores bookmarks. I categorize my bookmarks using tags. When adding bookmarks, I call on the get_dropdown_tags function in Models to retrieve all the tags and display them in array that I can use with form_dropdown. Here are my CodeIgniter entries.

Controller:

$data[‘tags’] = $this->links_model->get_dropdown_tags();

Models:

function get_dropdown_tags()
{
$tags = $this->db->query(‘select distinct tag from links’);
$dropdowns = $tags->result();
foreach ($dropdowns as $dropdown)
{
$dropdownlist[$dropdown->tag] = $dropdown->tag;
}
$finaldropdown = $dropdownlist;
return $finaldropdown;
}

Views:

In views, I’m simply calling the form_dropdown function using the $tags array passed on by the controller. It’s a pretty neat way to recall data from a database and outputting them in form_dropdown.

<?=form_dropdown(‘tag’,$tags);?>

Finally, a dropdown list that works.

Reference: Clickhere

Advertisements

Media Queries..

Media Queries??? Heard?? me too not yet..lets see whats this, whats in spl and how it works? 😉

what is media queries exactly??

Media Queries is a CSS3 module allowing to adapt the rendering of webpages based on conditions such as screen resolution (e.g. smartphone vs. high definition screen)

Its very simple to implement..just add this code to separate css and link it in your html file..

code:

body:after {
content: “less than 320px”;
font-size: 300%;
font-weight: bold;
position: fixed;
bottom: 60px;
width: 100%;
text-align: center;
background-color: hsla(1,60%,40%,0.7);
color: #fff;
}
@media only screen and (min-width: 320px) {
body:after {
content: “320 to 480px”;
background-color: hsla(90,60%,40%,0.7);
}
}
@media only screen and (min-width: 480px) {
body:after {
content: “480 to 768px”;
background-color: hsla(180,60%,40%,0.7);
}
}
@media only screen and (min-width: 768px) {
body:after {
content: “768 to 1024px”;
background-color: hsla(270,60%,40%,0.7);
}
}
@media only screen and (min-width: 1024px) {
body:after {
content: “1024 and up”;
background-color: hsla(360,60%,40%,0.7);
}
}

youtube link:

Download File:

http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/a-basic-responsive-grid-plus-handy-css3-media-query-reporter/

Media Queries for standard devices: Clickhere