axios.post('/your-url-or-api-destination', payload)
.then((response) => {
// Show Success Message
this.$bvToast.toast('Terms and Conditions Saved', {
title: 'Success',
variant: 'success',
solid: true
});
})
.catch((error) => {
// Show Error Message
this.$bvToast.toast('Terms and Conditions Not Saved', {
title: 'Error',
variant: 'danger',
solid: true
});
});
When you write your script and save it, it will not automatically run.
You must load the file first.
After loading the file the cronjob will continue running automatically.
<script type="text/javascript">
// Cron Timer (Set run timer)
setTimeout(function() {
location.reload();
}, 25000 /* 25 seconds */ );
</script>
<?php
// Call to Method
csv_dump_and_send();
?>
$(document).on("click","tr",function(){
var projectId = $(this).attr("data-projectId");
$(this).nextAll("tr:eq(0)").toggle(500);
$(this).nextAll("tr:eq(1)").toggle(500);
});
$("#debtor-customer-filter").on('submit', function(e) {
e.preventDefault();
var data = new FormData(this);
$("#debtors-table").DataTable().destroy();
$("#debtors-list").load("debtor/filterCustomerDebtorById", {
debtorFilter: $("#customer-filter").val(), // This set's the status to fetch all records
fromDate: $("#from-date").val(),
toDate: $("#to-date").val(),
cid: $("#customer-id").val()
}, function (response,status,xhr) {
$("#debtors-table").DataTable();
fetchDebtors(response);
});
});
function fetchDebtors(response) {
$(this).html(response);
}
https://introjs.com/example/hello-world/index.html
Wizard steps are managed with simple HTML attributes
data-step="1" data-intro="This is a tooltip for wizard step 1!"
data-step="2" data-intro="This is the second tooltip for wizard step 2!"
data-step="3" data-intro="This is the third tooltip for wizard step 3!"
The below script needs to be added to
$(document).on('click', '#wizard', function(e) {
e.preventDefault();
introJs().start();
});
In the Ajax submits you will see a variable. formdata
The below snippet is what you must append to the top of your Ajax call to initiate the variable
Otherwise you need to change the variable to what ever you are targeting.
var formdata = new FormData;
formdata.append("commId", $("#template-id").val());
$("#product-form").on('submit', function(e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: 'strategy/create-product',
data: new FormData(this),
contentType: false,
dataType: 'json',
cache: false,
processData: false,
success: function(response) {
if (response.success) {
location.href = "product/index"
} else {
PNotify.error({
title: 'Error Saving Product',
text: response.message,
mode: 'light'
});
}
}
});
});
$.ajax({
type: 'POST',
url: 'products/save-email-template',
dataType: 'json',
data: formdata,
processData: false,
cache: false,
contentType: false,
success: function (response) {
if (response.success) {
PNotify.success({
title: 'Success!',
text: response.message,
styling: 'material',
mode: 'light',
maxTextHeight: null,
delay: 2000,
destroy: true,
closer: true,
sticker: false
});
setTimeout(() => {
location.reload();
}, 500);
} else {
PNotify.error({
title: 'Error!',
text: response.message,
styling: 'material',
mode: 'light',
maxTextHeight: null,
delay: 2000,
destroy: true,
closer: true,
sticker: false
});
}
}
});
<div class="form-row">
<div class="container">
<label class="ants-label-light" >Club Emblem</label>
</div>
<div class="input-group mb-6 container justify-content-center">
<div class="row">
<div class="col-6">
<form action="/uploads" method="post" enctype="multipart/form-data">
<label class="btn btn-ants">
<i class="fa fa-image"></i> Upload Club Emblem
<input type="file" style="display: none;" name="club_emblem" id="imgInp">
</label>
</form>
</div>
<div class="col-6">
<label class="btn btn-secondary file_reset"> <!-- Remove Image -->
<i class="fa fa-undo"></i>
</label>
</div>
</div>
<div class="image-display-box">
<form runat="server">
<img class="upload_display" src="#" alt="Club Emblem" />
</form>
</div>
</div>
</div>
$( document ).ready(function() {
// ///////////////////////////////////////////////////////////////////////////
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('.upload_display').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]); // convert to base64 string
}
}
$("#imgInp").change(function() {
readURL(this);
});
$('.file_reset').on('click', function() {
$('.upload_display').attr('src', '');
});
// ///////////////////////////////////////////////////////////////////////////
});
document.onkeydown = function() {
switch (event.keyCode) {
case 116 : //F5 button
event.returnValue = false;
event.keyCode = 0;
return false;
case 82 : //R button
if (event.ctrlKey) {
event.returnValue = false;
event.keyCode = 0;
return false;
}
}
}
Create a page and add this to it. It will run the page every time someone loads the page or for whatever duration you set yourself.
setTimeout(function() {
location.reload();
}, 5000);
Documentation can be found here
Owl Carousel https://owlcarousel2.github.io/OwlCarousel2/
Add font awesome as well because font awesome is awesome.
wp_enqueue_style('fontawesome', 'https://use.fontawesome.com/releases/v5.2.0/css/all.css');
It get's used in this project 😉
Lib CDN's can be found here
CDN's https://cdnjs.com/libraries/OwlCarousel2
Scripts and Styles for "wp-enqueu"
// Version 1.3.3
wp_enqueue_style('owl-carousel-min-css','https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css');
wp_enqueue_style('owl-theme-min-css','https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css');
wp_enqueue_script('owl-carousel-script-lib','https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js');
// Version 2.0.0-beta
wp_enqueue_style('owl-carousel-min-css','https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.carousel.min.css');
wp_enqueue_style('owl-theme-min-css','https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.theme.default.min.css');
wp_enqueue_script('owl-carousel-script-lib','https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/owl.carousel.min.js');
The library is also inside the Libs folder on the server if you need it. Or you can just download it from the first link above.
<div class="owl-carousel owl-theme" id="about-banner">
<div class="item">
<div class="inner-block">
<div class="icon"> <i class="fas fa-cogs"></i> </div>
<div class="inner-block-header">
<h2>Quality Service</h2> </div>
<div class="inner-block-text">
<p>The best paragraph</p>
</div>
</div>
</div>
<div class="item">
<div class="inner-block">
<div class="icon"> <i class="fas fa-cogs"></i> </div>
<div class="inner-block-header">
<h2>Quality Service</h2> </div>
<div class="inner-block-text">
<p>The best paragraph</p>
</div>
</div>
</div>
<div class="item">
<div class="inner-block">
<div class="icon"> <i class="fas fa-cogs"></i> </div>
<div class="inner-block-header">
<h2>Quality Service</h2> </div>
<div class="inner-block-text">
<p>The best paragraph</p>
</div>
</div>
</div>
<div class="item">
<div class="inner-block">
<div class="icon"> <i class="fas fa-cogs"></i> </div>
<div class="inner-block-header">
<h2>Quality Service</h2> </div>
<div class="inner-block-text">
<p>The best paragraph</p>
</div>
</div>
</div>
<div class="item">
<div class="inner-block">
<div class="icon"> <i class="fas fa-cogs"></i> </div>
<div class="inner-block-header">
<h2>Quality Service</h2> </div>
<div class="inner-block-text">
<p>The best paragraph</p>
</div>
</div>
</div>
<div class="item">
<div class="inner-block">
<div class="icon"> <i class="fas fa-cogs"></i> </div>
<div class="inner-block-header">
<h2>Quality Service</h2> </div>
<div class="inner-block-text">
<p>The best paragraph</p>
</div>
</div>
</div>
</div>
.inner-block .icon {
color: #f44336;
text-align: center;
padding: 10px;
font-size: 70px;
}
.inner-block-header {
text-align: center;
}
.inner-block-text {
text-align: center;
}
#about-banner .inner-block {
margin: 35px;
border-top: 1px solid #f44336;
border-bottom: 1px solid #f44336;
}
#about-banner {
margin: 25px;
}
$("#about-banner").owlCarousel({
items: 3,
itemsDesktop: [1000, 2],
itemsDesktopSmall: [980, 1],
itemsTablet: [768, 1],
pagination: true,
navigation: false,
navigationText: ["", ""],
autoPlay: true
})
View – Forum Discussion.
View – Including external CSS in outsystems.
View – Including external javascript in outsystems MOBILE application.
View – Including external javascript in outsystems WEB application
View – Javascript links regarding Outsystems
document.getElementById('id_goes_here').style.display = 'none';