So i've a situation where I have a selectbox that makes a jquery .post call to another script on a .change event.
I was wondering if there is anyway i can revert the selectedoption back to the original default should something occurs or that my .post event fail?
Hi ppl, I'm sorry.
Here's the javascript code. I've made some amendments to it. I'm trying to get the second line to work as this code is not working now due to some errors(due to don't know what on the second line). My selectbox is part of a list so i'm not able to make it a unique id to it and to remember the box the user selects, i need to use $(this).
$('.order_stateselect').click(function(){
var val=$(this).find(":selected").val();
$(this).change(function(){
if(confirm('Confirm Order Status Change?')){
var conduct_status_chge=$.post('/seller/helpers/order_status_change.php',{order_item_id:$(this).parent('td').siblings('.order_item_id').text(),order_item_status:$(this).find(':selected').val()},function(data){
alert(data);
})
.error(function() { alert("error"); })
}
});
});
Difficult to tell without code, but I'll try
$("#selectbox").data('origValue', $("#selectbox").val());
$("#selectbox").on('change', function () {
$.post(...).done(function () {
// other stuff
$("#selectbox").data('origValue', $("#selectbox").val());
}).fail(function () {
$("#selectbox").val($("#selectbox").data('origValue'));
});
});
Use something like this
var value=$("#selectbox").val();
$.ajax({
type:post,
url:"something.com",
success:function(){
},error:function(){
$("#selectbox").val(value);
}
})
$('select').val('defaultvalhere');
You could use this to select first option not regarding default value:
$('#selectId option:eq(0)').attr('selected',true);
you can simply use a global variable to save the option selected previously. Once save you can just use that on your error Its something like this
<script type="text/javascript">
this.previousVal = 0;
function changeHandler(selectBox)
{
$.ajax({
type:post,
url:"URL",
success:function(){
//ur code
this.previousVal=selectBox.selectedIndex;
},error:function(){
//use previousVal and set the value back to the previous value
}
})
}
</script>
<select id="changeLang" name="changeLang" onchange="changeHandler(this)"></select>
Related
I'me trying to implement an on/off button on a php loop but I can't make it work because of the id of jQuery event. How can I get the correct id on click and pass it to the rest of the script?
The problem is in the $('#myonoffswitch')...
<script type="text/javascript">
$(document).ready(function(){
$('#myonoffswitch').click(function(){
var myonoffswitch=$('#myonoffswitch').val();
var wnfID=$('#wnfID').val();
if ($("#myonoffswitch:checked").length == 0) {
var a="2";
var b=wnfID;
} else {
var a="3";
var b=wnfID;
}
$.ajax({
type: "POST",
url: "ajax_wnf_status.php",
data: "statusWnf="+a+"&wnfID="+b,
success: function(html) {
$("#display").html(html).show();
}
});
});
});
</script>
I'm generating different id's for the loop rows (ex: id="#myonoffswitch1" ; id="#myonoffswitch2"; etc).
I'm not certain I fully understand the question, but .val() will not get the ID of an element. You should use .attr('id') instead.
Also, it looks like you're trying to format data for a GET request, not a POST.
If I understand the question correctly, I think you're looking for
event.target.id
where 'event' is passed in to your handler:
('#myonoffswitch').click(function(event){
id = event.target.id
. . .
Though at that point, you might not need the id, since you can just use event.target directly.
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
});
The issue is how do I POST the value of the first dropdown selected to my Codeigniter controller using jQuery/AJAX. Here is an example of what I need to do http://css-tricks.com/examples/DynamicDropdown/
$("#first-choice").change(function() {
$("#second-choice").load("getter.php?choice=" + $("#first-choice").val());
});
In the .load() I want to be able to pass the value of #first-choice to my controller.
How can I do that? Thanks!
$("#first-choice").change(function() {
var str = '';
$.ajax({
url: 'getter.php',
type:'GET',
dataType:'json',
data:'choice='+ $("#first-choice").val(),
success:function(data){ //you must return your data as id and value for the selectbox
$.each(data as function(v){
str+='<option value="'+v.yourid+'">'+v.yourvalue+'</option>';
});
$("#second-choice").html(str);
}
});
});
try this
$("#second-choice").load("getter.php",{choice:$("#first-choice").val()},function(){
//do something here
});
this will POST the additional parameters to the server and a callback that is executed when the server is finished responding.
Try this:
$("#first-choice").change(function() {
$("#second-choice").load("<?php echo site_url('controller-name/method-name'); ?>/" + $("#first-choice").val());
});
NOTE: I have used forward trailing slash to pass your dropdown value as a parameter to your method but this is not necessary you can also pass using get or post method
This piece of code (with another php file) grabs some content from a database and pus it into a div called about_content.
$(document).ready(function(){
$('a#about-menu').click(function() {
var id = $('a#about-menu').attr('class');
$.post('subpages/content_about/about_content.php',{id: id}, function(id){
$('div#about_content').text(id)
});
});
});
Everything works, but can you tell me how I can modify this so the stuff fades in, instead of just being smacked right in... I'm not sure how to use the fadeIn function in this scenario..
Try..
$('div#about_content').css('opacity', '0').text(id).fadeIn();
you can do
$('div#about_content').hide();
$('div#about_content').html(id);
$('div#about_content').fadeIn(1000);
didnt test it, so im not sure you could try
This fades out the existing content then replaces the content and fade it in!
$(document).ready(function(){
$('a#about-menu').click(function() {
var id = $('a#about-menu').attr('class');
$.post('subpages/content_about/about_content.php',{id: id}, function(id){
$('div#about_content').fadeOut('fast',function(){ $(this).html(id).fadeIn(); });
});
});
});
DEMO
somehow still not able to do what I’m inted to do. It gives me the last value in loop on click not sure why. Here I want the value which is been clicked.
Here is my code:
$(document).ready(function() {
var link = $('a[id]').size();
//alert(link);
var i=1;
while (i<=link)
{
$('#payment_'+i).click(function(){
//alert($("#pro_path_"+i).val());
$.post("<?php echo $base; ?>form/setpropath/", {pro_path: $("#pro_path_"+i).val()}, function(data){
//alert(data);
$("#container").html(data);
});
});
i++;
}
});
Here the placement_1, placement_2 .... are the hrefs and the pro_path is the value I want to post, the value is defined in the hidden input type with id as pro_path_1, pro_path_2, etc. and here the hrefs varies for different users so in the code I have $('a[id]').size(). Somehow when execute and alert I get last value in the loop and I don’t want that, it should be that value which is clicked.
I think onready event it should have parsed the document and the values inside the loop
I’m not sure where I went wrong. Please help me to get my intended result.
Thanks, all
I would suggest using the startsWith attribute filter and getting rid of the while loop:
$(document).ready(function() {
$('a[id^=payment_]').each(function() {
//extract the number from the current id
var num = $(this).attr('id').split('_')[1];
$(this).click(function(){
$.post("<?php echo $base; ?>form/setpropath/", {pro_path: $("#pro_path_" + num).val()},function(data){
$("#container").html(data);
});
});
});
});
You have to use a local copy of i:
$('#payment_'+i).click(function(){
var i = i; // copies global i to local i
$.post("<?php echo $base; ?>form/setpropath/", {pro_path: $("#pro_path_"+i).val()}, function(data){
$("#container").html(data);
});
});
Otherwise the callback function will use the global i.
Here is a note on multiple/concurrent Asynchronous Requests:
Since you are sending multiple requests via AJAX you should keep in mind that only 2 concurrent requests are supported by browsers.
So it is only natural that you get only the response from the last request.
What if you added a class to each of the links and do something like this
$(function() {
$('.paymentbutton').click(function(e) {
$.post("<?php echo $base; ?>form/setpropath/",
{pro_path: $(this).val()},
function(data) {
$("#container").html(data);
});
});
});
});
Note the use of $(this) to get the link that was clicked.