The code below always load script src when page load.
.
I have a website that clicks is on the right side(as menu item) then it loads page on the right side(content), but 1 page only.
.
How to load external script src during at onclick only?
<html>
<head>
<script src="https://xdomain.com/xout.js"></script>
</head>
<body>
<img id="idxclick" src="images/ximage.jpg" />
<script>
var handler = xout.xsetup({
key: 'sd_FlP9fKY7TvINq4bWachJQ35P',
image: '/images/xout.png',
locale: 'auto',
token: function(token) {
//
//
}
});
$('#idxclick').on('click', function(e) {
handler.open({
name: 'Hardware',
description: 'Software',
amount: '50.00'
});
e.preventDefault();
});
$(window).on('popstate', function() {
handler.close();
});
</script>
</body>
</html>
I did what your code > here > but same thing happen >
<html>
<head>
<!-- script src="https://xdomain.com/xout.js"></script> REMOVED -->
</head>
<body>
<img id="idxclick" src="images/ximage.jpg" />
<script>
$.getScript('https://xdomain.com/xout.js', function () {
// do some stuff after script is loaded
var handler = xout.xsetup({
key: 'sd_FlP9fKY7TvINq4bWachJQ35P',
image: '/images/xout.png',
locale: 'auto',
token: function(token) {
//
//
}
});
$('#idxclick').on('click', function(e) {
handler.open({
name: 'Hardware',
description: 'Software',
amount: '50.00'
});
e.preventDefault();
});
$(window).on('popstate', function() {
handler.close();
});
});
</script>
</body>
</html>
.
Your answer was correct!, thank you!, and this is much Better and Faster! Prevent Double Click included.
.
<html>
<head>
</head>
<body>
<img id="idxclick" src="images/ximage.jpg" onmouseover="$.getScript('https://xdomain.com/xout.js')" />
<script>
$('#idxclick').on('mouseout', function() {x=0})
var x=0;
$('#idxclick').on('click', function(e) {
if (x==0) {
x=1;
var handler = xout.xsetup({
key: 'sd_FlP9fKY7TvINq4bWachJQ35P',
image: '/images/xout.png',
locale: 'auto',
token: function(token) {
//
//
}
});
handler.open({
name: 'Hardware',
description: 'Software',
amount: '50.00'
});
}
e.preventDefault();
});
$(window).on('popstate', function() {
handler.close();
});
</script>
</body>
</html>
You can dynamically load a script with $.getScript() inside of your click event handler.
$('#idxclick').on('click', function(e) {
$.getScript('https://xdomain.com/xout.js', function () {
var handler = xout.xsetup({
key: 'sd_FlP9fKY7TvINq4bWachJQ35P',
image: '/images/xout.png',
locale: 'auto',
token: function(token) {
//
//
};
handler.open({
name: 'Hardware',
description: 'Software',
amount: '50.00'
});
});
e.preventDefault();
});
Related
I've decided to use the custom button code supplied by Stripe for accepting payment on a single product I sell. It looks like this:
<script src="https://checkout.stripe.com/checkout.js"></script>
<button id="customButton">Hire Bike (1 Day)</button>
<script>
var handler = StripeCheckout.configure({
key: 'MY_KEY',
image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
locale: 'auto',
token: function(token) {
// You can access the token ID with `token.id`.
// Get the token ID to your server-side code for use.
}
});
document.getElementById('customButton').addEventListener('click', function(e) {
// Open Checkout with further options:
handler.open({
name: 'Bike Company',
description: '1 Day Bike Hire',
currency: 'usd',
amount: 25000
});
e.preventDefault();
});
// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
handler.close();
});
</script>
While it does work (when I use my actual public API key of course), what I can't find a solution for is a way to execute some of my own JS when the payment is successful.
I can't find an answer in the documentation, so looking for suggestions from the SO community.
You can run code in the token callback:
<script src="https://checkout.stripe.com/checkout.js"></script>
<button id="customButton">Hire Bike (1 Day)</button>
<script>
var handler = StripeCheckout.configure({
key: 'MY_KEY',
image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
locale: 'auto',
token: function(token) {
// DO STUFF HERE
alert("Wahoo! You paid!")
}
});
document.getElementById('customButton').addEventListener('click', function(e) {
// Open Checkout with further options:
handler.open({
name: 'Bike Company',
description: '1 Day Bike Hire',
currency: 'usd',
amount: 25000
});
e.preventDefault();
});
// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
handler.close();
});
</script>
// This is my controller class which iam using iam making a time table in Asp.Net mvc .... My View against my contrller every time i run it give a popup of failed iam not exactly sure but i think that the issue with my _Layout or somwthing else mabye its the issue that its not loading the jquery in Asp.net Mvc 5
public class TutorController : Controller
{
public ActionResult Index()
{
return View();
}
public JsonResult GetEvents()
{
using (TutorHubContext dc = new TutorHubContext())
{
var events = dc.TimeTables.ToList();
return new JsonResult { Data = events, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
}
}
#{
ViewBag.Title = "Index";
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Index</h2>
<div id="calender"></div>
<link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.print.css" rel="stylesheet" media="print" />
#section Scripts {
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
<script>
$(document).ready(function () {
events = [];
$.ajax({
type: "GET",
url: "/Tutor/GetEvents",
success: function (data) {
$.each(data, function (i, v) {
events.push({
eventID: v.EventID,
title: v.Subject,
description: v.Description,
start: moment(v.Start),
end: v.End != null ? moment(v.End) : null,
color: v.ThemeColor,
allDay: v.IsFullDay
});
})
GenerateCalender(event)
},
error: function (error) {
alert('failed');
}
})
function GenerateCalender(events) {
$('#calender').fullCalendar('destroy');
$('#calender').fullCalendar({
contentHeight: 400,
defaultDate: new Date(),
timeFormat: 'h(:mm)a',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay,agenda'
},
eventLimit: true,
eventColor: '#378006',
events: events
})
}
})
</script>
}
</body>
</html>
// plz anybody help me
Something looks a little suspicious here. You say that's your view; but that looks like it contains a complete <html> ... </html> document.
Your _Layout.cshtml should contain the outer <html> ... </html> bits, and inside that file you need to call to #RenderSection("Scripts", required: false).
Later in your view you should have the #section Scripts { ... } just as you do currently.
To be clear, I would make my _Layout.cshtml contain the following (note, per #Stephen Muecke's advice, I added jQuery):
<!DOCTYPE html>
<html>
<head>
<!-- common css here -->
<!-- page specific css here -->
#RenderSection("Css", required: false)
</head>
<body>
#RenderBody()
<!-- common scripts here -->
<script src="//code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<!-- page specific scripts here -->
#RenderSection("Scripts", required: false)
</body>
</html>
Then my {View}.cshtml would contain:
<h2>Index</h2>
<div id="calender"></div>
#section Css {
<link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.print.css" rel="stylesheet" media="print" />
}
#section Scripts {
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
<script>
$(document).ready(function () {
events = [];
$.ajax({
type: "GET",
url: "/Tutor/GetEvents",
success: function (data) {
$.each(data, function (i, v) {
events.push({
eventID: v.EventID,
title: v.Subject,
description: v.Description,
start: moment(v.Start),
end: v.End != null ? moment(v.End) : null,
color: v.ThemeColor,
allDay: v.IsFullDay
});
})
GenerateCalender(event)
},
error: function (error) {
alert('failed');
}
})
function GenerateCalender(events) {
$('#calender').fullCalendar('destroy');
$('#calender').fullCalendar({
contentHeight: 400,
defaultDate: new Date(),
timeFormat: 'h(:mm)a',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay,agenda'
},
eventLimit: true,
eventColor: '#378006',
events: events
})
}
})
</script>
}
I want to pass an ID to a function that turns it to a "flyout".
My base code is:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="target_anchor1" href="#" title="XXXXXXXXXX">test 1</a>
<script type="text/javascript">
$(function() {
$('#target_anchor1').flyout({
title: '',
content: function() {
return document.getElementById('target_anchor1').title;
},
html: true,
dismissible: true
});
});
</script>
I want to do this dynamically, so I tried a function.
Function gets the parameter but does not create the flyout.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="target_anchor1" href="#" title="XXXXXXXXXX" onclick="anchorFlyout(this.id)">test 1</a>
<a id="target_anchor2" href="#" title="YYYYYYYYYY" onclick="anchorFlyout(this.id)">test 2</a>
<a id="target_anchor3" href="#" title="ZZZZZZZZZZ" onclick="anchorFlyout(this.id)">test 3</a>
<script type="text/javascript">
function anchorFlyout(paramId) {
alert(paramId);
$('#' + paramId).flyout({
title: '',
content: function() {
return document.getElementById(paramId).title;
},
html: true,
dismissible: true
});
}
</script>
Code is taken from http://www.jqueryscript.net/demo/Simple-Customizable-Tooltip-Popover-Plugin-Flyout
Any idea?
Do you just want to be able to pass an ID to a function that turns it to a "flyout"?
function createFlyout(elementID) {
$("#"+elementID).flyout({
title: '',
content: function() {
return document.getElementById(elementID).title;
},
html: true,
dismissible: true
});
}
Or you could use a custom JQuery function...
$.fn.createFlyout = function() {
this.flyout({
title: '',
content: function() {
return this.attr("title");
},
html: true,
dismissible: true
});
return this;
}
$("#myDiv").createFlyout();
Just make a regular function and have jquery statements in it:
function anchorFlyout(paramId) {
$("#" + paramId).flyout({
title: '',
content: function() {
return document.getElementById(paramId).title;
},
html: true,
dismissible: true
});
};
anchorFlyout("target_anchor1")
I would like to make a new line in my Bootbox Alert Box. I know in Javascript you can use \n but this doesn't seem to work. Here is what I have tried:
bootbox.alert("Hello \n world");
You can use html for that:
bootbox.alert("Hello <br> world!");
Will do it
with confirm message
$(function () {
$(".confirm").click(function (e) {
e.preventDefault();
bootbox.confirm({
message: "<h3>Hello</h3> <br> world!",
buttons: {
confirm: {
label: 'yes',
className: 'btn-success'
},
cancel: {
label: 'no',
className: 'btn-danger'
}
},
callback: function (result) {
if (result)
console.log('yes');
}
});
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
Delete
I have a button that opens a dialog and when I close the dialog it stops working. When I save on the dialog screen it continues to work fine.
This is the button that opens the dialog:
<button class="actionbutton" type="button" onclick="addLitigant();">Add Litigant To Case(s)</button>
The code it calls:
function addLitigant(){
console.log("Calling addLitigant()");
editDialog.extendedDialog('loadUrl','CRFilingLitigantDialog.do?action=addLitigant', 'Add Litigant');
}
The close code on the dialog screen:
param['buttons'].push(
{
id: "closeButton",
text: "(C)lose",
accessKey: "c",
click: function () {
jQuery(this).extendedDialog('close');
jQuery(this).html('');
}
}
);
The save button code:
function () {
console.log("clicking Save");
jQuery('#toAssign option').each(function(){
jQuery(this).attr('selected',true);
});
jQuery('#toUnassign option').each(function(){
jQuery(this).attr('selected',true);
});
editDialog.extendedDialog('postUrl', {url: 'CRFilingLitigantDialog.do?action=updateLitigant', formId: '#crFilingLitigantDialogForm', success: function(){
litigantTabGet('CRFilingLitigantDetail.do', null);
editDialog.extendedDialog ('destroy');
}});
}
We are using jquery 1.6.2. I have tried adding console.log statements to the addLitigant() function but when I come back from the close it doesn't call anything in the console. If I refresh the page it does begin to work again until we close from the dialog.
This is the immediate function that is on the page that opens the dialog
jQuery(function(){
console.log("function");
verificationDialog = jQuery('<div id="verificationDialog"></div>').clerkReviewDialogTemplate({
height:600,
width:800,
title: "Compare Eflex and Icis"
});
compareDialog = jQuery('<div id="comparisonDialog"></div>').clerkReviewDialogTemplate({
height:400,
width:500,
title: "Imported Person"
});
editDialog = jQuery('<div id="editDialog"></div>').clerkReviewDialogTemplate({
height:600,
width:700,
title: "Edit Litigant",
buttons: [
{
id: "save",
text: "S(a)ve",
accessKey: "a",
click: function () {
console.log("clicking Save");
jQuery('#toAssign option').each(function(){
jQuery(this).attr('selected',true);
});
jQuery('#toUnassign option').each(function(){
jQuery(this).attr('selected',true);
});
editDialog.extendedDialog('postUrl', {url: 'CRFilingLitigantDialog.do?action=updateLitigant', formId: '#crFilingLitigantDialogForm', success: function(){
litigantTabGet('CRFilingLitigantDetail.do', null);
editDialog.extendedDialog ('destroy');
}});
}
}
]
});
jQuery('.saveOnChange').bind('change', function(){
updateLitigants();
});
jQuery('.pin').icisAutocomplete({
mustMatch: true,
source: function(request, response){
getQuickAccess(request, response);
},
change: function(event, ui){
updateLitigants();
}}).each(function(index){
var data = jQuery(this).data('staging-json');
jQuery(this).bind('keydown', function(event){
return f5_handler({
event: event,
onf5key: function(){
var popup = people_popup({elem: this, event: event, data: data, success: function(data){
if(data['pin'] != 'null'){
jQuery(event.currentTarget).val(data['pin']);
}
if(data['masterPin'] != 'null'){
jQuery('#'+jQuery(event.currentTarget).attr('masterPinField')).val(data['masterPin']);
}
compareDialog.extendedDialog('close');
updateLitigants();
}});
compareImportedLitigant(data['id'], popup);
}
});
});
});
});
Thanks,
Tom
looks like a post back issue that makes you lose you bind events - this is the only thing that could cause losing button event - try to replace your immediate function with
function pageLoad() {}
see this $(document).ready() and pageLoad() are not the same!
might help
I compared this code to an older version. I noticed that it worked in an older version and I compared the two. The older version had a change in the edit dialog code, I added the close code to it and it now works.
editDialog = jQuery('<div id="editDialog"></div>').clerkReviewDialogTemplate({
height:600,
width:700,
title: "Edit Litigant",
close: function(){
litigantTabGet('CRFilingLitigantDetail.do', null);
editDialog.extendedDialog ('destroy').remove();
},
buttons: [
{
id: "save",
text: "S(a)ve",
accessKey: "a",
click: function () {
jQuery('#toAssign option').each(function(){
jQuery(this).attr('selected',true);
});
jQuery('#toUnassign option').each(function(){
jQuery(this).attr('selected',true);
});
editDialog.extendedDialog('postUrl', {url: 'CRFilingLitigantDialog.do?action=updateLitigant', formId: '#crFilingLitigantDialogForm', success: function(){
litigantTabGet('CRFilingLitigantDetail.do', null);
editDialog.extendedDialog ('destroy');
}});
}
}
]
});