I developed a simple ajax code.According to this image when click+ qty increase and when click - qty decrease
Code in online _help.blade.php
<head>
<title>Ajax Example</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script>
$(document).ready(function(){
$('.cart_quantity_up, .cart_quantity_down').on('click', function(e) {
e.preventDefault();
var increment = $(this).data('increase');
var itemId = $('.cart_quantity_input').val();
$.ajax({
type:'post',
url:'getmsg',
dataType:'json',
data:{
'item_id': itemId,
'increase': increment
},
success:function(data){
$("cart_quantity_input").val(data.qty);
} });
});
});
</script>
</head>
<body>
<div class="cart_quantity_button">
<a class="cart_quantity_up" href="javascript:void(0)" data-increase="1" > + </a>
<input class="cart_quantity_input" type="text" name="quantity" value="{{1}}" autocomplete="off" size="2">
<a class="cart_quantity_down" href="javascript:void(0)" data-increase="0" > - </a>
</div>
</body>
<footer>
<script type="text/javascript">
var csrf_token = $('meta[name="csrf-token"]').attr('content');
$.ajaxSetup({
headers: {"X-CSRF-TOKEN": csrf_token}
});
</script>
</script>
</footer>
Code in controller function
public function ajaxl(Request $request)
{
if ($request->ajax()) {
$id = $request->item_id;
if ($request->increase) {
//$cart->increment('qty');
$qty = 2;
} else {
//$cart->decrement('qty');
$qty = 0;
}
//echo"hello ajaxlara:";
return response()->json(array('qty'=> $id), 200);
}
}
And this routes.php
Route::get('/ajax',function(){return view('online_help');});
Route::post('/getmsg','Hello#ajaxl');
When I click + or - the value doesn't change and no error.
Please any one help me
The problem is very small.
This line:
$("cart_quantity_input").val(data.qty);
just you forgot to add . before cart_quantity_input
So change it to be :
$(".cart_quantity_input").val(data.qty);
Related
i am using google recaptcha v3 in my website ,
here is the code i have added in my html web page in the head:
<script src="https://www.google.com/recaptcha/api.js?render=my public key"></script>
<script>
grecaptcha.ready(function () {
grecaptcha.execute('my public key', { action: 'contact' }).then(function (token) {
var recaptchaResponse = document.getElementById('recaptchaResponse');
ecaptchaResponse.value = token;
});
});
</script>
and i added this in my form :
<input type="hidden" name="recaptcha_response" id="recaptchaResponse">
but when i submit the form and try to see the content of $_POST['recaptcha_response'] with var_dump()
it is just an empty string : string(0) ""
where is the mistake ?
thanks for answers !
i tried lots of changes but everytime i get " token = null " then i try this.. 100% working....
in Your Html
<html>
<head>
</head>
<body>
<form id="contact">
<div class="col-12">
<div class="form-group">
<input type="hidden" name="captcha_token" id="recaptchaResponse" data-sitekey="YOUR-SITE-KEY">
</div>
</div>
<div class="col-12">
<button type="submit" class="btn btn-lg" id="submit-btn">
SUBMIT
</button>
</div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js?onload=ReCaptchaCallbackV3&render=YOUR-SITE-KEY"></script>
</body>
</html>
after then add in your js file
$(document).ready(function(){
setInterval(function(){
ReCaptchaCallbackV3();
}, 90000);
$(document).on("submit",'#contact',function (e) {
var token = $('[name="g-recaptcha-response"]').val();
console.log(token);
});
});
var ReCaptchaCallbackV3 = function() {
grecaptcha.ready(function () {
grecaptcha.execute('YOUR-SITE-KEY', { action: 'contact' }).then(function (token) {});
});
}
In your original script you have a typo:
var recaptchaResponse = document.getElementById('recaptchaResponse');
ecaptchaResponse.value = token;
Instead of recaptchaResponse, you wrote ecaptchaResponse
My server giving me the response as following
when my ajax call to the same page. Before Ajax call everything is working fine on console but after ajax call and updating database, this error is occurring. I think my Ajax_url is not correct but I want to get ajax data on same page that name is "custom_Settings.php" as mentioned in url.
Please help me to solve this error.
Thanks!
jquery-3.4.1.min.js:2 POST
http://localhost/DemoWebsite/wp-admin/custom_Settings.php 404 (Not
Found)
JS
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function(){
saveNewPositions();
});
function saveNewPositions(){
var positions = [];
$j('.updated').each(function(){
positions.push([$j(this).attr('data-index'), $j(this).attr('data-position')]);
$j(this).removeClass('updated');
});
$j.ajax({
url: 'custom_Settings.php',
method: 'POST',
dataType: 'text',
data: {
update: 1,
positions: positions
}, success: function(response){
console.log(response);
}
});
}
</script>
PHP
function wp_pageOrdering_field_settings(){
global $wpdb;
if (isset($_POST['update'])) {
foreach($_POST['positions'] as $position){
$index = $position[0];
$newPosition = $position[1];
}
$wpdb->update(
'wp_page_settings',
array('page_order' => $newPosition),
array('ID' => $index)
);
wp_die();
}
HTML
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title></title>
</head>
<body>
<div class="container" style="margin-top: 100px;">
<div class="row justify-content-center">
<div class="col-md-4 col-md-offset-4">
<table class="table table-stripped table-hover table-border">
<head>
<tr>
<td>Page Title</td>
</tr>
</head>
<tbody>
<?php
$var = get_option('Accessable_Pages');
$list = implode(",", $var);
$newRes = $wpdb->get_results("SELECT ID, post_title, page_order FROM wp_page_settings WHERE ID IN ($list) ORDER BY page_order ASC",ARRAY_A);
if($newRes){
foreach ($newRes as $value1 ) {
echo '
<tr data-index="'.$value1['ID'].'" data-position="'.$value1['page_order'].'">
<td>'.$value1['post_title'].'</td>
</tr>
';
}
}
?>
</tbody>
</table>
</div>
</div>
</div>
When I type in my select box the result always show "The result cannot be load". I am using CodeIgniter for my framework and select2 in my select box and am a newbie in CodeIgniter and Select2. I have already search it through all articles that can be related to my problem but it still can't work. I think I messed my ajax but I don't know how and where I should fix it.
Here is my controller
<?php
class Admin extends CI_Controller{
function __construct(){
parent::__construct();
$this->load->model('admin_model');
}
function search_book(){
$booksClue = $this->input->get('booksClue');
$data_book = $this->admin_model->get_book($booksClue, 'id_book');
echo json_encode($data_book);
}
}
?>
Here is my model
<?php
class Admin_model extends CI_Model{
function get_book($booksClue, $column){
$this->db->select($column);
$this->db->like('id_book', $booksClue);
$data = $this->db->from('book')->get();
return $data->result_array();
}
}
?>
And here is my view
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('.searchingBook').select2({
placeholder: 'Masukkan ID Buku',
minimumInputLength: 1,
allowClear: true,
ajax:{
url: "<?php echo base_url(); ?>/admin/searchbook",
dataType: "json",
delay: 250,
data: function(params){
return{
booksClue: params.term
};
},
processResults: function(data){
var results = [];
$.each(data, function(index, item){
results.push({
id: item.id_book,
text: item.id_book
});
});
return{
results: results
};
}
}
});
});
</script>
<table>
<tr>
<td><b>ID Buku</b></td>
<td> : </td>
<td>
<select class="searchingBook" style="width: 500px">
<option></option>
</select>
</td>
</tr>
</table>
<br><br>
</body>
</html>
Big thanks for your help!
Update your model function like below:
function get_book($booksClue, $column){
$this->db->select($column);
$this->db->from('book');
$this->db->like('id_book', $booksClue);
return $this->db->get()->result_array();
}
I'm using Symfony2 and I would like to use the BlueImp plugin, basic setup.
Actually, I have a form in which you can load 3 pictures and one song (it is for an artist registration).
As a start, I try to implement the plugin for just one picture. But when I select a file in my input "picture 1", nothing happens.. What is wrong ?
<html>
<head>
<script type="text/javascript" src="{{ asset('bundles/mybundle/js/jquery-file-upload/js/vendor/jquery.ui.widget.js') }}"></script>
<script type="text/javascript" src="{{ asset('bundles/mybundle/js/jquery-file-upload/js/jquery.iframe-transport.js') }}"></script>
<script type="text/javascript" src="{{ asset('bundles/mybundle/js/jquery-file-upload/js/jquery.fileupload.js') }}"></script>
</head>
<form id="myForm" action="{{ path('MyBundle_artist_new') }}" {{ form_enctype(form) }} method="post" novalidate>
<div class="field">
{{ form_label(form.picture1 "Picture 1") }}
{{ form_widget(form.picture1) }}
</div>
<input type="submit" value="Register"/>
</form>
<script type="text/javascript">
$(document).ready(function(){
$('#myform_picture1').fileupload(
{
dataType: 'json',
url:'{{path('MyBundle_ajax_upload_picture') }}',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo(document.body);
});
}
});
});
</script>
Here is upload handler (the action for the url {{path('MyBundle_ajax_upload_picture') }} :
<?php
public function ajaxUploadPicture()
{
$request = $this->get('request');
$uploaded_file = $request->files->get('myform_picture1');
if ($uploaded_file)
{
$picture1 = $this->processImage($uploaded_file);
$picture1->setPath('pictures/artist/' . $picture1);
$em->persist($picture1);
$em->flush();
$response = 'success';
}
else $response= 'error';
$response = new Response(json_encode(array('response'=>$response)));
$response->headers->set('Content-Type', 'application/json');
return $response;
}
public static function processImage(UploadedFile $uploaded_file)
{
$path = 'pictures/artist/';
$uploaded_file_info = pathinfo($uploaded_file->getClientOriginalName());
$filename = uniqid() . "." .$uploaded_file_info['extension'];
$uploaded_file->move($path, $filename);
return $filename;
}
You should check what you get from ajax request ex:
$('#myform_picture1').fileupload(
{
dataType: 'json',
url:'{{path('MyBundle_ajax_upload_picture') }}',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo(document.body);
});
},
always: function (e, data) {
console.log(data);
}
});
I am not sure about this line $uploaded_file = $request->files->get('myform_picture1');
you sure that your file input name is myform_picture1 ?
Please try $uploaded_file = $request->files->get('myform[picture1]', array(), true);
I wrote this code in javascript to disply information in this page (Normal_Info.php),
but unfortunately it did not work. If anyone can help me I will be grateful
<html>
<head>
<script language="javascript">
function ajaxFunction()
{
return window.XMLHttpRequest ?
new window.XMLHttpRequest :
new ActiveXObject("Microsoft.XMLHTTP");
}
function Go_there()
{
var httpObj = ajaxFunction();
httpObj.open("GET","Normal_Info.php", true);
httpObj.send();
httpObj.onreadystatechange = ChangedState()
{
if (httpObj.readyState == 4 && httpObj.status == 200)
{
document.getElementById("result").innerHTML=httpObj.responseText;
}
}
}
</script>
</head>
<body>
<form id=ff>
<input type=button value=Hi OnClick=Go_there() />
</form>
<div id=result>
</div>
</body>
</html>
i suggest using jquery http://jquery.com/
<script src="jquery.js"></script>
<script language="javascript">
$('#ff').submit(function() {
$.ajax({
url: 'ajax/test.html',
success: function(data) {
$('#result').html(data);
// alert('Load was performed.');
}
});
});
</script>
no need to click event