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
..})
Related
Simply i want to pass Numeric id to Php page and Using $_POST['id'] i want use it, But Getting Undefined error. check screen shot https://imgur.com/a/M1v4mEX and check code below
===>edit.php
$('#update').click(function(){
var serialData = new FormData($("#regForm")[0]),
s = location.search.split('='),
searchId = s[s.length-1];
console.log(serialData);
console.log(searchId);
serialData.append('id',9);
$.ajax({
method:'POST',
url:'update.php',
dataType:'json',
data: {id:9},
success:function(jsonObj){
console.log(jsonObj);
}
});
});
==>update.php
<?php
if(isset($_POST['submit'])){
var_dump($_POST['id']);
exit();
}
?>
You forgot to change the id value to send in parameter to the dynamic value from the location.search
Also think about adding e.preventDefault(); because you work on form submission.
I think that serialData can be removed cause it doesn't have affect the current code logic
Here is the working script
<script>
$('#update').click(function(e) {
e.preventDefault();
var s = location.search.split('=');
var searchId = s[s.length-1];
// Verify the current ID passed on search parameter
console.log(searchId);
$.ajax({
method:'POST',
url:'update.php',
dataType:'json',
data: { 'id': searchId },
success:function(jsonObj){
console.log(jsonObj);
}
});
});
</script>
Why is this not working? Jquery will take the value on change and send it using ajax in json format to a php file. then same jquery will take response and append it. $(#orderSummary) never display success for me to verify that it actually get a response.
$(document).ready(function(){
$("#prodcat").change(function(){
var prodid = $(this).val();
$("#orderSummary").append(prodid);
$.ajax({
type: 'POST',
url: 'getproduct.php',
data: {'prodcat':prodid},
dataType: 'json',
success:function(response){
$("#orderSummary").append(success);
var len = response.length;
$("#product").empty();
for( var i = 0; i<len; i++){
var name = response[i]['name'];
var detail = response[i]['detail'];
var price = response[i]['price'];
$("#product").append("<option value='"+name+"'>"+name+"</option>")
}
}
});
});
});
</script>
You are appending wrong varaible
change
$("#orderSummary").append(success);
to
$("#orderSummary").append(response);
OR if you want to append success message to orderSummary then append it with ''
$("#orderSummary").append('success');
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.
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.
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
});
}
}
});
});