I've got this odd problem with jQuery. I'm trying to let the change of an html select, trigger a post to a .php that returns new replacement html data for another select element.
I succeed in replacing the select html with just the post part, but when I add the .change part it stops working.
Here's my test page html(it's a .php page)
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title></title>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="ajax.js"></script>
<select id=control6>
<option selected="selected" value="normal">normal</option>
<option value="change">change</option>
</select>
<select id=sortedselect6>
<option selected="selected" value="alphabetic">alphabetic</option>
<option value="grammatic">grammatic</option>
<option value="assessment">assessment</option>
<option value="maximatch">maximatch</option>
</select>
<select id=dummyselect6>
<option selected="selected" value="dummy1">dummy1</option>
<option value="dummy2">dummy2</option>
</select>
</body>
</html>
the ajax.js
jQuery("select#control6").change(function() {
jQuery.post('verwerker.php', {
currentselect: jQuery("select#control6").val()
}, function(htmldata) {
jQuery("select#sortedselect6").html(htmldata);
});
});
verwerker.php
<?php
echo '<option value="alphabetic">alphabetic</option>
<option selected="selected" value="grammatic">grammatic</option>
<option value="assessment">assessment</option>
<option value="maximatch">maximatch</option>';
?>
Now if I only put the following in ajax.js then it changes the sortedselect6 to grammatic as selected instantly. So it must be something with the .change part that messes up?
jQuery.post('verwerker.php', {
currentselect: jQuery("select#control6").val()
}, function(htmldata) {
jQuery("select#sortedselect6").html(htmldata);
});
You can view the last piece of code (the one without the .change) at work here http://www.tarile.net63.net/thebirdistheword.php
P.S.: the {currentselect:jQuery("select#control6").val()} is for later, it has no purpose right now
Solved! The problem was that my jQuery couldn't load some of the elements because the page wasn't yet fully loaded. Damn I feel really dumb to have made that mistake, really dumb. xD here's the fixed code:
jQuery(document).ready(function(){
jQuery("#sortedselect6").change(function() {
jQuery.post('verwerker.php',{selection:jQuery("select#control6").val()}, function(newSelectdata) {
jQuery("select#sortedselect6").html(newSelectdata);
});
});
});
Your basic change and ajax code works fine in this jsfiddle. Note that data is slightly different simply due to fiddle requires you to send the actual html in order to test ajax
http://jsfiddle.net/up6fG/
Make sure you are wrapping your code in ready event so that the elements exist when code fires
$(function(){
/* your code here*/
})
Related
I am trying to create the front end for an web application. I already have the backend developed in python. I am new to this territory of web design/development
I have some html and javascript code which uses jQuery multiselect.css and jQuery multiselect.js to create a dropdown multiselect checklist. However I am confused with how i can change the style or position of the dropdown, as I am already using jQuery multiselect.css
I added the css and the js under the head tag
<link href="jquery.multiselect.css" rel="stylesheet">
<script src="jQuery.js"></script>
<script src="jQuery-MultiSelect-master/jquery.multiselect.js"></script>
And then I am creating the dropdown list in html and using jQuery to initialize it
<select id='testSelect1' multiple>
<option value='1'>Item 1</option>
<option value='2'>Item 2</option>
<option value='3'>Item 3</option>
<option value='4'>Item 4</option>
<option value='5'>Item 5</option>
</select>
<script src="./test.js"></script>
<script>
$('#testSelect1').multiselect({
columns: 4,
placeholder: 'Select Countries',
selectAll: true
});
</script>
This puts the multiselect on the left and makes the dropdown width as wide as the page width and height longer then needed. I am trying to modify it so that it would appear in the middle and the size of the dropdown isn't as bit and colour of the dropdown array is different
When you are adding styles and scripts to project it should look like this
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<!-- style goes here -->
</head>
<body>
<!-- scripts go here -->
</body>
</html>
Style always go on top of document, between <title></title> tags. It is recommended to put scripts just before <body> tag closes. Here you can read why
There is that..
If you want to style that dropdown firstly we need to see how does it look like right because we can't help you blindly. But you could do this
select {
<!-- style for select goes here -->
}
select option {
<!-- style for option goes here -->
if you want your select to be 300px wide you can add this
select {
width: 300px;
}
Again. Post some screenshots and update the question with it if this didn't help
This question already has answers here:
What does a script-Tag with src AND content mean?
(4 answers)
Closed 5 years ago.
I have no idea why this function keeps saying it is undefined. I'm trying to call it onchange on a tag and i'm trying to check if the value being called into the function is the value of the selected option. This is an extremely simple html page so I have no idea why this error would pop up? Can anybody tell me what's wrong with this code?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Dog Decider</title>
<script src="data.js">
function buildSelect(dom){
console.log(dom);
}
</script>
</head>
<body>
<h1>Welcome to Dog Decider!</h1>
<p>Are you looking for a small or large dog?</p>
<select name="first" onchange="buildSelect(this);">
<option value="none">-- Select Dog Size --</option>
<option value="Small">Small</option>
<option value="Large">Large</option>
</select>
</body>
</html>
Originally the function was bigger and actually implemented data.js, but I tore it all down to try and discover the root of this problem...
Just remove the src="data.js" from your script tag and it should work. HTML will only evaluate the contents of script tags with the attribute type set to text/javascript or none and no src attribute.
Edit: To load data.js in your page add another empty script with src="data.js" before the script in your page.
<script src="data.js"></script>
<script type="text/javascript">
function buildSelect() {
// ...
}
</script>
I'm instantiating the Chosen plugin within a Bootstrap Modal. I'm calling the Chosen plugin after I've launched the modal.
All works as expected apart from being able to auto focus the element to allow typing without first clicking into the element. Strangely I'm getting a blue border around the element which would indicate it has focus but no keypress actually registers until I click into the object.
I only need this to work for Chrome, I'm currently running version 39.0.2171.95.
I'm following instructions from the docs:
http://harvesthq.github.io/chosen/options.html#triggerable-events
Here's the code:
var $modal = $('#' + modalId); // This element contains relevant modal markup along with <select> element
$modal.modal();
var $mySelect = $('#mySelectElement'); // id of the <select> element
$mySelect.chosen();
$mySelect.trigger('chosen:activate'); // This doesn't work...
Have also tried the following but to no avail:
$mySelect.trigger('chosen:open'); // This doesn't work...
Any pointers appreciated.
Cheers,
Lee
I found an answer, or a workaround at least.
When stepping through the code I noticed that the trigger('chosen:activate') method is called before the $modal.modal() has completed i.e. the modal has not yet displayed.
I simply added an asynchronous delay before calling chosen:activate which appears to fix it and the Chosen element can be typed into immediately:
// Enable chosen plugin...
var $mySelect= $('#mySelect');
$mySelect.chosen();
var enableChosen = setTimeout(function() {
$mySelect.trigger('chosen:activate');
}, 250);
Anything lower than 250ms and it stops working again. I guess it's something to do with having to wait for the modal fade animation to complete.
** UPDATE **
Alternative and better method, hook into the shown.bs.modal callback for the Bootstrap modal, like so:
$modal.on('shown.bs.modal', function(e) {
// Enable chosen plugin...
var $mySelect = $('#mySelect');
$mySelect.chosen();
$mySelect.trigger('chosen:activate');
});
Your code must work. Here is a simple example base on official documentation. I don't know if your are doing something more in your code that is doing your code don't work.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes</title>
<link rel="stylesheet" href="docsupport/style.css">
<link rel="stylesheet" href="docsupport/prism.css">
<link rel="stylesheet" href="chosen.css">
<style type="text/css" media="all">
/* fix rtl for demo */
.chosen-rtl .chosen-drop { left: -9000px; }
</style>
</head>
<body>
<form>
<div id="container">
<div id="content">
<header>
<h1>Chosen <small>(<span id="latest-version">v1.3.0</span>)</small></h1>
</header>
<em>Into This</em>
<select data-placeholder="Choose a Country..." class="chosen-select" style="width:350px;" tabindex="2">
<option value=""></option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Aland Islands">Aland Islands</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
</select>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="chosen.jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var $mySelect = $('.chosen-select');
$mySelect.chosen();
$mySelect.trigger('chosen:open');
</script>
</body>
</html>
I can't get it to do anything. The drop down just behaves normally. I've followed their instructions and created the simplest demo I could and still nothing works. I've checked my paths and put everything in the same directory to make sure everything is being found. I have jQuery being loaded first.
Here's the html file:
<!doctype html>
<html>
<head>
<title>Searchable</title>
<script src="jquery-1.9.1.js"></script>
<script src="jquery.searchabledropdown-1.0.8.src.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("select").searchable();
});
</script>
</head>
<body>
<select id="myselect">
<option value="0">Aardvark</option>
<option value="1">Beta</option>
<option value="2">Charlie</option>
<option value="3">Louis Chan</option>
<option value="4">Zoomba</option>
<option value="5">Lima</option>
</select>
</body>
</html>
Here's a link to the plugin. Demo is on the plugin page: http://jsearchdropdown.sourceforge.net/
this works for me:
<!doctype html>
<html>
<head>
<title>Searchable</title>
<script type="text/javascript" src="http://jsearchdropdown.sourceforge.net/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://jsearchdropdown.sourceforge.net//jquery.searchabledropdown.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("select").searchable();
});
</script>
</head>
<body>
<select id="myselect">
<option value="0">Aardvark</option>
<option value="1">Beta</option>
<option value="2">Charlie</option>
<option value="3">Louis Chan</option>
<option value="4">Zoomba</option>
<option value="5">Lima</option>
</select>
</body>
</html>
It seems like the $.browser has been removed from jquery 1.9 core and above see the reference here you can decide to fix the problem by changing the library, use an older jquery version or use another alternative here you can find some better examples.
Good luck!
I downloaded the code and tested it. The problem is jQuery 1.9.1, when I put that version it does not work, but when I put back jQuery 1.8.3 it works.
I don't think there is a way to solve it unless you dig in the library, so it's better to use 1.8.3 as in the demo.
For the above Example: Once you searched the key like 'Zoo..' then you can select 'Zoomba'. Again If want to change the selection, in that list you can able to see only 'Zoomba' not all values.
If you want to show all values in that list you have to clear that searched key once selected index changed. Like this,
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Searchable</title>
<script type="text/javascript" src="http://jsearchdropdown.sourceforge.net/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://jsearchdropdown.sourceforge.net//jquery.searchabledropdown.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myselect').searchable();
$('#myselect').change(function() {
$(this).autocomplete('search', '');
});
});
</script>
</head>
<body>
<select id="myselect">
<option value="0">Aardvark</option>
<option value="1">Beta</option>
<option value="2">Charlie</option>
<option value="3">Louis Chan</option>
<option value="4">Zoomba</option>
<option value="5">Lima</option>
</select>
</body>
</html>
You written code is fine, It is a browser and Jquery version related issue.
Runs on IE 7.x, IE 8.x, Firefox 3.5.x, Safari 4.x, Opera 10.x, Chrome 3.x
It uses version Jquery 1.7.2 and Jquery UI 1.8.18
Also use plugin http://effinroot.eiremedia.netdna-cdn.com/repo/plugins/forms-controls/searchabledropdown/jquery.searchabledropdown.js
You can check the running version on JSFiddle
http://jsfiddle.net/JWyRZ/
You always can use jquery-browser-plugin plugin from https://github.com/gabceb/jquery-browser-plugin. It adds the functionality missed by upgrade to 1.9. Just make sure you load jquery first and jquery-browser plugin afterwards.
I'm trying to do something when a user selects an option from a select box - As simple as can be right? I'm using JQuery 1.3.1 to register a click handler with the id of the select box. Everything was fine until I tested using Chrome and Safari and found it didn't work.
Firefox 3.05 - YES
I.E 7.0.5730.13 - YES
IE6Eolas - YES
Sarafi 3.2.1 - NO
Chrome 1.0.154.43 - NO
See below code:
<html>
<head>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script language="javascript">
$(document).ready(function(){
$('#myoption').click(function() { alert('Select Dropdown was clicked: '+ $('#myoption').val()); });
});
</script>
</head>
<body>
<select id="myoption">
<option value="A">A</option>
<option value="B">B</option>
</select>
</body>
</html>
Anyone know what I should be doing for this to work? The alert does eventually get triggered but only after double-clicking the select box?
I found my problem. For Select boxes, you need to register a handler for a "change" event rather than a "click" event. It's strange that Firefox and IE work with the click event.
To sum up, the following code works across all browsers:
<html>
<head>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script language="javascript">
$(document).ready(function(){
$('#myoption').change(function() { alert('Select Dropdown was clicked: '+ $('#myoption').val()); });
});
</script>
</head>
<body>
<select id="myoption">
<option value="A">A</option>
<option value="B">B</option>
</select>
</body>
</html>
Safari and Chrome are both webkit based browsers. Webkit uses the native dropdown elements from your OS instead of implementing dropdowns itself, and unfortunately native dropdowns do not support a click events. For the same reason they also do not support CSS for option elements or other neat tricks.
The only cross-browser way to get those working is to implement this by hand using an <ul> and a lot of javascript.