Laravel send data to mysql using ajax - javascript

I am stuck with creating a function in ajax that would take a value from variable "code2" and send it to controller which would send it to database. Problem I am getting all the time is :
Is This Really Working? Oh by the way: newLat: code2
So it kind of works however instead of newLat: code2 it should be newLat: (html code defined in variable code2) So how can I fix this?
JS:
$(function() {
$('.content-link').click(function(e) {
e.preventDefault();
$('#content-link2').load($(this).attr("href"), function() {
$('#content').draggable({
containment: "#content-link2",
scroll: false
});
});
});
return false;
});
var code2 = "";
document.getElementById("content-link2").onmousedown = function() {
mousedown();
};
document.getElementById("content-link2").onmouseup = function() {
mouseup();
};
function mousedown() {
code2 = document.getElementById("content-link2").innerHTML;
console.log(code2);
}
function mouseup() {
code2 = document.getElementById("content-link2").innerHTML;
console.log(code2);
}
AJAX:
function updateDatabase(newCode)
{
code2 = document.getElementById("content-link2").innerHTML;
console.log(code2);
// make an ajax request to a PHP file
// on our site that will update the database
// pass in our lat/lng as parameters
$.post('http://localhost/template', {
_token: $('meta[name=csrf-token]').attr('content'),
newCode: ("code2"),
})
.done(function(code2) {
alert(code2);
})
.fail(function() {
alert("error");
});
}
Route:
Route::group(['middleware' => ['web']], function () {
Route::get('home', 'BuilderController#homepage');
Route::get('template', 'BuilderController#templates');
Route::post('template', 'BuilderController#postDB');
Route::get('logout', 'BuilderController#getLogout');
});
Controller:
class BuilderController extends Controller
{
function templates()
{
$templates = Template::all();
return view('layouts/template', ['templates' => $templates]);
$id = $templates->id;
}
function homepage()
{
return view('layouts/home');
}
public function getlogout()
{
\Auth::logout();
return redirect('/home');
}
public function postDB(Request $request) {
$newLat = $request->input('newCode');
return "Is This Really Working? Oh by the way: newLat: $newLat";
return redirect('layouts/template', ['templates' => $templates]);
}
}
Blade:
#extends('layouts.master') #section('title', 'Website Builder') #section('content')
<div class="container template_class ">
#foreach ($templates as $template)
<a class="content-link" href="{{ asset($template->file )}}">
<img src="{{ asset($template->image )}}"/>
</a> #endforeach
</div>
<div class="features form-group">
<input class="filestyle form-control margin images" data-input="false" type="file" data-buttonText="Upload Logo" data-size="sm" data-badge="false" onchange="readURL(this);" />
<button onClick=" updateDatabase(this);"</button>
<script>
$( function() {
$( document ).tooltip();
} );
</script>
<button style="display: none" class="form-control margin btn btn-primary" id="showColor">Show Colors</button>
<button style="display: none" class="form-control margin btn btn-primary" id="hideColor">Hide Colors</button>
<input title="Choose a color and then click on any box" style="display: none" class="btn btn-default form-control margin" type="color" id="colorChoice">
<a style="display: none" href="#" class="btn btn-default form-control margin" id="cp4">Background</a>
<button style="display: none" onclick="$('#fonts1').bfhfonts({font: 'Arial'})" id="fontsShow" class="btn btn-primary form-control margin">Load Fonts</button>
<button style="display: none" class="btn btn-primary form-control margin" id="fontsHide">Hide Fonts</button>
<select title="Choose a font and then click on any box" style="display: none" id="fonts1" class="form-control margin"></select>
<button style="display: none" onclick="$('#googlefonts1').bfhgooglefonts({font: 'Lato'})" id="googleShow" class="btn btn-primary form-control margin">Google fonts</button>
<button style="display: none" class="btn btn-primary form-control margin" id="googleHide">Hide Google</button>
<select title="Choose a font and then click on any box" style="display: none" id="googlefonts1" class="form-control margin"></select>
<button style="display: none" onclick="$('#fontsizes1').bfhfontsizes({fontsize: '12'})" id="sizeShow" class="btn btn-primary form-control margin">Load font size</button>
<button style="display: none" class="btn btn-primary form-control margin" id="sizeHide">Hide font size</button>
<select title="Choose a font size and then click on any box" style="display: none" id="fontsizes1" class="form-control margin"></select>
<button style="display: none" class="form-control margin btn btn-default" id="finishEdit">Done</button>
<button class="form-control margin btn btn-default" id="startEdit">Edit</button>
<button type="button" class="form-control margin btn btn-warning" id="getRequest">Save</button>
</div>
<div id="content-link2"></div>
</body>
<link href="{{asset('css/bootstrap-colorpicker.min.css')}}" rel="stylesheet" type="text/css">
<link href="{{asset('css/bootstrap-formhelpers.min.css')}}" rel="stylesheet" type="text/css">
<link href="{{asset ('//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css')}}" rel="stylesheet" type="text/css">
<script type="text/javascript" src="{!! asset('js/bootstrap-colorpicker.min.js') !!}">
</script>
<script type="text/javascript" src="{!! asset('js/bootstrap-formhelpers.js') !!}">
</script>
<script type="text/javascript" src="{!! asset('js/template.js') !!}"></script>
<script type="text/javascript" src="{!! asset('js/bootstrap-filestyle.min.js') !!}">
</script>
</html>
#endsection

Check /path/to/project/root/storage/logs/laravel.log for what Internal Server Error is occurring. If there is no log file make sure APP_DEBUG in /path/to/project/root/.env is set to true.

Related

Detect button click on form item

I have a list of store items. Each item is showing its values as a form.
<?php
if($statement->execute())
{
$result = $statement->fetchAll();
$output = '';
foreach($result as $row)
{
$output .= '
<div class="col-md-3" style="margin-top:12px;">
<div class="item-content" align="center">
<div class="img-container">
<img src="../administrar/application/admin/productos/'.$row["image"].'" class="img-responsive" /><br />
<h4 class="text-info">'.$row["name"].'</h4>
<h4 class="text-danger">$ '.$row["price"] .'</h4>
<input type="text" name="quantity" id="quantity' . $row["id"] .'" class="form-control" value="1" style="text-align:right;"/>
<input type="hidden" name="hidden_name" id="name'.$row["id"].'" value="'.$row["name"].'" />
<input type="hidden" name="hidden_price" id="price'.$row["id"].'" value="'.$row["price"].'" />
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-danger btn-number" name="restar" id="'.$row["id"].'" " >
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<span class="input-group-btn">
<button type="button" class="btn btn-success btn-number" name="sumar" id="sumar"">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
<input type="button" name="add_to_cart" id="'.$row["id"].'" style="margin-top:5px;" class="btn btn-success form-control add_to_cart" value="Add to Cart" />
</div>
</div>
</div>
';
}
}
?>
I need to identify when the user clicks on button 'restar' from a certain form item.
This is my current script, but it doesn't launch the expected alert.
<script type="text/javascript">
$(document).ready(function(){
var product_id = $(this).attr("id");
$('#restar'+'product_id+').on('click', function(event) {
alert("ssssspp2");
});
});
</script>
Use class for describing similar objects, e.g.:
$('.js-some-btn').click(function() {
console.log("I'm button");
console.log("My id is " + $(this).attr('id'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-success btn-number js-some-btn" name="sumar1" id="id1">btn 1</button>
<button type="button" class="btn btn-success btn-number js-some-btn" name="sumar2" id="id2">btn 2</button>
This approach allows you to write only one click handler for all buttons with provided class.

Reducing code and using .off after using a feature

There are two problems that I have with my Javascript, first I think function is very long and I would like to find out if there is a way to reduce it, the problem is it needs to be working together as all of this Javascript is allowing to edit a page.
2nd problem is that when I change font and/or choose font size it will change both things, so for example if I change font-size in one div and then I want to change font-family for other it will change font-size and font-family, so what should I do so that after each edit it turns off click function but if pressed again it will add it back so that feature can be used again, so basically only one feature can be used at the time.
$(function() {
$('#cp4').colorpicker().on('changeColor', function(e) {
$('#content-link2')[0].style.backgroundColor = e.color.toString(
'rgba');
});
});
$(document).ready(function() {
$("#startEdit").click(function () {
if ($("#startEdit").on('click')) {
$(document).ready(function() {
var font;
$("#fonts1").on("change", function(){
font = $(this).val();
});
$("#content-link2").on("click", "*", function() {
$(this).css('font-family',font);
});
});
$(document).ready(function() {
var font;
$("#googlefonts1").on("change", function(){
font = $(this).val();
});
$("#content-link2").on("click", "*", function() {
$(this).css('font-family',font);
});
});
$(document).ready(function() {
var fsize;
$("#fontsizes1").on("change", function(){
fsize = $(this).val();
});
$("#content-link2").on("click", "*", function() {
$(this).css('font-size',fsize);
});
});
$(document).ready(function() {
var color;
$("#colorChoice").on('input', function(){
color = $(this).val();
});
$('#content-link2').on('click', '*', function() {
$(this).css('background',color);
});
});
} else {
$( "#content-link2" ).off( "click" );
}
});
});
<div class="features form-group">
<input class="filestyle form-control margin images" data-input="false" type="file" data-buttonText="Upload Logo"
data-size="sm" data-badge="false" onchange="readURL(this);" />
<!--<button onClick=" updateDatabase(this);"</button>-->
<button style="display: none" class="form-control margin btn btn-primary" id="showColor">Show Colors</button>
<button style="display: none" class="form-control margin btn btn-primary" id="hideColor">Hide Colors</button>
<input style="display: none" class="btn btn-default form-control margin" type="color" id="colorChoice">
<a style="display: none" href="#" class="btn btn-default form-control margin" id="cp4">Background</a>
<button style="display: none" onclick="$('#fonts1').bfhfonts({font: 'Arial'})" id="fontsShow" class="btn btn-primary form-control margin">Load Fonts</button>
<button style="display: none" class="btn btn-primary form-control margin" id="fontsHide">Hide Fonts</button>
<select style="display: none" data-font="Arial" id="fonts1" class="form-control margin"></select>
<button style="display: none" onclick="$('#googlefonts1').bfhgooglefonts({font: 'Lato'})" id="googleShow" class="btn btn-primary form-control margin">Google fonts</button>
<button style="display: none" class="btn btn-primary form-control margin" id="googleHide">Hide Google</button>
<select style="display: none" id="googlefonts1" class="form-control margin"></select>
<button style="display: none" onclick="$('#fontsizes1').bfhfontsizes({fontsize: '12'})" id="sizeShow" class="btn btn-primary form-control margin">Load font size</button>
<button style="display: none" class="btn btn-primary form-control margin" id="sizeHide">Hide font size</button>
<select style="display: none" id="fontsizes1" class="form-control margin"></select>
<button style="display: none" class="form-control margin btn btn-default" id="finishEdit">Done</button>
<button class="form-control margin btn btn-default" id="startEdit">Edit</button>
</div>

PHP variable calculation

I am quite a beginner in PHP and have created a calculator and I am posting the calculation as a variable(q) to a php file and want to make the calculation and echo it back to the box as the result.
Going through the php function library I could not locate a function the can help me with that like 'eval' in JavaScript.
The reason I am not using 'eval' is that the calculation must happen on the server side.
Any help will be greatly appreciated.
JAVASCRIPT
$('.equal').click(function(){
$.post('calculator.php',{q: $('.result').val()} ,function(a){
$('.result').val(a).show();
});
});
PHP
<?php
$_POST[q];
?>
HTML
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>calculator</title>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container col-sm-2 text-center" id="calc">
<div class="row">
<form name="calc">
<input type="text" class="screen text-right result" name="result" placeholder="0" readonly>
</form>
</div>
<!-- First row -->
<div class = "row">
<button class="btn btn-primary number" data-key="1" type="button">1</button>
<button class="btn btn-primary number" data-key="2" type="button">2</button>
<button class="btn btn-primary number" data-key="3" type="button">3</button>
<button class="btn btn-danger" data-key="reset" type="button">C</button>
</div>
<!-- Second row -->
<div class = "row">
<button class="btn btn-primary number" data-key="4" type="button">4</button>
<button class="btn btn-primary number" data-key="5" type="button">5</button>
<button class="btn btn-primary number" data-key="6" type="button">6</button>
<button class="btn btn-warning number" data-key="+" type="button">+</button>
</div>
<!-- Third row -->
<div class = "row">
<button class="btn btn-primary number" data-key="7" type="button">7</button>
<button class="btn btn-primary number" data-key="8" type="button">8</button>
<button class="btn btn-primary number" data-key="9" type="button">9</button>
<button class="btn btn-warning number" data-key="-" type="button">-</button>
</div>
<!-- Fourth row-->
<div class = "row">
<button class="btn btn-primary number" data-key="0" type="button">0</button>
<button class="btn btn-primary number" data-key="." type="button">.</button>
<button class="btn btn-warning number" data-key="/" type="button">/</button>
<button class="btn btn-warning number" data-key="*" type="button">*</button>
</div>
<div class="row">
<button class="btn btn-success btn-lg equal" type="button">=</button>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src="js/calculator.js"></script>
<!-- jquery fade in function -->
<script>
$( "#calc" ).hide( 500 ).delay( 1500 ).show( 300 );
</script>
</body>
</html>
You can find a list of related PHP functions here:http://www.w3schools.com/php/php_ref_math.asp
Callback functions might be helpful, here is some documentation:http://php.net/manual/en/language.types.callable.php
An example of a callback function:
<?php
// Just an example, two numbers passed with GET
// $calc_choice will be add, subtract, etc.
$num_one = $_GET['number_one']);
$num_two = $_GET['number_two']);
$calc_choice = $_GET['calculation'];
// passing these variables into a callback function
customEval($num_one, $num_two, $calc_choice);
// This is abstraction
// $callback is going to be a function we pass
// You can name $numOne and $numTwo anything you would like
function customEval($numOne, $numTwo, $callback){
$answer = $callback($numOne, $numTwo);
echo '$answer';
}
//This will add two numbers together and return them
//What gets returns is what will be echoed in our callback function
function add($numOne, $numTwo){
return $numOne + $numTwo;
}
// You can make as many as you like
function subtract($numOne, $numTwo){
return $numOne - $numTwo;
}
?>
In use:
$num_one = 5;
$num_two = 10;
$calc_choice = "add";
// our function would be doing this behind the scene
customEval(5, 10, "add"){
// Because our add function returns 15 in this case
echo '15'
}

Copy attribute value of link to input value onclick

I want to copy the attribute value val="ok" of my link to an input field in my bootstrap modal :
$('#link').on('click', function() {
var x = document.getElementById("link").getAttribute("val");
$("#mail").find(".compose").value = x;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a data-toggle="modal" data-target="#mail" id="link" val="ok" class="btn btn-warning btn-flat" title="Mail"><i class="fa fa-envelope"></i>Link</a>
<input class="form-control" placeholder="To:" class="compose" value="" />
You should create custom data attribute data-val for example and then you can access it like yourElem.dataset.val
var a = document.getElementById('link');
a.addEventListener('click', function() {
var val = a.dataset.val;
document.querySelector('.compose').value = val;
})
<a data-toggle="modal" data-target="#mail" id="link" data-val="ok" class="btn btn-warning btn-flat" title="Mail"><i class="fa fa-envelope"></i>Link</a>
<input class="form-control compose" placeholder="To:" value="" />
You can also use JQuery use data()
$('a').click(function() {
$('input').val($(this).data('val'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a data-toggle="modal" data-target="#mail" id="link" data-val="ok" class="btn btn-warning btn-flat" title="Mail"><i class="fa fa-envelope"></i>Link</a>
<input class="form-control compose" placeholder="To:" value="" />

Value of Input is empty after button click

I use bootstrap modal dialog.
My modal:
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Hello</h4>
</div>
<div class="modal-body">
Your name:
<input id="colorData" name="colorData" type="hidden" value=""/>
<input id="nameData" name="nameData" class="input-lg" type="text" value=""/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="postAnswer" type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
I have buttons:
<div align="center" style="margin-bottom: 20px">
<button value="all" type="button" class="btn btn-lg btn-default">All</button>
<button value="green" type="button" class="btn btn-lg btn-success">Green</button>
<button value="blue" type="button" class="btn btn-lg btn-info">Blue</button>
</div>
And i have script:
<script type="text/javascript">
$(document).ready(function () {
$(".btn").click(function () {
var color = $(this).val();
$(".modal-body #colorData").val(color);
// $('#colorData').val() - is not empty
$("#myModal").modal('show');
});
$('#postAnswer').click(function (e) {
e.preventDefault();
$.ajax({
// $('#colorData').val() is empty
// $('#nameData').val() is not empty (I write this on dialog)
url: "#Url.Action("WriteAnswer", "Home")?name=" + $('#nameData').val() + "&color=" + $('#colorData').val(),
type: 'POST',
data: $('#nameData').serialize(),
success: function (data) {
//alert('successfully submitted');
}
});
$("#myModal").modal('hide');
});
});
</script>
After call function $(".btn").click element $('#colorData').val() is not empty.But! If I click button on modal then post empty value and value of input colorData is empty. Why? I wanna post data to controller, but value is reset. Sorry for my English.
You <button> element with id="postAnswer" also has class="btn", so when you click it, the $(".btn").click(function () { method is also called and var color = $(this).val(); returns null (because that button does not have a value attribute.
To handle this correctly, give an additional class name to the 3 'color' buttons (say)
<button value="all" type="button" class="color btn btn-lg btn-default">All</button>
<button value="green" type="button" class="color btn btn-lg btn-success">Green</button>
<button value="blue" type="button" class="color btn btn-lg btn-info">Blue</button>
and change the first script to
$(".color").click(function () {
var color = $(this).val();
$(".modal-body #colorData").val(color);
$("#myModal").modal('show');
});

Categories