hi I'm a beginner in Laravel I want to use sweetalert2 in my Laravel website but it did not display in the view
I use branch dist from Github
so in my **master_layout.blade.php** this is my code:
<!DOCTYPE html>
<html>
<head>
<meta charest="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>#yield('title')</title>
<link href="https://fonts.googleapis.com/css?family=Cairo&display=swap" rel="stylesheet">
<link href="css/all.min.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="css/jquery-ui.min.css" rel="stylesheet" type="text/css">
<link href="css/jquery-ui.theme.min.css" rel="stylesheet" type="text/css">
**<link href="css/sweetalert2.min.css" rel="stylesheet" type="text/css">**
<link href="css/main_style.css" rel="stylesheet" type="text/css">
<link href="css/responsive.css" rel="stylesheet" type="text/css">
<link rel="icon" type="image/png" href="img/favorite-icon.png" />
</head>
<body>
#include('include/Navbar')
<main>
#include('include/Sidebar')
#include('include/HamburgerSidebar')
<div class="container">
#yield('Content')
</div>
</main>
<script src="Js/jquery-3.4.1.min.js"></script>
<script src="Js/popper.min.js"></script>
<script src="Js/bootstrap.min.js"></script>
<script src="Js/jquery-ui.min.js"></script>
**<script src="Js/sweetalert2.all.min.js"></script>**
<script src="Js/main-JQ.js"></script>
</body>
</html>
and in my controller store:
public function store(Request $request)
{
$request_order=$request->section_order;
if(empty($request_order)){
$order_last = Section::latest('section_order')->get();
if(empty($order_last)){
$request_order=1;
}else{
$request_order=$order_last[0]['section_order']+1;
}
}
$request->validate([
'section_name' => ['required','min:3'],
'section_pic' =>['image']
]);
$image = $request->file('section_pic');
if ( $image === null) {
$image_name = 'default_img.jpg';
}else{
$image_name = rand(1, 20) . time() . $image->getClientOriginalName();
$image->move(public_path('img'),$image_name);
}
$input_data = array(
'section_order' => $request_order,
'section_name' => $request->section_name,
'section_pic' => $image_name
);
Section::create($input_data);
return redirect('/Sections')->withSuccess('Success message');
}
and in my view:
#if(Session::has('success'))
<script type="text/javascript">
Swal.fire(
'Good job!',
'Successfully Saved!',
'success'
);
</script>
#endif
the store function works fine but not display sweetalert in my view
and I put all CSS and js file and images folder in public folder is that correct or not?
thanks to # Joseph his comment solve my problem
i use window.onload and it work fine
#if(Session::has('success'))
<script type="text/javascript">
function massge() {
Swal.fire(
'Good job!',
'Successfully Saved!',
'success'
);
}
window.onload = massge;
</script>
#endif
Controller :
session()->flash("success","Success Message");
return redirect('/Sections');
Blade File
#if(session()->has('success'))
<script type="text/javascript">
$(function () {
swal("Deleted!", "Data has been Deleted.", "success"),
swal({
title: {{ session()->get('success') }},
text: "Your Custom or Dynamic SUccess message put here",
type: "success"})
});
</script>
#endif
Related
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 want to use Laravel Passport in my project, I have followed this tutorial of Laravel Passport https://laravel.com/docs/5.3/passport.
After following this tutorial, I am getting Uncaught ReferenceError: require is not defined error.
Please have a look into my files :
gulpfile.js
var elixir = require('laravel-elixir');
require('laravel-elixir-webpack');
elixir(function(mix) {
mix.scripts('app.js');
mix.styles([
'bootstrap.min.css',
'font-awesome.min.css',
'gentelella.min.css'
],'public/css/app.css');
});
resource/assets/js/app.js
Vue.component(
'passport-clients',
require('./components/passport/Clients.vue')
);
Vue.component(
'passport-authorized-clients',
require('./components/passport/AuthorizedClients.vue')
);
Vue.component(
'passport-personal-access-tokens',
require('./components/passport/PersonalAccessTokens.vue')
);
const app = new Vue({
el: '#manage-passport'
});
home.blade.php
#extends('layouts.blank')
#section('content')
<div class="container" id="manage-passport">
<!-- let people make clients -->
<passport-clients></passport-clients>
<!-- list of clients people have authorized to access our account -->
<passport-authorized-clients></passport-authorized-clients>
<!-- make it simple to generate a token right in the UI to play with -->
<passport-personal-access-tokens></passport-personal-access-tokens>
</div>
#stop
blank.blade.php
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Passport! | </title>
<meta name="token" id="token" value="{{ csrf_token() }}">
<!-- Styles -->
<link href="/css/app.css" rel="stylesheet">
</head>
<body class="nav-md">
<div class="container body">
<div class="main_container">
#yield('content')
</div>
</div>
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="js/gentelella.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.3/vue-resource.min.js"></script>
<script type="text/javascript" src="/js/app.js"></script>
#stack('scripts')
</body>
Maybe the problem in the absence of token?
blank.blade.php
<script>
window.Laravel = {!! json_encode(['csrfToken' => csrf_token()]) !!}
</script>
also, check whether the transmitted parameters such as token
Vue.http.interceptors.push((request, next) => {
request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);
next();
});
Current scheduler working with google calendar. But not mobile friendly.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title></title>
</head>
<script src="./codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="./codebase/dhtmlxscheduler.css" type="text/css" media="screen" title="no title" charset="utf-8">
<style type="text/css" media="screen">
html, body{
margin:0px;
padding:0px;
height:100%;
overflow:hidden;
}
</style>
<script type="text/javascript" charset="utf-8">
function init() {
scheduler.config.xml_date="%Y-%m-%d %H:%i";
scheduler.init('scheduler_here',new Date(2013, 7, 5),"week");
scheduler.load("./data.php", "json");
var dp = new dataProcessor("./data.php");
dp.init(scheduler);
dp.setTransactionMode("POST", false);
}
</script>
<body onload="init();">
<div id="scheduler_here"></div>
</div>
</body>
Current Scheduler that is mobile friendly but won't get events from google calendar.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">
<script src="cal/webix.js" type="text/javascript"></script>
<script src="cal/scheduler/scheduler.js" type="text/javascript"> </script>
<link rel="stylesheet" type="text/css" href="cal/skins/touch.css">
<link rel="stylesheet" type="text/css" href="cal/scheduler/scheduler.css">
<title></title>
<script type="text/javascript" charset="utf-8">
webix.ready(function() {
scheduler.config.hour_date = "%g:%i%a";
scheduler.config.readonly = true;
webix.ui.fullScreen();
webix.ui({
view: "scheduler",
id: "scheduler"
});
$$("scheduler").load("data.json", "json");
});
</script>
</head>
<body>
<div id="scheduler"></div>
</body>
</html>
Can't seem to figure out how to merge them or create a new code that has the css to be mobile friendly but still get data from a google calendar.
In case of json data source, both desktop and mobile scheduler must be able to share the same data source, so code like next must work
$$("scheduler").load("data.php", "json");
I am making an ajax call to a controler from a view like this
jQuery.ajax({
type: "POST",
url: "index.php?option=com_virtuemart&view=participate&task=participate_request&virtuemart_product_id=2&virtuemart_category_id=5&tmpl=component&Itemid=101",
data: { name: "John", location: "Boston" }
}).done(function( msg ) {
alert( "Data Saved: " + msg );
});
and in the controler
I have a task method declared like this
public function participate_request(){
echo 'test';
return false;
}
And I get this response
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="el-gr" lang="el-gr" >
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="generator" content="Joomla! - Open Source Content Management" />
<title>offer_e_shop_1</title>
<link rel="stylesheet" href="/offer_e_shop_1/components/com_virtuemart/assets//css/facebox.css" type="text/css" />
<link rel="stylesheet" href="/offer_e_shop_1/components/com_virtuemart/assets//css/vmsite-ltr.css" type="text/css" />
<script src="/offer_e_shop_1/components/com_virtuemart/assets/js/jquery.min.js" type="text/javascript"></script>
<script src="/offer_e_shop_1/components/com_virtuemart/assets//js/jquery.noConflict.js" type="text/javascript"></script>
<script src="/offer_e_shop_1/components/com_virtuemart/assets//js/jquery-ui-timepicker-addon.js" type="text/javascript"></script>
<script src="/offer_e_shop_1/components/com_virtuemart/assets//js/jquery-ui-sliderAccess.js" type="text/javascript"></script>
<script src="/offer_e_shop_1/components/com_virtuemart/assets//js/vmsite.js" type="text/javascript"></script>
<script src="/offer_e_shop_1/components/com_virtuemart/assets//js/facebox.js" type="text/javascript"></script>
<script src="/offer_e_shop_1/components/com_virtuemart/assets//js/vmprices.js" type="text/javascript"></script>
<script type="text/javascript">
vmSiteurl = 'http://localhost/offer_e_shop_1/' ;
vmLang = ""
vmCartText = ' was added to your cart.' ;
vmCartError = 'There was an error while updating your cart.' ;
loadingImage = '/offer_e_shop_1/components/com_virtuemart/assets/images/facebox/loading.gif' ;
closeImage = '/offer_e_shop_1/components/com_virtuemart/assets/images/facebox/closelabel.png' ;
Virtuemart.addtocart_popup = '0' ;
faceboxHtml = '<div id="facebox" style="display:none;"><div class="popup"><div class="content"></div> </div></div>' ;
</script>
<link rel="stylesheet" href="/offer_e_shop_1/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/offer_e_shop_1/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/offer_e_shop_1/templates/mov_jean_cc_offer_e_shop_2/css/print.css" type="text/css" />
</head>
<body class="contentpane">
<div id="system-message-container">
</div>
test
</body>
</html>
How can I return only the test value alone?
You can use Jexit(),exit() or add &format=raw in url string or use given code in controller function:
$app = &JFactory::getApplication();
$app->close()
echo all your output text and just place a die(); after that
You just have to add Jexit() at the end of your task & you will get rid of full html. You can use die() as well but why if there is Jexit().
function edit()
{
// Your code
Jexit();
}
found it.. in the end of the url string.. you need to attach &format=raw
So the request will be
jQuery.ajax({
type: "POST",
url: "index.php?option=com_virtuemart&view=participate&task=participate_request&virtuemart_product_id=2&virtuemart_category_id=5&tmpl=component&Itemid=101&format=raw",
data: { name: "John", location: "Boston" }
}).done(function( msg ) {
alert( "Data Saved: " + msg );
});
! so easy after all.
This is a test page. There is a button that on click should load an entire external page extern2.php into the content div. Extern2.php works in both Safari and Firefox, however index.php only works in Safari.
The main page:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery Ajax Test</title>
<script type="text/javascript" src="jquery_1.6.1.js"></script>
<script type="text/javascript">
function foo() {
$('#content').load('extern2.php', function() {
alert('Load was performed.');
});
}
</script>
<meta name="robots" content="index, follow, noarchive" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
</head>
<body>
<form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post">
<input type="submit" name="formSubmit" value="Submit" />
</form>
<?php
if(isset($_POST['formSubmit']))
{
?>
<script type="text/javascript">
$(document).ready(function() {
$('#content').load('extern2.php');
});
</script>
<?
}
?>
<div id="content">Initial content in test.html</div>
</body>
</html>
The external page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<meta name="robots" content="index, follow, noarchive" />
<link rel="stylesheet" href="style.css" type="text/css" />
<!-- This includes the ImageFlow CSS and JavaScript -->
<link rel="stylesheet" href="imageflow.packed.css" type="text/css" />
<script type="text/javascript" src="imageflow.packed.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
</head>
<body>
<?php
// Connecting to database
$con = mysql_connect('CONNECT INFO HERE');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("CONNECT INFO HERE", $con);
$userID=2;
$getPage="SELECT * FROM pages,thumbnails WHERE thumbnails.thumbnailID=pages.thumbnailID AND pages.userID=".$userID." AND pages.projectID='8' LIMIT 3";
$pageResult = mysql_query($getPage) or die(" ". mysql_error());
?>
<!-- This is all the XHTML ImageFlow needs -->
<div id="myImageFlow" class="imageflow">
<? while($line = mysql_fetch_array($pageResult)) {
$thumb = $line['fileName'];
$title = $line['title'];
$link = $line['url'];
echo "<img src='../../thumbnails/small/".$thumb."' longdesc='".$link."' alt='".$title."' />";
}
?>
</div>
<?
mysql_close($con);
?>
</body>
</html>
What does the error console (CTRL-SHIFT-J) say? Also does Firebug help at all?