I'm trying to create a script that will save a ticked checkbox. The code I have as of now disables add & approve when read is ticked and disables read when either of add/approve is ticked. Now the problem I have is when I added ajax submission to the jquery it doesn't save the record and it no longer disables the checkboxes(assuming I ticked read).
Here's what I got so far.
$(document).ready(function(){
$('#list-tbl tr').each(function(){
var $this = $(this);
var id = $('#input').val();
$('input[type=checkbox]', $this).change(function(){
if($('.read', $this).is(':checked')){
$('input[type=checkbox]', $this).prop('disabled',true);
$.ajax({
type: 'POST',
url: <?= site_url('admin/update')?>,
dataType: "json",
data: { id: id },
success: function(data) {
alert("Updated");
}
});
$(this).prop('disabled',false);
} else if($('.add', $this).is(':checked') || $('.approve', $this).is(':checked')) {
$('.read', $this).prop('disabled', true);
$(this).prop('disabled', false);
} else{
$('input[type=checkbox]', $this).prop('disabled',false);
$(this).prop('disabled',false);
}
});
});
});
Ex: http://jsfiddle.net/bGatX/
I'm getting a lil bit frustrated I just want to save the data in the right manner and perform the disabling as it is....
Many thanks.
Looking at your jsFiddle... you don't actually have a HTML element with id="input", even though, you've trying to save an id using: var id = $('#input').val();
This is the id you're trying to send to the server but it doesn't really exist. What are you really trying to do? Establish whether a certain user has read/added/approved a particular item? If that's the case what you need to send to the server is a user id combined with a string that represents whether the user read/added or approved an item.
On a minor note and as a matter of redundancy and performance: $(this).prop('disabled',false); is common amongst all conditionals and can be pulled out to the front as a common factor.
Related
i am trying to use toggle buttons to save response in db as yes or no. for some reason the only response i am getting is 'on'. even when i switch off the button. i tried searching for problem and got a match but the problem was asked for android platform.now i am stuck with no answer there where similar questions but none of them is useful for me at this moment. sharing the code down below.Thanks in advance for those who are going to suggest or provide a solution.i am using class handicap to save data into variable inside JQUERY and then send that variable to AJAX page to perform db operation.i am not sharing CSS for toggle as i don't think that is required right now. if u need any additional info, do inform me.this input is inside a form with method POST. i am using a submit button with id that is calling this JQUERY.
html part
<div class="switch">
<input id="cmn-toggle-4" class="cmn-toggle cmn-toggle-round-flat handicap" type="checkbox" name="handicap">
<label for="cmn-toggle-4"></label>
</div>
jquery
$("#save-medical-1").click(function () {
var m11 = $(".handicap").val();
alert(m11);
$.ajax({
url: "ajexupdate.php",
type: "POST",
data: {smsgs11: m11},
dataType: 'text',
cache: false,
success: function (e) {
// alert(e);
$("#user_medical_form").html(e);
$("#medidetail").modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
}
});
return false;
});
You can get value using ":checked" using jquery.
eg.
if($("#cmn-toggle-4").is(":checked")){
m11="yes";
}
else{
m11="no";
}
and send it through ajax.
By writing a php command you are setting the initial value of that input into m11. You have to catch the client side value of input instead:
your code:
var m11 = '<?php echo $_POST['handicap']; ?>'; // always returns the initial value
Correct clien-side code:
var m11 = $(this).val();
I am attempting to use AJAX to generate PHP to be displayed inside of a div based on the ID of the link clicked. (I haven't dealt with HTML formatting yet, just want to figure this out first)
My Code:
<script type="text/javascript">
jQuery(document).ready(function()
{
$(".myClass h3").click(function(){
var clickID = $(this).attr('id'); //For sake of argument lets say id = 1.
$.ajax({
url: 'landingPage.php',
data: {ProductIDNumber: clickID},
success: function(html) {
$('#container').append(html);
}
});
});
});
</script>
I have dealt with getting the PHP to run when the url is landingPage.php?ProductIDNumber=1 and that all works properly, I just don't quite grasp how to return the resultant HTML.
Edits made and commented on.
You need to include success, which is run once the response is received, similar to;
<script type="text/javascript">
jQuery(document).ready(function()
{
$(".myClass h3").click(function(){
var clickID = $(this).attr('id'); //For sake of argument lets say id = 1.
$.ajax({
url: 'landingPage.php',
data: {
ProductIDNumber : clickID
},
success: function(html) {
// Do what you need to here with 'html'
$('#container').append(html);
}
});
});
</script>
As Alvaro said the structure of the data was also incorrect
Here's a link to the jQuery docs where you can find out more about the parameters and options you have (such as handling fails etc)
the data is wrong,
it is like this:
data: {varname: value, varname1: value},
I have a working code to change the colors of table cells when clicked on a colored button and when the mouse is dragged on table cell all the cells involved in the drag gets that color, here is the code http://jsfiddle.net/28SMv/76/ ,
Now i want to do form validation like when the first table cell gets a color i want to echo out value and send it to database, i am not able to set the table cell values to the selected color, please help!
Try it!
Show line and column id and value to store in your database.
Live demo
To save data use:
var Params = { identificador: identificador, color : color };
$.ajax({
url: 'pagetosave.php',
type: 'post',
data: Params,
success: function (data) {
alert('saved...');
}
});
Replace it on each command.
Will be triggered once for each ....
your php page will receive two parameters.... identificador e color.
You could try like this:
$('our_table td').click(function(){
$(this).css('background-color', selectedColor);
alert($(this).children("input").val());
$.ajax({
url: "add-product.php",
type: "post",
data: $(this).children("input").val().serialize(),
error: function(data){
alert("There was an error while inserting into the database. );
},
success: function(data) {
Display_Load();
$("#content").load("pagination_data.php?page=1", function() {
Hide_Load()
});
}
});
});
It doesn't seem to be letting me do the alert in Fiddle, but once you can get the variable, just do an AJAX call to update a database somewhere.
Let me know if you need more help.
So I was wondering something.
In a IM/chat website I'm making, I have it check the database every 10 seconds or so to see if any new data has come in. And also, when the user posts a new comment, it automatically sends it to the database and adds it to the comment list without reloading. But it loads all the comments each time.
I was wondering if its possible to add an effect to the new comment (such as fading in) without doing that to all the old comments as well.
function update(){
oldhtml = $('#listposts');
$.ajax({
type: "POST",
data: "",
url: "update.php",
success: function(msg){
$("#listposts").html(msg);
$('.comment_date').each(function(){
$(this).text('[' + prettyDate($(this).text())+']');
if(oldhtml == )
});
}
});
}
var intervalID = window.setInterval(update, 10000);
That's my update code. Here's my post code:
$("#postbutton").click(function () {
if(!$('#post').val()==""){
$.ajax({
type: "POST",
data: "data=" + $("#post").val(),
url: "post.php",
success: function(msg){
$("#listposts").html(msg);
$('.comment_date').each(function(){
$(this).text('[' + prettyDate($(this).text())+']');
});
}
});
$("#post").val("");
}
});
I'm also using prettyDate, as you can see. But that has nothing to do with this problem.
So as the title states, I was gonna try to save the current html in a variable (oldhtml) and then load the new stuff. Then I would compare the two and just use the new comment to fade in. Am I way out there? Am I missing the point?
Oh and please don't down vote me just cause I missed an obvious solution. I thought you're supposed to use it if I don't explain well, which I think I did.
You can do this in your success handler:
var $dv = $('<div />').css('display', 'none').html(msg);
$("#listposts").append($dv);
$dv.fadeIn();
Of course you can use a <span> instead of <div> depending on your needs.
Similar to Blaster's...
$('<div />').html(msg).appendTo('#posts').hide().fadeIn();
I want to basically create a link which says:
Click here to show contact information
Upon clicking it, it will ping a script via an ajax request, the ajax request will look up the user table where the ID is what is contained in the alt tag, it will return a certain field from the database and then the div will change from this link, to a contact number.
I'm sure some of you have seen this done before, for example:
Click to see persons phone number
They click it, and it changes to their phone number.
How would I go about doing this? I want to do it using ajax instead of having the phone number in the source code, because that really defeats the purpose of them having to click to reveal if bots can get it from the source code.
Thanks :)
Somethign along the lines of
$("#reveal").click(function(){
$.get('getphoneNumber.php',{id:$(this).attr('alt')}, function(data) {
$('#reveal').html(data);
});
});
with a php script called getphoneNumber.php that accepts a get parameter of id
Try this one
$('#reveal').click(function () {
var th = $(this);
$.get('/get-the-phone-number', { id: th.attr('alt') }, function (response) {
th.text(response);
});
});
Also, I'd recommend you put the id number inside a data-contact-id attribute and access it via th.data('contact-id') instead of using the alt attribute. Ignore me if you have other reasons to do this.
$("#reveal").live('click',function(event) {
var link = $(this).attr('alt');
var dataString = 'alt=' + link ;
$.ajax({
type: "POST",
url: "url",
cache:false,
data: dataString,
success: function(data){
this.href = this.href.replace(data);
}
});
}
Click here to show contact information
<div id="myHiddenDiv"></div>
$("#reveal").click(function(){
$.get("test.php", { id: $(this).attr("alt") },
function(data){
$("#myHiddenDiv").html(data);
$("#myHiddenDiv").show();
});
});
This example works assuming you've only got one of these "plugins" on your site, if you'll have multiple, use this:
Click here to show contact information
<div class="myHiddenDiv"></div>
$(".reveal").click(function(){
var divSelector = $(this).next("div");
$.get("test.php", { id: $(this).attr("alt") },
function(data){
divSelector.html(data);
divSelector.show();
});
});