I have two dropdown boxes, actually I have done this functionality by using jquery and ajax by calling an id that if I select one thing it will appear on second select box but the main problem I am facing is that I am using a template where a select box uses some class name called "cho" as if I don't use this class obviously my select box look wired so I like the style of it .So if I use this class in my second select box where the result display then the functionality wont work but if I don't use the class then it will work so what I want is:
I want to use the css class and implement the functionality too I checked in every css file but I cant find cho class so what I think that if I cant change the css file may be there is the way in jquery that I'll resolve this issue.
This is my first select box ,where select box and css working fine.
<?php echo form_dropdown('cat_id', $records2, '#', 'id="category" class = "cho"');?>
2nd select box -without css ..functionality successfull
<?php echo form_dropdown('item_id', $records3, '#', 'id="items"'); ?>
With css--functionality wont work but css do:
<?php echo form_dropdown('item_id', $records3, '#', 'id="items" class = "cho"'); ?>
My javascript:
<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
$('#category').change(function(){
$("#items > option").remove();
var category_id = $('#category').val();
$.ajax({
type: "POST",
url: "stockInController/get_Items/"+category_id,
success: function(items)
{
$.each(items,function(item_id,item_name)
{
var opt = $('<option />');
opt.val(item_id);
opt.text(item_name);
$('#items').append(opt);
});
}
});
});
});
</script>
html file source of two dropdown
<div class="controls">
<select name="cat_id" id="category" class = "cho">
<option value="1">jeans</option>
<option value="2">shirts</option>
</select>
<br />
</div>
</div>
Items:
sdf
bello
gamer
dsf
blue
Have you tried firebug or any other similar tool to find out your 'cho' class. Try this code also
$("#items").addClass("cho");
OK try selecting through name:
<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
$('#category').change(function(){
$('select[id="items_chzn"] > option').remove();
var category_id = $('#category').val();
$.ajax({
type: "POST",
url: "stockInController/get_Items/"+category_id,
success: function(items)
{
$.each(items,function(item_id,item_name)
{
var opt = $('<option />');
opt.val(item_id);
opt.text(item_name);
$('select[id="items_chzn"]').append(opt);
});
}
});
});
});
</script>
If you are still having an issue try using an alert in the function after the ajax call.
Related
First of all, I am using Bootstrap Dual Listbox that I got from http://www.virtuosoft.eu/code/bootstrap-duallistbox/
After trying to implement it, I encounter a single problem. At first run, the options are not being displayed on either select box unless I click the Move All button.
So here is the structure as well as the codes.
Index.php
<!-- HTML -->
<select multiple="multiple" size="5" class="eItems" name="skillsTagged" id="skillsTagged">
</select>
<!-- Scripts-->
<script>
$(document).ready(function(){
var dlb1 = $('#skillsTagged').bootstrapDualListbox({
nonSelectedListLabel: 'Non-selected',
selectedListLabel: 'Selected',
preserveSelectionOnMove: 'moved',
moveOnSelect: false
});
getSkills();
});
function getSkills(){
var oldid = "1";
$.ajax({
type: "POST",
url: "get_selected_skills.php",
data: { specId : oldid }
}).done(function( res ) {
$("#skillsTagged").html(res);
});
}
</script>
get_selected_skills.php
<?php
echo "<option value='1'>1</option><option selected value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option selected value='5'>5</option>";
?>
So it seems like the options are there but are not being displayed on first run. Tried it on a regular listbox and is working so if anyone already encountered this when using Dual Listbox, your help will be greatly appreciated! Thanks!
Try to set ajax async property to false...
İn method : async:false
Or globally:
$.ajaxSetup({
async:false
});
I want to set selected value of a select input to a php variable. When I select a value from select box, then want to put that value in php variable and use echo select option value, but I can't get this value in select box inside php code. My Code is given below.
<body>
<select>
<?php
$test='<label id="output"></label>';
echo "<option>".$test."</option>";
?>
</select>
<select id="sel">
<option>--select--</option>
<option>amr</option>
<option>tomar</option>
</select>
</body>
<script type="text/javascript">
$(document).ready(function(){
$( "#sel" ).change(function() {
var ww = $( "#sel" ).val();
//alert(ww);
$( "#output" ).text(ww);
});
});
</script>
Use AJAX
$.ajax({
type: "POST",
url: "some.php",
data: { ww: ww}
})
.done(function( msg ) {
alert( "Data Saved: " + msg );
});
And in some.php using POST you can set $ww = $_POST['ww'];
Reference
http://api.jquery.com/jquery.ajax/
PHP is a server-side-language, so the php-code is executed before anything is showed on the screen.
That also means that when the page is loaded you can no longer interact with the php code.
For what it sounds like you're trying to do (a little hard to understand), it sounds like you need to use javascript to change the content on the page at runtime :)
You're select box hasn't got an id of sel, which is what the JS is listening for the change event on, I also can't see the div with the id output, which is where the results are going.<select id="sel"> And <div id="output"></div>
I have a div
<div id="pop2" class="pop-up1" style="display:none;">
<div class="popBox1">
<div class="popScroll1">
<h2></h2>
<p id="p1_id"></p>
</div>
<span>Close</span></span>
</div>
Back to links
</div>
I have an external file edit_invoice_details.php in which I want to post some data which I am doing through this jquery function
<script>
$(document).ready(function(){
$('table tbody tr').dblclick(function(){
//alert($("#myId2").text());
//showeditDiv($( "#myId2" ).text());
var invid=$("#myId2").text();
var pid=$("myId").text();
var dataString = 'inv_id='+ invid+'prod_id='+pid;
$.ajax({
type: "POST",
url: "edit_invoice_details.php",
data: dataString,
cache: false,
success: function(html)
{
alert("success");
$("#pop2").show();
$("#p1_id").html(html).show();
}
});
});
});
</script>
I want such a table such that when someone double clicks on it the div should open. Success alert is working fine. but I am not able to show that div. The divs content should be edit_invoice_details.php. Response text maybe
Any help is appreciated
Try this:
$("#pop2").style.display = "block";
if it dont work then there might be other problems. Let me know.
sometimes if you hardcode the property display in the html tag like you did here
<div id="pop2" class="pop-up1" style="display:none;">
when you tried to show the div it won't work, try set the display to none in the css instead of hardcode the css in the html tag, that happened to me and I fixed that way.
also with this code
$("#p1_id").html(html).show();
you are now showing the #p1_id selector, you are showing what is inside the #p1_id, tried some like
$("#p1_id").html(html);
$("#p1_id").show();
let me know if works for you the two possible issues that I wrote.
I think you need to use a & here:
var dataString = 'inv_id='+ invid+'&prod_id='+pid;
I'm trying to get a drop down box to alter a second drop down box through the use of a jquery/ajax script. Firebug is showing Jquery is working but my script isn't showing at all.
<script type="text/javascript">
function ajaxfunction(parent)
{
$.ajax({
url: '../functions/process.php?parent=' + parent;
success: function(data) {
$("#sub").html(data);
}
});
}
</script>
process.php is just a MySQL query (which works)
My initial drop down box is populated by a MySQL query
<select name="front-size" onchange="ajaxfunction(this.value)">
//Query
</select>
And then the second drop down box is just
<select name = "front-finish" id="sub">
</select>
How can I solve this?
calling inline function is not good at all... as web 2.0 standards suggest using unobtrusive JS rather than onevent attributes....check out why here..
other thigs..correct way to use ajax is by using type and data ajax option to send values in controller..
<script type="text/javascript">
$(function(){
$('select[name="front-size"').change(function()
{
$.ajax({
url: '../functions/process.php',
type:'get',
data:{'value' : $(this).val()},
dataType:"html", //<--- here this will take the response as html...
success: function(data) {
$("#sub").html(data);
}
});
});
});
</script>
and your proces.php should be..
<?php
//db query ...thn get the value u wanted..
//loop through it..
$optVal .= "<option value="someDbValue">some DDB values</option>";
// end loop
echo $optValue;exit;
updated
looks like you still have onchange="ajaxfunction(this.value)" this in your select remove that it is not needed and the ajaxfunction in javascript too...
<select name="front-size" >
//----^ here remove that
use jQuery.on() that will allow us to add events on dynamically loaded content.
$('select[name^="front-"]').on('change',function(e){
e.preventDefault();
var value = $(this).val();
ajaxfunction(value);
});
[name^="front-"] this will select all the SELECT box having name starts with front-.
In your process.php give like this
echo "<select name='front-finish' id='sub' onchange='ajaxfunction(this.value)'>";
like this you need to add the "onchange" function to the newly created select box through ajax
or you can remove onchange function and write like
$("select[name^='front-']").live('change',function(){
//Do your ajax call here
});
I have two selectlists in my html and both have the values saved in database, I want to know how to change values in selectlist 2 when select 1 is changed by user using jquery?
I am trying to do these things in codeigniter, so please help me, I have done these things using jquery before but that was in simple php by passing the values to the load function of jquery, but this is not working in codeigniter, anyone please help me
Thanks,
Shah RUkh
Say for example you have this drop down
<select id="select_1">
<option value="">Select</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select id="select_2">
<option value="">Select</option>
</select>
On change of select_1 drop down you should get the value and do a AJAX request to your controller function which will return you the options for select_2 than simply replace the html of select_2 with the returned response from script
$('#select_1').change(function(){
var id = $(this).val();
$.ajax({
type: "POST",
url: base_url+'controller/action/',
data: 'id='+id,
success: function(html){
$('#select_2').html(html);
}
});
});
For codeignitor use the base_url in the url parameter of ajax request. You can define a CDATA variable for base_url which you can use in your ajax requests, you can define it in your header.php file.
<script type="text/javascript">
//<![CDATA[
base_url = '<?php echo base_url();?>';
//]]>
</script>
Okay I have done it, using jQuery
<script type="text/javascript">
$(document).ready(function()
{
$("#slect_1").change(function()
{
id = $("#select_1").val();
$("#select_2").load("<?php echo site_url('class/method'); ?>/"+id);
});
});
</script>
Thanks,
Shah Rukh