MarkUs Blog

MarkUs Developers Blog About Their Project

Archive for the ‘redirect’ tag

Javascript to Redirect a Drop Down List (select)

without comments

You can redirect using an html select without having to place it in a form, or have the user press a button. The user only needs to change the value.

Check out the following code that you can copy and paste into an html file and take for a test drive:


<html>

<head>
<title>Drop Down List Redirect</title>
</head>

<body>

<select onchange="top.location.href = 'http://www.google.com/search?q='
+ this.options[ this.selectedIndex ].value" >
<option value="">None</option>
<option value="cute+dogs">Cute Dogs</option>
<option value="lasers+beams">Laser Beams</option>
<option value="kitty+cat">Kitty Cat</option>
</select>

</body>
</html>

Breaking down the javascript code into more understandable chunks gives:


// 'this' points to the select object after change the item in the drop down list.
var drop_down = this;

// drop_down.selectedIndex contains the position of the item that was selected from the drop down
var selected_index = drop_down.selectedIndex;

// drop_down.options contains all of html option elements inside the html select
// we need to go to .value to get the 'value="something"' written in the HTML
var selected_value = drop_down.options[ selected_index ].value;

// changing top.location.href redirects ( unless you only append #blah )
top.location.href = 'http://www.google.com/search?q=' + selected_value

I hope you guys find this helpful!

Cheers,
Joseph

Written by jmate

March 4th, 2010 at 8:13 pm

Setting URL using Javascript

with one comment

Severin just pointed out a much easier way to update the URL using javascript:


<script language="javascript" type="text/javascript">
window.location.href = "/main/some_controller/some_action#some_anchor";
</script>

Thanks Severin!
I have extended this code into an example you can copy and paste into an html file and play around with:


<html>
<head><title>URL Updating</title></head>
<body>

<input    type="button"
name="cool"
value="cool"
onclick="window.location.href = window.location.href + '#value=param';" />

</body>
</html>

With Markus, this leaves lots of places for us to place the code. For a link_to_remote, we can place set the window.location.href in the :before or :complete variables. Example:
markus/app/views/ajax_paginate/_initial_paginate_links_alpha.html.erb


<%= link_to_remote "<< " + t('pagination.first'), :url => {
:action => action,
:id => assignment.id,
:filter => filter,
:page => 1,
:per_page => per_page,
:sort_by => sort_by,
:alpha_category => alpha_pagination_options[0],
:update_alpha_pagination_options => "false"
},
:before => "ap_thinking_start('#{table_name}');",
:complete => "ap_thinking_stop(); window.location.href = window.location.href + '#value=param';" %>

Notice that I stuck it right after the :complete =&gt; “ap_thinking_stop(); Additionally, notice that we are no longer limited to a’s. We can not apply this to any html objects.

Cheers,
Joseph

Written by jmate

February 21st, 2010 at 10:55 pm

Posted in Developer Essentials

Tagged with , ,