Hee guys. I have a form with a dropdown for all companies. Now i want to display all the people that work for that company when the user changes the value in the company dropdown box without hitting the submit button on the form. Anybody have a good example for that?
tks
No Ajax necessarily needed, since you can just submit the form, and whether you're sing Django or other server-side choices make no difference, just use something like...:
<form name=companiesForm action="whateverurl" method=POST>
<p>
<select name=companySelect size=1 onChange="companiesForm.submit();">
<option value="" SELECTED>Choose A Company
<option value="1">One Company
<option value="2">Another Company
<option value="3">A Third Company
</select>
</p>
</form>
Alex's answer is a good route to go, but here's an alternative. Django and slugs go together rather well. And unobtrusive javascript with jquery is hip at the moment.
Instead of POSTing a value, you could simply navigate to a well-constructed URL. This has the added benefit of making the pages more SEO friendly, letting people bookmark the page, and also avoiding that silly error about POST'ed information when someone clicks the back button.
Note that in either bit of code, Alex's or mine, the navigation will break if javascript is disabled on the client browser. It'd be a good idea to provide some footer links to whatever this combo box does somewhere on the page (the bottom maybe).
(untested, might need some slight tweaks)
<!-- you'll need jquery to make this work -->
<script type="text/javascript">
$(function() {
// navigate to page on click event
$('#nav_combo').bind('change', function() { goToPage(); } );
});
function goToPage() {
var baseUrl = '/your/base/url/';
window.location.href = baseUrl + $('nav_combo').val()
}
</script>
...
<form>
<select id="nav_combo">
<option value="page-1-slug">Page 1</option>
<option value="page-2-slug">Page 2</option>
</select>
</form>
Edit -- By the way, I should have mentioned you could easily use the code above plugged into django's object_detail generic view.
Related
I'm experiencing some problems when sharing links on Facebook, they are opened inside Facebook instead of the default browser. Usually, I don't mind but I discovered that some features on my pages were simply not working and I don't know why.
I have for example this that works:
<input list="brandlist" name="brandlist" oninput="loadModel()" data-label="brand">
<datalist id="brandlist" >
<option value='Acer'>Acer</option>
<option value='Alcatel'>Alcatel</option>
<option value='Apple'>Apple</option>
<option value='Asus'>Asus</option>
<option value='Black'>Black</option>
<option value='Blackshark'>Blackshark</option>
<option value='Blackview'>Blackview</option>
<option value='Cubot'>Cubot</option>
</datalist>
This code works as expected, when I start typing something in the input field the content of <datalist> is filtered and I can select one of the options.
The following code doesn't work:
<input list="modellist" name="modellist" data-label="model">
<datalist id="modellist">
<option value="model1">Model1</option>
<option value="model2">Model2</option>
<option value="model3">Model3</option>
<option value="model4">Model4</option>
</datalist>
The difference between both is that the second one loads the options from an ajax call.
The content is displayed correctly on the screen, I see the filtered list when I start typing but as soon as I select one of the options the list disappears, and the content of the option tag is not propagated to the input field.
I also see differences in behavior with alert().
From what I understand it is impossible to force Facebook to open Chrome which means that I'll have to adapt my code but in order to do this, I need to understand why it is not working in Facebook while it works fine with Chrome or any other browser.
Any idea?
additional info: submit in JS to my API doesn't seem to work either.
How do I highlight the option based on the page the user is currently on?
E.g. If on Beds page, Beds option is selected.
This is inside of a wordpress sidebar text widget so it is not coded separately on each page. I guess maybe javascript would be needed to detect what page it's on?
<form>
<select onChange="location=this.options[this.selectedIndex].value;">
<option value="#">Select a Category</option>
<option value="https://www.furnishare.it/shop/">Shop All</option>
<option value="/product-category/beds/">Beds</option>
<option value="/product-category/chairs/">Chairs</option>
<option value="/product-category/decor/">Decor</option>
<option value="/product-category/dressers/">Dressers</option>
<option value="/product-category/sofas/">Sofas</option>
<option value="/product-category/storage/">Storage</option>
<option value="/product-category/tables/">Tables</option>
</select>
</form>
Thank you!
You would want to get the url pathname:
window.location.pathname
I would suggest that you do this in a JS file rather than inline HTML. The implementation (jsfiddle wasn't saving for some reason):
http://codepen.io/anon/pen/VvEeMY
Make sure to un-comment the commented location line to get it working on your webpage:
var location = window.location.pathname;
Note that I would highly recommend not dealing with DOM events using attributes like onClick ... but to answer your question I've written the pure JS code above.
Edit: Using location.pathname requires you to use full paths starting after your domain but since your implementation was already doing so in select > option values I've taken the liberty to simplify it with location.pathname.
I am using play framework for the first time.
I want to update the web page when a value is selected from drop down with out refreshing the web page.
Consider the following example:
<select>
<option value= "Apple"> Apple </option>
<option value = "Banana"> Banana </option>
</select>
When a value is selected from drop down it should be posted to server. Then server should return some information based on the value it got. Now we should display the content corresponding to the value selected from drop down with out page refresh.
I didn't find a way to implement this using play framework. Conventionally we can do this by hiding a div initially and when a value is selected from drop down we can add content (fetched from back end) to the div and show it. I didn't understand how to implement the server side part. In play framework, controller generally returns Result type. How to return a Json value on a request in play framework ?
Can anyone please suggest other ideas ??
Thanks
A solution using jQuery (see change() and load()):
<select id="select">
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
</select>
<div id="result"></div>
<script>
$('#select').change(function() {
$('#result').load('/foo/bar?fruit=' + $(this).val());
});
</script>
EDIT: To address the JSON/server-side part of the question have a look at ScalaJsonHttp (or JavaJsonActions).
This is as clear as I know how to be with this issue. I've done what research I can on fixing it, and since it is someone else' work being modified it's hard to find what to do. I am nowhere near proficient enough to do this on my own. Sorry if it's not clear enough!
This theme is no longer supported even though it's pretty new my-horse.com.au. At the top of the page when you hover on the search icon a search area drops down and shows a search area with a few select boxes.
This is the basic on how the form is set up. #search-hover contains #search and #search contains the form. The only issue happens on the select boxes, not standard input boxes.
<div id="search-hover" style="height: 70px;">
<div id="search">
<form id="search-spots" action="http://my-horse.com.au" method="post">
<span id="finish-filter" class="responsive-only"><i class="icon-ok"></i> Finish Filtering</span>
<div class="large-4 columns" id="search-form-column-1">
<label class="sf_if_1222">Country</label>
<input type="hidden" name="has_changed_country" id="has_changed_country" value="false">
<div class="select-replace parent-1222 sf_if_1222 type-dropdown">
<select name="country" class="parent-1222 sf_if_1222 type-dropdown" onchange="jQuery('#has_changed_country').val('true'); jQuery('#search-spots').submit(); jQuery('#has_changed_country').val('false');" style="display: block; opacity: 0;">
<option value="">All</option>
<option value="587">Australia</option>
<option value="3270">New Zealand</option>
<option value="2471">United States</option>
<option value="1409">United Kingdom</option>
<option value="4103">France</option>
<option value="4291">Germany</option>
<option value="1291">Italy</option>
<option value="3322">Spain</option>
</select>
</form>
</div>
</div>
The issue only exists in IE (hahah) as far as I've seen. I've tried a few things using JS to fix the issue, but I'm not very good with it. What happens is when you click the select box and hover over anythin in the dropdown list, the whole search area slides back up.
This is some of the different scripts I've tried without any results yet.
onMouseEnter="document.getElementById('search-hover').style.height = '281px';
onMouseExit="document.getElementById('search-hover').style.height = '70px';
onMouseOver="document.getElementById('search-hover').style.height = '281px';
onMouseOut="document.getElementById('search-hover').style.height = '70px';
onFocus="document.getElementById('search-hover').style.height = '281px';
$("#search select").mouseenter(function () {
$('#search-hover').css({"height","281px"});
});
$("#search select").mouseleave(function () {
$('#search-hover').css({"height", "70px"});
});
and this is the jQuery that I think controls the search area
http://pastebin.com/m3J9DLNH
Can anyone help me with where I might be going wrong or point me in the right direction?
My idea is something like this -
onFocus = get.elementId('search select') then something that tells the CSS for #search-hover to set the height to 281px
something that will run through the whole site easy enough. From what I've read on different forums, IE leaves the 'div' area when it enters the drop down area in a form . I'm not really sure why but it is apparently something that happens a lot. I'm basing what I've found on this
IE select issue with hover
which I tried to figure out how to implement in to my form, but don't know how since I'm not any good with JS.
Thank you for any help you can give!
I believe there is already some code in the plugin to try and correct this issue.
Unfortunately, the code tries to detect IE and fails as the detection method is no more working with recent versions of IE.
Try and update the code navigator.userAgent.toLowerCase().indexOf("msie") != -1 in searchShowOnHover with navigator.userAgent.toLowerCase().indexOf("trident/") != -1.
<form method="get" action="http://example.com/" name="currencies">
<div>
Currencies:
<select onchange="this.form.submit();" class="select" name="currency">
<option value="USD" selected="selected">US Dollar</option>
<option value="EUR">Euro</option>
<option value="GBP">GB Pound</option>
<option value="CAD">Canadian Dollar</option>
<option value="AUD">Australian Dollar</option>
</select>
<input type="hidden" value="index" name="main_page"/>
</div>
</form>
when i select the GB Pound, all the function is ok except that the default selected is still US Dollar.when i delete the selected="selected" in <option value="USD"... when i change to Australian Dollar. the item shows on the select drop list is still US Dollar. why?
The "default" selection applies when the page first loads, and will be either the option with the "selected" attribute, or the first option when none were specified as "selected".
The View Source facility shows what the browser originally received from the webserver, not the current state of everything on the page after the user (or JavaScript) has changed things.
If you use JavaScript to get values of fields (e.g., in response to some user action) the current values will be reported.
When you submit the form, the current values of your form fields will be sent to the web server and can be accessed by your server-side code.
If the result of submitting the form is to redisplay the same page and you want the previously selected option to still be selected then you should use server-side code to apply the "selected" attribute to the appropriate option. What server-side technology are you using? PHP? (Or JSP, .NET, ...?)
When you choose "Australian Dollar" the action url will have "currency=AUD" but the HTML code itself does not change. The selected="selected" still stays with the US Dollar.
You could use some simple jQuery to move the selected attribute if you like in the DOM, but if you refresh the page, you will still have the same, original HTML you started with.