I'm looking to auto submit when a specific checkbox is checked.
I need it to pass to ajax.
Here is what I have so far:
$(document).ready(function () {
$("input[name=<?php echo("$newseo"); ?>]").click(function(){
var id=$(this).attr('id');
var favorite=$(this).val();
$.ajax({
type:'POST',
url:'check_favorite.php',
data:'id= ' + id + '&favorite='+favorite
});
}
});
});
But I just can't seem to get it to work,
Any help would be great, Thanks!
Here you go, this should do it. Your AJAX looks fine. I put together a JSFiddle to demonstrate.
$("input[name=TestCheck]:checked").live('click', function(e) {
var id=$(this).attr('id');
var favorite=$(this).val();
alert(id + " - " + favorite);
// Post here ...
$.ajax({
type:'POST',
url:'check_favorite.php',
data: {id: id, favorite: favorite}
});
});
JSFiddle : http://jsfiddle.net/4GQ6K/1/
I don't really like using obtrusive JavaScript and inputting PHP into JavaScript like that but there is no reason it shouldn't work.
$('#my_checkbox').change(function(){
if($(this).is(':checked'))
{
$('#my_form').submit();
}
});
Use your server side code[php] to set a id or a class to your specific checkbox. Then bind a click event to the given class name, e.g.
php code sets a class named .sCheckBx.
then on document.ready bind your event :
$(document).ready(function () {
$(".sCheckBx").click(function(){
var id=$(this).attr('id');
var favorite=$(this).val();
$.ajax({
type:'POST',
url:'check_favorite.php',
data:'id= ' + id + '&favorite='+favorite
});
}
});
});
Try this
$(document).ready(function () {
$("checkboxId").click(function(){
var $this = $(this);
if($this.is(":checked")){
var id=$this.attr('id');
var favorite=$this.val();
$.ajax({
type:'POST',
url:'check_favorite.php',
data:'id= ' + id + '&favorite='+favorite
});
}
}
});
});
Related
here is my code for ajax. I am using laravel 5.4 and I don't know the problem why the append doesn't work.
$(document).ready(function(){
$(document).on('change','#product_category',function(){
var cat_id = $(this).val();
$.ajax({
type:'get',
url:'{!!URL::to('findProductName')!!}',
data:{'id':cat_id},
success:function(data){
console.log('success');
console.log(data);
//console.log(data.length);
var op = "";
op+='<option value="0" selected disabled>Choose Product</option>';
for(var i=0; i<data.length; i++){
op+='<option value="'+data[i].id+'">'+data[i].name+'</option>';
}
var div = $(this).parent();
div.find('.choice').html(" ");
div.find('.choice').html(op);
},
error:function(){
}
});
});
});
Mistake in a first look found here
url:"{!!URL::to('findProductName')!!}",
Quotes mistake
To pass variables to a JavaScript script you should assign the value to a global variable before you load the actual ajax script.
Into the blade template:
<script>
var toUrl = "{!! URL::to('findProductName') !!}";
</script>
<script type="text/javascript" src="path/to/ajax/script.js"></script>
then in your script you can do the following:
{
...
url: toUrl,
...
}
or you could use a laravel library to bind JavaScript values to a view like Transform PHP Vars to JavaScript
put
$ajax({
...
async : false
..})
I loaded a json fuction from a php page and I append it to an UL, Which creates a list.When I delete a row, I reuse the same function to re-append the list; it works, but sometime I have to click twice before it removes theselected row.
Is there a way to simplify this process as i am new to jquery?
$(document).on('pageinit', '#two', function () {
var url="http://localhost/budget/items_list.php";
$.getJSON(url,function(result){
console.log(result);
$.each(result, function(i, field){
var budgeted_id=field.budgeted_id;
var name=field.name;
var budget_amount=field.budget_amount;
var trans_amount=field.trans_amount;
var balance=field.balance;
$("#listview").append('<li data-icon="delete">'+name+'<span class="ui-li-count">Bal: $'+balance+'</span><a class="del" id="'+budgeted_id+'" href="#"></a></li>').listview("refresh");
});
});
$(document).on("click",'.del',function(){
$("#listview").empty();
budgeted_id = (this.id);
$.post('delete_item.php',{postbudgeted_id:budgeted_id});
var url="http://localhost/budget/items_list.php";
$.getJSON(url,function(result){
console.log(result);
$.each(result, function(i, field){
var budgeted_id=field.budgeted_id;
var name=field.name;
var budget_amount=field.budget_amount;
var trans_amount=field.trans_amount;
var balance=field.balance;
$("#listview").append('<li data-icon="delete">'+name+'<span class="ui-li-count">Bal: $'+balance+'</span><a class="del" id="'+budgeted_id+'" href="#"></a></li>').listview("refresh");
})
})
});
IMHO, it isn't a bad idea to reuse the same function, you will be sure to get always the actual data you have on server-side.
From your description of the issue, I believe you just only need to chain the two ajax calls.
Here an example how to do that, adapted on the fly from jQuery documentation:
function createList(result){
$.each(result, function(i, field){
var budgeted_id=field.budgeted_id;
var name=field.name;
var budget_amount=field.budget_amount;
var trans_amount=field.trans_amount;
var balance=field.balance;
$("#listview").empty().append('<li data-icon="delete">'+name+'<span class="ui-li-count">Bal: $'+balance+'</span><a class="del" id="'+budgeted_id+'" href="#"></a></li>').listview("refresh");
});
}
function getListData(){
$.ajax({
url: "http://localhost/budget/items_list.php",
method: "GET",
dataType: "json",
success: function (result) {
createList(result);
}
});
}
$(document).on("pageinit", "#two", function () {
getListData();
});
$(document).on("click", ".del",function(){
var budgeted_id = (this.id);
var request = $.ajax({
url: "delete_item.php"
method: "POST",
data: {postbudgeted_id:budgeted_id}
});
var chained = request.then(function() {
getListData();
});
});
Please, note this is untested, but you got the idea. If there is an ajax error, your list will remain untouched, up to you to trap these errors and display in your web page a toaster notification.
If chaining the ajax calls won't work, maybe you should investigate your backend.
I'm struggeling with making an AJAX url inside of an php echo. Other troubleshooters around the internet didn't get me through it. Here is my code:
<script type="text/javascript">
$(document).ready(function () {
$.ajaxSetup ({
cache: false
});
var ajax_load = "";
$( "#'.$row_items['id_aanbod'].'" ).change(function() {
$("#res").html(ajax_load).load("update.php", "e=" + $("#'.$row_items['id_aanbod'].'").val() & "id=" + $("#hrr").attr("id"));
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
The strange thing is that if I use only one variable the script works like it should, but as soon as I insert the second part there is nothing happening. Can anyone help me with this?
& "id="
should be
+ "&id="
But for clean code, you could write like below:
$("#<?php echo $row_items['id_aanbod']?>").change(function() {
$("#res").html(ajax_load).load("update.php", {
e: this.value,
id: $("#hrr").attr("id")
});
});
Please try like this:
<script type="text/javascript">
$(document).ready(function () {
$.ajaxSetup ({
cache: false
});
var ajax_load = "";
$( "#<?=$row_items['id_aanbod']?>" ).change(function() {
$("#res").html(ajax_load).load("update.php", "e="+$("#<?=$row_items['id_aanbod']?>").val() + "&id=" + $("#hrr").attr("id"));
});
});
Don't forget to check vals. If short open tags is OFF -> then try :
<?php echo $row_items['id_aanbod']?>
How can I clear the options of select box after refresh ... I have two select boxes and both of their values after refresh didn't clear or reset
i am working in code igniter
here is my code.
<?php echo form_dropdown('cat_id', $records2, '#', 'class="cho" id="category"');?>
<script type="text/javascript">//
$(document).ready(function(){
$('#category').change(function(){
$("#items > option").remove(); //it is not working
var category_id = $('#category').val();
$.ajax({
type: "POST",
url: "testController/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);
});
}
});
});
});
// ]]>
try
$("#items").empty();
empty() method will clear all html
API Reference http://api.jquery.com/empty
Instead of
$("#items > option").remove(); //it is not working
try this
$("#items).html("");
Here is simple jsFiddle for you
UPDATE:
You might also consider to build you options markup first and then replace it at once, rather then sequentially append items.
$("#category").change(function(){
var category_id = $("#category").val();
$.ajax({
type: "POST",
url: "testController/get_items/" + category_id,
success: function(items)
{
var options = "";
$.each(items, function(item_id, item_name)
{
options += "<option value=\"" + item_id + "\">" + item_name + "</option>";
});
$("#items").html(options);
}
});
});
$('#items')
.find('option')
.remove()
.end();
IE6
$('#items')
.empty();
There is nothing in the document.ready event handler. Everything is contained within
$('#category').change(function(){ meaning nothing will happen on page refresh.
Problem: New Inserted Dom elements aren't been wired correctly, function deletepost not firing. This happens only on IE and for new elements only added to DOM.
$(function(){
$('#postentry').submit(function() {
var tyu = $('#tittle_ent').val();
if(tyu.length <= 2)
{alert('Enter More Text!'); return false;}else
{
$.ajax({
type:'post',
url: '/posts_in.php',
dataType: "json",
data: $("#postentry").serialize(),
success:function(data){
var tittle = data[0];
var id= data[1];
$('<div></div>').attr('id','post'+id).addClass('boxee').html(tittle).prependTo('#boxer');
$('<img src="img/page-text-delete-icon.png" name="'+id+'">').attr({id:'postchk'+id,onclick: 'deletepost(this.name);'}).appendTo('#post'+id);
$('#tittle_ent').val('').focus();
}
});
return false;
}
});
});
Use jquery live
$(function(){
$("#boxer img").live("click", function(){
deletepost($(this).attr("name"));
});
$('#postentry').submit(function() {
var tyu = $('#tittle_ent').val();
if(tyu.length <= 2)
{alert('Enter More Text!'); return false;}else
{
$.ajax({
type:'post',
url: '/posts_in.php',
dataType: "json",
data: $("#postentry").serialize(),
success:function(data){
var tittle = data[0];
var id= data[1];
$('<div></div>').attr('id','post'+id).addClass('boxee').html(tittle).prependTo('#boxer');
$('<img src="img/page-text-delete-icon.png" name="'+id+'">').attr({id:'postchk'+id,onclick: 'deletepost(this.name);'}).appendTo('#post'+id);
$('#tittle_ent').val('').focus();
}
});
return false;
}
});
});
'onclick' is ancient/oldschool stuff, especially when using jquery. Try this variant instead:
$('<img src="img/page-text-delete-icon.png" name="'+id+'">')
.attr('id', 'postchk'+id)
.click(function () { deletepost(this.name); }) /// use .click() instead.
.appendTo('#post'+id);
Yeah , You must used jQuery live() function, the more detail example can be found here http://developerfaq.wordpress.com/2011/07/28/fire-event-on-dynamically-generated-dom-element-with-jquery/