I want that every time the "plato" button is pressed (there are several because I create them inside a loop) this function is executed
"$ ('# plato'). click (function ()" but I have observed that this code is only executed when the first button is pressed. With the others it is not executed.
menu.php:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="estilos.css">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="ajax.js"></script>
</head>
<body>
<?php
$restaurante=$_GET['restaurante'];
chdir(getcwd()."/".$restaurante);
$id_fichero= #fopen("menus.txt","r") or die("<B>El fichero no se pudo abrir");
?>
<?php
while (!feof($id_fichero))
{
if(($linea=trim(fgets($id_fichero,256),"\n\r"))!=false)
{
echo("<button type='button' class='accordion'>".$linea."</button>");
echo("<div class='panel'>");
$id_fichero2= #fopen($linea.".txt","r") or die("<B>El fichero no se pudo abrir");
while (!feof($id_fichero2))
{
if(($linea2=trim(fgets($id_fichero2,256),"\n\r"))!=false)
{
echo("<button type='button' id='plato' name='plato'>".$linea2."</button><br>");
echo("<input type='hidden' id='nombrePlato' name='nombrePlato' value='".$linea2."'>");
}
}
echo ("</div>");
}
}
?>
<div id="carrito">
</div>
<script src="collapsible.js"></script>
</body>
</html>
ajax.js
$(document).on('ready',function(){
$('#plato').click(function(){
alert("I'm here");
var url = "anadirCarrito.php";
$.ajax({
type: "POST",
url: url,
data: $('#platos').serialize(),
success: function(data)
{
$('#carrito').html(data);
}
});
});
});
Related
I am trying to learn how to use an API in Laravel and show json results in my view. This is a sample code I have made but nothing is showing. The API is with values because when I try it in Postman, it returns json results.
<html>
<head>
<meta charset="utf-8">
<title>Item Manager</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<div class="container">
<ul id="items" class="list-group">
</ul>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function (){
getItems();
function getItems(){
$.ajax({
url:'https://www.boredapi.com/api/activity'
}).done(function (items){
let output = '';
$.each(items, function (key, activity){
output += '<li class="list-group-item">' +
'<strong>${activity.text}</strong>${text.body}' +
'</li>'
});
});
}
});
</script>
</body>
</html>
I suspect it might have a problem with the key tags i am trying to call. I am trying to make the call from blade not needed from the controller.
json returned from the API:
{
"activity": "Write a list of things you are grateful for",
"type": "relaxation",
"participants": 1,
"price": 0,
"link": "",
"key": "2062010",
"accessibility": 0
}
Here is the completed code.
<html>
<head>
<meta charset="utf-8">
<title>Item Manager</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<div class="container">
<ul id="items" class="list-group">
</ul>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function (){
getItems();
var output = '';
function getItems(){
$.ajax({
url:'https://www.boredapi.com/api/activity'
}).done(function (items){
let output = '';
$.each(items, function (key, activity){
output += '<li class="list-group-item">' +
'<strong>'+key+'</strong>' + activity +
'</li>'
});
$("#items").append(output);
});
}
});
</script>
</body>
</html>
try adding this:
$.ajax({
url:'https://www.boredapi.com/api/activity',
type: "GET",
},
Also console.log() your result might be helpful.
I'm using summernote component and what I want to do is I want to stop the user from adding characters if the text area is pre filled, but I couldn't figure out how to stop typing event. I tried this and it worked for me
$(document).ready(function() {
$('#summernote').summernote({
callbacks: {
onKeydown: function(e) {
if(e.keyCode > 64)
{
e.target.blur();
}
}
}
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Summernote Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.min.js"></script>
</head>
<body>
<div class="container mt-3">
<div class="inner-container">
<div id="summernote1">
Hello Summernote ! please enter text.
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#summernote1').summernote({
callbacks: {
onKeydown: function(e) {
if(e.keyCode > 0)
{
e.preventDefault();
}
}
}
});
});
</script>
</body>
</html>
I simply added this code in my html page and it worked for me.
$(document).ready(function() {
$('#summernote1').summernote({
callbacks: {
onKeydown: function(e) {
if(e.keyCode > 0)
{
e.preventDefault();
}
}
}
});
});
I would like check the image whether existing on server file system and the file list was store into database. I want to make a ajax call to doing validation then return the result to screen with append effect. Here is my code, but don't work :( Please help me.
UPDATE: Code is workable, but it's not my expectation, because three thousand record with caused timeout and No append effect. thanks
Controller
public function getImageList()
{
$this->load->model('image_model');
$data['list'] = $this->image_model->get_image();
foreach ($data['list'] as $key){
$result[] = $this->imageValidation($key->filename);
}
header('Content-Type: application/x-json; charset=utf-8');
echo(json_encode($result));
}
private function imageValidation($imgfile)
{
if(!file_exists(LOCAL_IMG_TEMP.$imgfile))
{
return "<pre>". $imgfile." Not Find"."</pre>";
}
}
View
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<title></title>
</head>
<body>
<script>
function makeAjaxCall(){
$.ajax({
type: "POST",
url: "http://127.0.0.1:8888/index.php/ajax/getImageList",
cache: false,
dataType : "json",
success: function(data){
$("p").append(data);
}
});
}
</script>
</script>
<input type='button' id='PostBtn' value='Check Image' onclick='javascript:makeAjaxCall();' />
<p></p>
</body>
</html>
try to use file_exists()
check it
This is the code I am using to add a comment using Ajax call.
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile- 1.1.0-rc.1.min.css" />
<script type="text/javascript" charset="utf-8" src="js/cordova-1.5.0.js">
</script>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<script src="js/global.js" type="text/javascript"></script>
</head>
<script>
var msgId = window.localStorage.getItem("clickedId");
processLogInData = function(){
var comment = ($("#comment").val());
temp = 'messageId=' + msgId +'&';
temp += 'uniqueId=' + device.uuid + '&';
temp += 'comments=' + comment;
var s= global1 +"rest/Comment/createCommentBO?"+temp;
$.ajax({
url:global1 +"rest/Comment/createCommentBO?",
data: temp,
dataType: 'xml',
timeout: 10000,
async: false,
cache: false,
type: 'POST',
success: function(data){
if($(data).find("isException").text() == "false")
{
//alert('No Exceptions found');
onTrue();
}
else
{
onFalse();
}
},
error:function(XMLHttpRequest,textStatus, errorThrown) {
// alert("Error status :"+textStatus);
// alert("Error type :"+errorThrown);
alert("Error message :"+XMLHttpRequest.responseXML);
$("#messagelist").append( XMLHttpRequest.responseXML);
}
});
}
function onTrue(){
location.replace("comments.html");
}
function onFalse()
{
console.log("onFalse Method");
alert("Unable to create Comment!");
}
function cancel(){
location.replace("comments.html");
}
</script>
<body>
<div data-role="page" data-theme="a">
<div data-theme="a" data-role="header">
<img src="images/logo_header.png" alt="Orange"/>
</div>
<div data-role="content">
<form method="post" name="login" data-ajax="false">
<label for="textarea"><h3><u>Add Comment</u> : </h3></label>
<textarea cols="15" rows="15" name="textarea" id="comment"></textarea>
</form>
<div>
<div class="ui-block-a"><button type="submit" data-theme="d" onclick="cancel();" data-mini="true" data-icon="delete">Cancel</button></div>
<div class="ui-block-b"><button type="submit" data-theme="a" onclick="processLogInData();" data-mini="true" data-icon="check" >Submit</button></div>
</div>
</div>
</div>
</body>
When I enter special character as content as pass it to Ajax call I am getting an error :( Ajax call works fine with out any special characters...
Is there any way to encode the data before passing it to ajax call???Please help me on this...
Thanks in advance.
(1.)Either you should put your data into a form and serialize it and then send to the server
(2.)Second way is you can use the js inbuilt function encodeURIComponent().
i finished my app but when i test it on the other internet browsers, there was a problem
i will add my code. i couldnt see the error.as i said it works on opera but not in firefox :/
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2011/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '199193070140222', status: true, cookie: true, xfbml: true});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/tr_TR/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}
());
function lget(idd){
FB.api('/'+idd, function(response) {
document.getElementById(idd+"_a").innerHTML ="<a href='" + response.link + "' id='"+idd+"_und' style='color:#12566C;font-size:14px;' onmouseover=document.getElementById('"+idd+"').style.textDecoration=underline; onmouseout=document.getElementById('"+idd+"').style.textDecoration=none; target='_blank'><b>" + response.name + "</b></a>";
});
}
</script>
<div style="padding-left:6px;"><center>
<div id="525864081_a" ></div>
<script type="text/javascript">
lget(525864081);
</script>
<div id="534018674_a" ></div>
<script type="text/javascript">
lget(534018674);
</script>
</div>
</body>
</html>
You are loading the Facebook JS SDK in async mode and thus the FB object is not ready when you call it inside lget, the async loading occurs after your calls to lget and even after the onload event in Firefox.
Try not loading the code asynchronously and note that it is working fine
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2011/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({appId: '199193070140222', status: true, cookie: true, xfbml: true});
function lget(idd){
FB.api('/'+idd, function(response) {
document.getElementById(idd+"_a").innerHTML ="<a href='" + response.link + "' id='"+idd+"_und' style='color:#12566C;font-size:14px;' onmouseover=document.getElementById('"+idd+"').style.textDecoration=underline; onmouseout=document.getElementById('"+idd+"').style.textDecoration=none; target='_blank'><b>" + response.name + "</b></a>";
});
}
</script>
<div style="padding-left:6px;"><center>
<div id="525864081_a" ></div>
<script type="text/javascript">
lget(525864081);
</script>
<div id="534018674_a" ></div>
<script type="text/javascript">
lget(534018674);
</script>
</div>
</body>
</html>
if you want to see the execution order try something like this
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2011/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body onload="console.log('onload event'); false;">
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '199193070140222', status: true, cookie: true, xfbml: true});
console.log('FB object ready');
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/tr_TR/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
console.log('This executed first');
}
());
function lget(idd){
console.log('lget - ' + idd);
};
</script>
<div style="padding-left:6px;"><center>
<div id="525864081_a" ></div>
<script type="text/javascript">
lget(525864081);
</script>
<div id="534018674_a" ></div>
<script type="text/javascript">
lget(534018674);
</script>
</div>
</body>
</html>
this is the output you'll get in Firefox
This executed first
lget - 525864081
lget - 534018674
onload event
FB object ready