I´m working in a platform based on chamilo LMS. To run properly when the user logged in, a login is made with chamilo in the background using a hidden iframe, now I want to do the logout is similar idea, But I don´t want that the user knows he is logged in chamilo. I have the path to make de logout, Firstly I try with a hidden iframe but didn´t work because the path is from an input. Now I try using $.get('path'); but the console returns error for CORS policy. If anyone knows a solution for this or other ideas would be great.
My actual code is:
$('#logout').ready(function() {
$('#logout').click(function(e){
e.preventDefault();
$.get("logout pat");
});
});
As with login and due to CORS, you will need to blindly load the logout path using a hidden iframe:
$(function() {
$('#logout').click(function(e){
e.preventDefault();
$(`<iframe id="logout-frame" src="${logoutPath}" />`)
.css({display: 'none'})
.appendTo($('body'));
// Remove iframe after 500ms
setTimeout(() => $('#logout-frame').remove(), 500);
});
});
Related
I am using jQuery to read the URL of the page to determine which page the user is on and then change the background accordingly. My code works great, sometimes... I've tried using $(window).load(function() to no avail and the only answer I can find here is to use $( document ).ready(function() but that's not much help because that's how I wrote the code to begin with, and it's not working as it should. I also attempted to force the page to reload inside the function but that was pointless as well, ( I didn't have much hope for it anyway). When it doesn't work a simple click of the refresh button will get it to work. I have also tried putting the script tag in the header and footer, no difference. I have implemented the same code on different sites and in both cases, it works fine... I thought that maybe it was a caching issue but multiple hard reloads proved otherwise.
You can see for yourself at http://maisonshowroom.com/ click through the nav and the background is supposed to change for each page. I also have a console.log message that should reflect the URL, sometimes it's correct...but that just raises more questions for me, regardless if it's correct or not it should still have a background image rather than just being blank.
Here's my code
$(document).ready(function() {
//changes background images based on which page user is on//
var currentPage = window.location.href;
console.log(currentPage);
if (currentPage.includes('about')) {
$('.wrapper-inner').css('background-image',
'url(http://maisonshowroom.com/wp-content/uploads/2017/09/maison-
about.jpg)');
}
else if (currentPage.includes('services'))
{
$('.wrapper-inner').css('background-image', 'url(http://maisonshowroom.com/wp-content/uploads/2017/09/maison-service-e1506643269331.jpg)');
}
else if (currentPage.includes('products'))
{
$('.wrapper-inner').css('background-image', 'url(http://maisonshowroom.com/wp-content/uploads/2017/09/maison-product.jpg)');
}
else if (currentPage.includes('contact'))
{
$('.wrapper-inner').css('background-image', 'url(http://maisonshowroom.com/wp-content/uploads/2017/09/maison-contact.jpg)');
}
else {
$('.wrapper-inner').css('background-image', 'url(http://maisonshowroom.com/wp-content/uploads/2017/09/maison-about.jpg)');
}
});
Remove this line:
window.location.reload();
and fix this line :
'url(http://maisonshowroom.com/wp-content/uploads/2017/09/maison-
about.jpg)');
to:
$('.wrapper-inner').css('background-image',
'url(http://maisonshowroom.com/wp-content/uploads/2017/09/maison-about.jpg)');
One single line
All I needed to do was disable the AJAX page transition from the WordPress dashboard. Thanks, Patrick Evans, for pointing out that it was being handled by AJAX, I would have never guessed.
I am testing adding a twitter/facebook account feature from our website. On clicking the 'connect to twitter' button from my website, we get redirected (using oauth for verification and authorization) to twitter api to grant access etc. From my casper test module, after clicking the 'connect to twitter' button, I saw from a screenshot that phantomjs is still there on my current website page and does not go the actual twitter api page. Can anybody help me here ?
Script snippet:
exports.addAccount = function(options) {
this.navToAddService(); //custom function to navigate to particular page
casper.then(function() {
this.click('#add_twitter'); //this is the id of the button 'connect to twitter'
}).then(function() {
this.echo(this.getCurrentUrl());
});
};
How about changing your code to use waitForSelector() before trying to click on the button:
exports.addAccount = function(options) {
this.navToAddService(); //custom function to navigate to particular page
casper.waitForSelector('#add_twitter', function() {
this.click('#add_twitter'); //this is the id of the button 'connect to twitter'
}).then(function() {
this.echo(this.getCurrentUrl());
});
};
This bypasses any potential timing issues with asynchronous code. (E.g. I'm guessing navToAddService() is adding the button that you are then trying to click.)
If you get a time-out you know the button is never appearing, and can start troubleshooting that more specific problem.
Similarly, instead of using then() you could use waitForUrl() with the name of the URL you are expecting.
I made a fully functional Ajax Content Replacement script. The problem is that it adds forwards like /about or /work or /contact to the adress but when I reload the site, the file cannot be find. Why?
Someone told me that the problem is that I added the file manually. How does that work? I am not a Javascript expert but I would like to learn it.
Somehow I need to add the history (via history api?). My .html files are in data. The strange thing is that it finds the file but when I try to find it manually, I get 404 Error or when I refresh the site with F5.
Can you help me and show me how it works. We can use my code to find the error. Thanks a lot.
UPDATE: Website Link
Html
<a class="hovers" href="about">About</a>
<a class="hovers" href="projects">Projects</a>
<a class="hovers" href="services">Services</a>
<a class="hovers" href="contact">Contact</a>
Javascript
$(document).ready(function () {
$('#allcontent').load('data/home.html');
$('.hovers').click(function () {
var page = $(this).attr('href');
$('#allcontent').fadeOut('slow', function () {
$(this).animate({
scrollTop: 0
}, 0);
$(this).hide().load('data/' + page).fadeIn('normal');
});
});
});
$('.hovers').click(function () {
history.pushState({
path: this.path
}, '', this.href)
$.get(this.href, function (data) {
$('#allcontent').slideTo(data)
})
return false
})
$(window).bind('popstate', function () {
$('#allcontent').slideTo(location.pathname)
})
I made a fully functional Ajax Content Replacement script. The problem is that it adds forwards like /about or /work or /contact to the adress but when I reload the site, the file cannot be find. Why?
Your code is effectively saying two things:
Load some data from this URL and add it to the page.
Tell the browser that the modifications to the current page make it the same as some other page at some other URL.
You have to create the page at that the other URL yourself.
You haven't done anything on your server to tell it to respond to /about (and its friends) with anything other than a 404 error.
You have to create /about yourself. pushState won't do it for you.
I have an anchor on my page which looks like this: <a id="login" href="login.php"></a>
However, when a user inputs data in the page, in order that he shouldn't lose that data when going to the login page (the data can be saved without being logged in), I change it by taking out the href and adding an onclick to warn the user, as follows:
if (-code which checks for user input-){
$('#login').attr('href','javascript:void(0)');$('#login').attr('onclick','logincheck()');
}
function logincheck(){
alert("Going to the login page will make you lose your work. If you want to save them to a collection, please do so now. When you're ready, click the login button again.");
$('#login').attr('onclick','');$('#login').attr('href','login.php');
}
So the user gets the warning, and now the he can click the login button again to login.
The problem I'm having that for some reason the $('#login').attr('href','login.php');makes the page redirect right away. I'm guessing this is because the we're still in the middle of the anchor click.
How can I change this href but keep the page from actually redirecting before the button is clicked again? I tried adding return false but that didn't help.
Thanks in advance!
Why not consolidate it into a single item?
$('#login').on('click',function(e){
if($(this).data('clicked')!=='true'){
e.preventDefault();
alert("Going to the login page will make you lose your work. If you want to save them to a collection, please do so now. When you're ready, click the login button again.");
$(this).data('clicked','true');
}
});
This will prevent the action the first time, provide the alert, and give it the clicked data to show it has been clicked. The second time it won't meet the if condition, and continue to login.
This avoids the javascript:void(0) bit, as well as any onclick attributes ... everything is contained in your JS file.
You need e.preventDefault();
$('#login').on('click', function(e){
if(!$(this).data('clicked')){
$(this).data('clicked', true);
e.preventDefault();
alert("Going to the login page will make you lose your work. If you want to save them to a collection, please do so now. When you're ready, click the login button again.");
}
});
Not quite sure how to explain this the best way, but i'll give it a go!
I have a php site that uses Fancybox. At the moment, if anyone clicks Login, an overlay appears with the login form. If someone clicks to post a new listing and they're not logged in, I'd like the fancybox overlay to appear again, allowing a user to login.
At the moment, I have a couple lines of php code that check if a session is active - if not, it redirects to a login page, I want this to activate a fancybox popup with the login form... if possible?
I'm not sure how best to achieve this? Any help would be awesome! :)
I'm not sure what programing language you are writing in besides jQuery, but a high-level solution might be to drop a cookie when the user logs in. Then, when they click to post a new listing, check for that cookie. If it's there, let them post. If not show the login window. Here's some pseudo code using the jQuery.Cookie plugin:
$(function(){
$('.login-button').click(function(){
//send login info via ajax
$(this).hide("slow",function(){
// drop a cookie
$.cookie( 'login', '1', { expires: 1, path: '/' } );
});
});
// When the post button is clicked, check for the cookie
// If there's no cookie, show the login box
$('.post-button').click(function(){
if( $.cookie('Login') === null ) {
$("#login-box").fancybox();
} else {
// do nothing
}
});
});
There can be multiple ways of doing so.
First of all, how are you identifying that someone is logged in? Suppose if I can do so with an if condition:
if(user==null) {
//no login
}
I can trigger the click of anchor link for LOGIN and thus, open the fancybox again.
if(user==null) {
$("a#login").trigger('click');
}
Hope it gives you some help.