I am now trying to use javascripts in my project.Can somebody please explain how exactly, can we make javascripts working on a Laravel project ?
all the code works except for the js party
it does not appear on the screen
Thanks
Here's my code :
checkout.blade.php
#extends('layouts.default')
#section('content')
//code
#endsection
#section('extra-js')
<script src="https://js.braintreegateway.com/web/dropin/1.13.0/js/dropin.min.js"></script>
<script>
(function(){
var form = document.querySelector('#paypal-payment-form');
var client_token = "{{ $paypalToken }}";
braintree.dropin.create({
authorization: client_token,
selector: '#bt-dropin',
paypal: {
flow: 'vault'
}
}, function (createErr, instance) {
if (createErr) {
console.log('Create Error', createErr);
return;
}
// remove credit card option
var elem = document.querySelector('.braintree-option__card');
elem.parentNode.removeChild(elem);
form.addEventListener('submit', function (event) {
event.preventDefault();
instance.requestPaymentMethod(function (err, payload) {
if (err) {
console.log('Request Payment Method Error', err);
return;
}
// Add the nonce to the form and submit
document.querySelector('#nonce').value = payload.nonce;
form.submit();
});
});
});
})();
</script>
#endsection
and this is a part of my default.blade.php
default.blade.php
#yield('content')
#yield('extra-js')
<script src="{{ asset('js/app.js') }}"></script>
Related
I have a custom form that makes a few requests to a database to verify the user. I noticed that if I have a single google account it works fine but it doesn't with multiple. The other thing I noticed is that the script doesn't throw any error it just doesn't communicate back the result from the custom form.
This is how my custom forms look like:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div class="container select-client">
<div class="client">Client</div>
<select class="client-select">
<option>Select Client</option>
<!-- ...options -->
</select>
<div class="market">Market</div>
<select class="market-select">
<option>Select Market</option>
<!-- ...options -->
</select>
<div class="error-message"></div>
<button class="button" id="select-button" onclick="handleSelect()">Select</button>
</div>
<script>
// ...code to validate the user
function handleSelect() {
var _client = clients.find(
(client) => client.id === parseInt(selectedClient)
);
var _market = markets.find(
(market) => market.id === parseInt(selectedMarkets)
);
if (!_client && !_market) {
return;
}
if (!_client) {
errorMessageClientMarket.innerHTML = 'Please select client';
return;
}
if (!_market) {
errorMessageClientMarket.innerHTML = 'Please select market';
return;
}
google.script.run
.withSuccessHandler()
.loginData({ token, market: _market, client: _client, user: userInfo, platform });
google.script.host.close();
}
</script>
</body>
</html>
This is how I create the custom form using app script
const loginForm = () => {
const html = HtmlService.createHtmlOutputFromFile('loginFormHtml')
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
.setWidth(600)
.setHeight(600);
const ui = SpreadsheetApp.getUi();
ui.showModalDialog(html, `Login`);
};
This is the callback function:
const loginData = (data) => { // <--- this function is ignored when a the users has multiple google accounts
console.log('LOGIN FORM');
const { token, market, user, client, platform } = data;
UserProperties.setProperty('token', token);
UserProperties.setProperty('userId', user.id);
UserProperties.setProperty('clientId', client.id);
UserProperties.setProperty('clientName', client.name);
UserProperties.setProperty('marketId', market.id);
UserProperties.setProperty('marketName', market.code_name);
UserProperties.setProperty('username', `${user.first_name} ${user.last_name}`);
UserProperties.setProperty('userEmailAddress', user.email);
UserProperties.setProperty('platform', platform);
const info = UserProperties.getProperties();
console.log('info ---> ', info)
const ui = SpreadsheetApp.getUi();
getMenu(true);
ui.alert('Logged in Successfully');
};
Does anyone know if there's a away to fix this?
I have created a Blog website and I want to add the functionality to delete a post object while clicking on the Delete button without rendering a separate HTML page rather using the confirm method in JavaScript.
And I have no idea to complete that.
i think you use a .remove method in model object or field
model.field.remove(model_object)
and use this for javascript confirm method
<button onclick="myFunction()">DELETE</button>
<p id="demo"></p>
<script>
function myFunction() {
var txt;
var r = confirm("Press a button!");
if (r == true) {
txt = "You pressed OK!";
} else {
txt = "You pressed Cancel!";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
use this javascript code inside template where the delete button present
i Think this will help you
If you want to delete an object without reload the webpage, you will need to use ajax.
You can define a delete url for each post same as you generate an absolute url. It is easy to do. Here is my approach using jquery ajax and function based django view.
#models.py
class MyModel(models.Model):
def delete_url(self):
return reverse('delete-model', kwargs={'pk': self.id}
#views
def delete_model(request, pk):
item = get_object_or_404(Model, id=pk)
if item:
ref = item.id
item.delete()
data = {'ref': ref, 'message': 'Object with id %s has been deleted' %ref}
return JsonResponse(data)
#urls.py
path('delete/<pk>/', delete_model, name='delete-model')
$(document).ready(function () {
$(".comfirm-delete").click(function (e) {
e.preventDefault();
var proceed = confirm('Proceed with deletion');
if (proceed == true) {
var endpoint = $(this).attr('data-url')
$.ajax({
method: 'GET',
url: endpoint,
success: function (data) {
$.notify({
// options
title: '<b>Message<b> ',
message: data.message,
}, {
// settings
type: 'success',
delay: 3000,
allow_dismiss: true,
});
$("#item" + data.ref).hide(1000)
},
error: function (error_data) {
console.log(error_data);
$.notify({
title: '<b>Error</b><br>',
message: 'Sorry, something gone wrong'
}, {
type: 'danger',
delay: 3000,
})
}
})
} else {
e.preventDefault();
$.notify({
title: '<b>Action cancelled</b><br>',
message: 'This one is not <span class="text-danger">Deleted</span>'
}, {
type: 'info',
delay: 3000,
})
}
})
})
.comfirm-delete {
color: red;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-notify/0.2.0/css/bootstrap-notify.css" integrity="sha256-ibUTW+jDj+F8d1T1KZ4DOujRmVTFfvMKL9y14QgEaPQ=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-notify/0.2.0/js/bootstrap-notify.min.js"></script>
<table>
<tbody>
{% for obj in objects %}
<tr id="item{{obj.id}}">
<td>{{obj.info}}</td>
<td data-url="{{obj.delete_url}}" class="comfirm-delete">Delete</td>
</tr>
{% endfor %}
</tbody>
</table>
I'm trying to build a simple website builder that allow users to save their generated html created with Vue component and see it at a certain URL.
Because of it I have to store and retrieve the html generated but I have some problems with retrieving of the code. Here is my step:
When user click "save" this function is fired, that select the portion of HTML that include the "website" built by the user:
saveBuilders: function () {
let pages = [];
let builders = $('[id*="builder-container-"]');
$.each(builders, function (key, builder) {
let singleElem = $(builder).attr('id');
pages.push(clearElement.html());
});
this.storeInDb(pages);
},
storeInDb: function (pagesList) {
axios.post("/landing-page/store", {
name: this.name,
description: this.description,
html: pagesList
})
.then(function (response) {
console.log('Cool');
})
.catch(function (error) {
console.log('ERROR', error.response);
});
},
The Axios request is handled by this function that store the html portion in DB
public function store(Request $request)
{
$data = $request->all();
$html = $data['html'];
$landingPage = new LandingPage();
$landingPage->name = $data['name'];
$landingPage->description = $data['description'];
$landingPage->user_id = Auth::user()->id;
$landingPage->html = json_encode($html);
try {
$landingPage->save();
return 'true';
} catch (exception $e) {
return $e;
}
}
Now when the user visit a certain URL, for keep thing simple suppose is example.it/website/0, this function is fired:
public function show($landing_id)
{
try {
$landingPage = LandingPage::where([
'id' => $landing_id,
'user_id' => Auth::user()->id
])->first();
} catch (\Exception $e) {
$landingPage = null;
}
if ($landingPage != null) {
//GET THE HTML
$page = json_decode($landingPage->html);
return view('landing_page.show')->with('page', $page)
} else {
abort(404, 'Error');
}
}
And this the blade where I'm trying to re-create the Vue.js environment
<body>
<span id="countdown"></span>
<div id="builder-pagina">
<builder>
{!! $page !!}}
</builder>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="{{asset('js/landing_page/app.js')}}"></script>
</body>
</html>
I thought that having the html generated by vue similar to something like that into the DB...
<div data-v-29b64d26="" >
<h1>This piece of code was stored into my DB</h1>
<div data-v-56f62f0a="">
</div>
</div>
...you could create everything working simply by pasting the code and by using the same js file used for compiling vue.js.
I've tried pass the entire code by props but is not working. Also tried with slot. Any suggestions?
This is my logout script for linked in account. But its logged out only my site login details not logged out opened linkedin account. Can you anybody find my issue?
<button onclick="javascript:onLoad();">Logout In LinkedIn</button>
Script:
<script type="text/javascript" src="http://platform.linkedin.com/in.js">
api_key: mykey
authorize: true
onLoad: onLoad
</script>
<script type="text/javascript">
function onLoad() {
try {
IN.User.logout();
} catch (err) {
console.log(err);
}
setTimeout("goToHome()", 100);
}
function goToHome() {
document.location.href = "https://www.linkedin.com/secure/login?session_full_logout=&trk=hb_signout";
location.href="logout";
}
</script>
I want to connect to Dropbox using Javascript. This is part of a lab that I'm doing.
I have the code below, and I have checked it for syntax errors and haven't found any. However, it doesn't display the buttons I expected.
Here is a JSFiddle demonstrating the code as it is now: https://jsfiddle.net/gv19a3mw/15/
And here is a Fiddle showing the layout I expected (with no Javascript executing): https://jsfiddle.net/gv19a3mw/12/
Can anyone advise me why the buttons are not displaying when my Javascript is executing?
<html>
<head>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="https://www.dropbox.com/static/api/dropbox-datastores-1.2-latest.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#w_area').hide();
$('#r_area').hide();
// Create a dropbox client
var client = new Dropbox.client({key: "pbio1kig5q73lli"});
// Authenticate the client
client.authenticate({interactive: false}, function(error, client) {
if (error) {
alert("Authentication error: " + error);
}
});
// Show w_area if login ok
// alert(client.isAuthenticated());
if (client.isAuthenticated()) {
$('#w_area').show();
};
// Write to myfile.txt in Dropbox
$('#w_button').click(function() {
client.authenticate({interactive: true}, function(error, client) {
if (error) {
alert("Authentication error: " + error);
}
else {
client.writeFile("myfile.txt", $('textarea#w_content').val(), function(error) {
if (error) {
alert("Write error: " + error);
}
else {
alert("File written successfully!");
$('#r_area').show();
}
});
}
});
});
// Read from myfile.txt from Dropbox
$('#r_button').click(function() {
client.authenticate({interactive: true}, function(error, client) {
if (error) {
alert("Authentication error: " + error);
}
else {
client.readFile("myfile.txt", {}, function(error, data) {
if (error) {
alert("Read error: " + error);
}
else {
alert("File read successfully!");
$('textarea#r_content').val(data);
}
});
}
});
});
})
</script>
</script>
</head>
<body>
<h3>File Read/Write in Dropbox</h3>
<div id="w_area">
<textarea id="w_content" cols="50" rows="5">
</textarea>
<button id="w_button">
Write to File in Dropbox
</button>
<br /><br />
</div>
<div id="r_area">
<textarea id="r_content" cols="50" rows="5">
</textarea>
<button id="r_button">
Read from File in Dropbox
</button>
<br /><br />
</div>
</body>
</html>
Remove buttons from element div#w_area and div#r_area
$(document).ready(function() {
$('#w_area').hide();
$('#r_area').hide();
Because of this code your buttons are nor visible.