I am using swal2 to get a confirm dialog on a page (sourcepage.html) after clicking on a link before redirecting to another page (targetpage.html).
This works well so far.
However, after being redirected to targetpage.html and want to go back using the browsers "back-button" to sourcepage.html, the page is "darkened" and not usable anymore and this is because the
<div class="swal2-container .....> is still there and covers the page completely.
If I hit "reload" on that page, the container is gone.
Here´s my current code:
HTML
Redirect me to targetpage.html
JS
function JSconfirm(){
swal.fire({
title: "Redirect",
type: "warning",
html: "Here comes custom text with html",
showCancelButton: true,
closeOnConfirm: true,
closeOnCancel: true,
confirmButtonColor: "#DD6B55",
cancelButtonText: "No",
confirmButtonText: "Yes"
}).then(function (result) {
if (result.value) {
window.location = "targetpage.html";
}
});
}
What can I do to make sure that this div isn´t visible anymore. It should be "deleted" from sourcepage.html after clicking "yes" to confirm to be redirected to "targetpage.html".
Thanks a lot
I found a solution myself
Adding swal.close and a timeout before the redirect did the trick.
}).then(function (result) {
if (result.value) {
swal.close();
setTimeout (
() => {
window.location.href = "targetpage.html";
},
1 * 500
);
}});
}
Related
I need to implement URL sharing on Facebook via javascript, sharing also a picture.
When the FB sharing dialog appears, it starts shrinking itself and keeps shrinking more and more until it becomes about 20 pixels wide.
And it happens using either the share_open_graph or "share" method.
Also, on the JS console i see this error when the sharing dialog appears:
ErrorUtils caught an error: "<![EX[["Could not find element \"%s\"%s
from module \"%s\"","u_0_18","","__el...".
Subsequent errors won't be logged; see https://fburl.com/debugjs.
This is my code:
<script>
$(document).ready(function() {
$.ajaxSetup({ cache: true });
$.getScript('//connect.facebook.net/en_US/sdk.js', function(){
FB.init({
appId: '476337039102253',
version: 'v2.8'
});
FB.getLoginStatus(APP.fbUpdateStatusCallback);
});
});
</script>
<button id="itb" class="btn btn-primary btn-large active_down" name="btn" onclick="
FB.ui({
method: 'share_open_graph',
action_type: 'og.shares',
action_properties: JSON.stringify({
object: {
'og:url': 'https://example.com',
'og:title': 'page title',
'og:description': 'desc',
'og:image': 'https://savebybooking.s3.amazonaws.com/public/prd/File_341'
}
})
}, function(response){
if (response && !response.error_message) {
console.log('fb sharing OK: '+JSON.stringify(response));
} else {
console.log('Not OK: '+JSON.stringify(response));
}
}); return false;" type="submit">Share</button>
Are you having the same issue? Why is it happening?
I used the "share" method until yesterday without problems, this issue appeared today with no modification to my code.
p.s. I prefer
using share_open_graph
rather than
share
method because the latter won't let you share the specified picture but seems to pick a random image from the url you are sharing.
This is the error inside of the FB dialog, not inside the page launching the dialog. Also it's because you're missing the meta tags on the page you're sharing. Nothing for FB to scrape for your share.
I am completely new to Angularjs and haven’t been doing any code for ages. I started setting up my website again with Angularjs. I have a main page and an about page, to which the user gets via ngRoute on ng-click (or hitting space). Once on the about page, the user can go back by clicking somewhere on the page and so on.
App.js
var app = angular.module("MyApp", ["ngRoute"]);
app.config(function($locationProvider, $routeProvider) {
$routeProvider
.when("/teaser", {
controller:"teaserCtrl",
templateUrl:'teaser.html'
})
.when("/about", {
controller:"aboutCtrl",
templateUrl: "about.html"
})
.otherwise({
redirectTo:"/teaser"
})
});
app.controller("mainCtrl", function($scope, $http, $location) {
$scope.v = {
inverted: false,
display: true,
offwhite: true,
}
$scope.$on("space", function() {
if ($scope.v.teaser) {
$location.path("/about")
$scope.v.teaser = false
} else {
$location.path("/teaser")
$scope.v.teaser = true
}
$scope.$apply()
})
$scope.goHome = function(){
$scope.$broadcast("goHome")
}
});
app.directive("ngMobileClick", [function () {
return function (scope, clickElement, attrs) {
clickElement.bind("touchstart click", function (e) {
e.preventDefault();
e.stopPropagation();
scope.$apply(attrs["ngMobileClick"]);
});
}
}])
HTML
<body ng-controller="mainCtrl as main" ng-mobile-click="goHome()" ng-class="{inverted: v.inverted, bg: v.offwhite}" space>
<div class="content" ng-view ng-hide="v.display"></div>
//My body code
<script ng-init="sw = 'some website'; id="about.html" type="text/ng-template">
<div class="about">
<p class="text" ng-click="next(); $event.stopPropagation()">
<p>some text</p>
<br>
<a ng-href="{{mail}}" ng-click="$event.stopPropagation()">some address</a>
</p>
</div>
</script>
</body>
The code for the about page is written into a script and it has hyperlinks (ng-href). Now my issue: As you can see, I changed my ng-click to ng-mobile-click for the body-section. If I also change it in the script for the hyperlinks, something weird is happening which I can’t really figure out (links change to hover color, but still no redirection to the ng-href.
For the desktop version, the click is triggering ngRoute, but I can also click the links. For the mobile version this is not possible any more. Any ideas how I can fix this? I know, there is no hovering possible, but somehow I need to detect the hyperlinks also on mobile devices without being redirected to the main-page.
As I said: this is my first try with Angularjs and I haven’t done any code for a while, please be as clear as possible!
There is another controller for teaser/about which I haven’t put here, as well as the directive for the keyup.
Any ideas or suggestions? Thank you so much in advance!
I am using the following Modal popup script: http://fancyapps.com/fancybox/
I have a modal popup with a IFrame. In the iFrame there is a a registration form. When the user registers they are redirected to a members only page. Currently they are being redirected in the same modal window. I want it so that the modal window closes and a the page where they clicked the modal window redirects to the members only link.
Here is the javascript:
$(document).ready(function() {
$(".various").fancybox({
'width' : '85%',
'height' : '86%',
'paddingTop' : '40',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});
Here is the HTML that calls the modal box:
<a class="various button" data-fancybox-type="iframe" href="/signup-test">
Since you only want to redirect members who've successfully registered, you need to insert code to redirect the user into the success function of your registration and/or validation code.
I can't address your specific example without the rest of your code, but two ways to do this are:
Option 1 - Create A Javascript Function
You can create a Javascript function which closes the iframe and redirects the user. The trick to doing this is putting the script in the parent document so that the script continues executing once the iframe closes.
This function goes in the parent document:
function closeiframe_redirect(url){
$.fancybox.close();
window.location = url;
}
Insert this code when you want to call the function:
parent.closeiframe_redirect('members_page.html');
Option 2 - In an AJAX Success Function
submitHandler: function (form){
$.ajax({
type: 'POST',
url: 'registration-exec.php',
data: $("#loginForm").serialize(),
success: function(data) {
if(data == "true") {
// This closes the Registration Form
$("#registrationForm").fadeOut("fast");
window.location = 'members_page.html'
}
});
}
here is the code i used
eventClick: function(event) {
$.fancybox({
'transitionIn': 'none',
'transitionOut': 'none',
'href': event.url,
});
return false;
},
............
when i click it for the first time it opens fine in a fancybox but when i click again it moves to a new page (event.url).Also there is tooltip being used and it goes null after the fancybox is opened for the first time
Use the following code to open Fancybox with url. It should work.
$('a.yourAnchor').fancybox({
'overlayColor': '#fff',
'autoDimensions': true,
'hideOnContentClick': false,
'scrolling': false
});
Trying to set up a sharing mechanism with FB.ui.
The issue is the share dialog opens a popup instead of it opening in the same page.
The reason I'm trying to avoid the popup is that safari doesn't show the popup in mobile.
<script>
$(document).ready(function()
{
$.ajax(
{
url: '//connect.facebook.net/en_US/sdk.js',
dataType: 'script',
cache: true,
success:function(script, textStatus, jqXHR)
{
FB.init({
appId : 'someID',
autoLogAppEvents : true,
xfbml : true,
version : 'v3.0'
});
share();
}
});
});
function share() {
FB.ui(
{
method: 'share',
href: 'https://example.com',
quote: 'Some description',
title : 'Title',
hashtag: null,
display: 'iframe'
},
response => {
window.parent.postMessage(
{
earningRule: 'fb_share',
action: 'shared',
response: response
}
);
}
)
}
</script>
Is there any way to either avoid the popup or to address the safari popup blocking issue?
Thanks in advance
The main problem is that you are trying to open the dialog in the callback function of an AJAX request. You must use FB.ui directly on mouse interaction, or it will get blocked by browsers.
If that does not work, you can use sharer.php instead: https://developers.facebook.com/docs/workplace/sharing/share-dialog/?locale=de_DE#sharedialogvialink