How to write Ajax code to retrieve information on to a particular part of webpage when we select option from a dropdown box?
I want information of a particular item that I had selected from a dropdown menu on particular part of my webpage.
Let's say your markup looks something like:
<select id="dropdown">
<option value="1">Some option</option>
<option value="2">Other option</option>
<option value="3">Helpfull option</option>
<option value="4">Don't pick this option</option>
</select>
<div id="details"></div>
In order to make AJAX calls I would use some sort of library. Using for instance jQuery will be much easier than writing code that handles ajax calls across different browsers. The code could look like this:
$('#dropdown').on('change', function(e) {
var currentValue = $('#dropdown').val();
$.get('<someurl>', function(data) {
$('#details').html(data);
});
};
Replace '<someurl>' with the url to the resource you want. Doing this without using jQuery or similar library is a bit more involved. For some guidance you can look at this answer: https://stackoverflow.com/a/2557268/355499
Related
I have a working dropdown menu, and I can send its value to a function using "submit" button. It's quite clumsy however, as user always has to press the button, wait for the page to load and it refreshes the page so the user loses all other "settings" made on the page. I have understood that ajax would be the solution for this. I read the guide: http://www.web2py.com/books/default/chapter/29/11/jquery-and-ajax#The-ajax-function and tried a few methods, but it never works.
So this is my original working code. Some contents are stripped and altered, but the basics are the same. View demo.html:
<form action="change_dropdown">
<select name="tables">
<option value="first_value">first</option>
<option value="second_value">second</option>
<option value="third_value">third</option>
</select>
<br><br>
<input type="submit">
</form>
Action:
def change_dropdown():
if request.vars.tables:
session.tables = request.vars.tables
else:
session.tables = None
session.main_warning= "Incorrect parameters for function: 'change_dropdown()'."
redirect(URL('demo'))
return
Then the original action demo does something with session.tables and so on. But now about turning it to ajax. This is what I want:
<form>
<select name="tables", onchange="ajax('change_dropdown', [], '');">
<option value="first_value">first</option>
<option value="second_value">second</option>
<option value="third_value">third</option>
</select>
</form>
I also did this to the action: redirect(URL('demo'), client_side=True) as mentioned in an example. I have no idea why it's needed however.
But I don't know how to send the variable tables to the action. If I write it inside python URL helper, it crashes, because it thinks it's a python variable (where it's actually a JavaScript variable (?)). If I write it inside ajax() function's second parameter, it halts and gives me a weird error in JS console:
Uncaught Error: Syntax error, unrecognized expression: [name=[object HTMLSelectElement]]
If you need more information I can show you full codes for the methods I tried, but I think someone can take it from here.
You can send the variable as follows:
ajax("{{=URL('change_dropdown')}}",['tables'],':eval')
redirect(URL('demo'), client_side=True) is needed as you want to redirect the function that have sent the ajax request to redirect not 'change_dropdown' to redirect.
EDIT:
<form>
<select name="tables", onchange="ajax(\"{{=URL('change_dropdown')}}\",['tables'],':eval') ;">
<option value="first_value">first</option>
<option value="second_value">second</option>
<option value="third_value">third</option>
</select>
</form>
I'm building a site that hosts stories that have multiple chapters and on my view I would like the user to be able to select from a drop down menu and go to the chapter they have selected.
I have the drop down populating with information from the database, I'm just having trouble calling another controller based on that selection.
In my view this is my drop down
<select>
<?foreach($chapter as $row) :?>
<option value="<?=$row->chapter_title?>"><?=$row->chapter_title?></option>
<?endforeach;?>
</select>
I did try and add a link to the controller in the option, but that didn't work.
<select>
<?foreach($chapter as $row) :?>
<option value="<?=$row->chapter_title?>">
<?=anchor('story/viewChapter/'.$row->chapter_id, $row->chapter_title);?>
</option>
<?endforeach;?>
</select>
Is there any other way I can do this that does not involve javascript?
Unfortunately, you will have to use javascript:
If your using jquery you could try something like this:
$('#select_id').change(function(){
var chapter = $(this).val();
$(location).attr('href','http://www.mysite.com/books?chapter='+chapter);
});
Here is an example:
http://jsbin.com/efidar/1/
I do mostly PHP programming, but am stuck on an Ajax problem since I do not know Javascript or Ajax very well at all. I have a combo select menu right now and I would like to hide the third select menu (direction) if the first choice is = 'train'. I read that some browsers do not support the hide function, so the next best option is to keep the third select menu disabled when the second option is chosen assuming the first is train. If it is bus, then the third select menu should still show. Here is my javascript right now and as I'm sure you can imagine it doesn't work.
$(document).ready(function(){
if ($("select#agency").attr('value') == 'cta-train') {
$("select#direction").attr("disabled","disabled");
}
$("select#route").attr("disabled","disabled");
$("select#agency").change(function(){
$("select#route").attr("disabled","disabled");
$("select#route").html("<option>wait...</option>");
var id = $("select#agency option:selected").attr('value');
$.post("select_route.php", {id:id}, function(data){
$("select#route").removeAttr("disabled");
$("select#route").html(data);
});
});
});
$(document).ready(function(){
if ($("select#agency").attr('value') == 'cta-train') {
$("select#direction").attr("disabled","disabled");
}
else {
$("select#direction").attr("disabled","disabled");
$("select#route").change(function(){
$("select#direction").attr("disabled","disabled");
$("select#direction").html("<option>wait...</option>");
var id = $("select#route option:selected").attr('value');
$.post("select_direction.php", {id:id}, function(data){
$("select#direction").removeAttr("disabled");
$("select#direction").html(data);
});
});
}
});
Any help would be greatly appreciated!
Seems like you dont want ajax, you want to use javascript to hide a select if another select has a certain element in it. Then use your ajax to file the select as needed. Here is an example of that http://jsfiddle.net/2FQwQ/
<select id='direction'>
<option value='train'>train</option>
<option value='car'>car</option>
<option value='pogo stick'>pogo stick</option>
<select>
<select id='agency'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<select>
<select id='route'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<select>
Script
//SEts your html up to hide the secelt if train
function amITrain() {
if ($('#direction').val() === "train"){
$('#route').hide();
$('#route').attr('disabled');
}else{
$('#route').show();
$('#route').removeAttr('disabled');
}
}
$('#direction').change(amITrain);
//When you get the ajax back, you would fill the select like this, then call the function
$('#direction').html("<option value='train'>train</option><option value='car'>car</option> <option value='pogo stick'>pogo stick</option>");
amITrain();
I'm trying to implement calling colorbox items from a dropdown menu. Using this example, http://www.jacklmoore.com/colorbox/example4/, how could I simply call these links from a drop down menu? It seems to work fine in every browser except IE without any additional scripting. I'm sure it's going to be simple fix for anyone with true coding skills. Can anyone help me out?
I found something similar after a quick google search
I can't say whether or not this works, but why don't you give it a shot working this code into your jsfiddle, and I'll see if I can help you debug any issues that arise.
from: https://groups.google.com/forum/?fromgroups=#!topic/colorbox/OM85IPMoyP4
<select name="howheard" id="howheard" class="validate[required]">
<option value="http://example1.com">Example 1</option>
<option value="http://example2.com">Example 2</option>
<option value="http://example3.com">Example 3</option>
</select>
EDIT: updadate colorbox() init:
<script>
$(document).ready(function(){
$("#howheard").change(function () {
var thisHref = $(this).val();
$.colorbox({iframe:true, width:"80%", height:"80%", href: thisHref});
});
});
</script>
I`ve trouble on have a HTML document after onchange function by Nokogiri.
Of course, Mechanize lib can control that. but, sadly webpage which I want to control is jsp not HTML.
Generated HTML showes as belows :
form method = "post" name = "mysearchform"
<select id = "hall_no" name = "hall_no" onchange = "document.mysearchform.submit()">
<option value="1" selected=""> 1 </option>
<option value="2"> 2 </option>
</select>
/form
I guess I POST some data by some command, but Im newbie to Ruby and I cant find any solution about that.
Is there anybody who`ve know about that?
You can't. Nokogiri is a HTML parser and can not execute javascript. Go for something like Capybara with a driver that supports javascript.
See http://github.com/jnicklas/capybara