I'm just curious if things like this is possible >> While still loading a web page, is it possible to return an onbeforeunload like dialog when a user try to navigate to other page or close the browser ?
Well i made this to display a message to be display before someone quits my site, and this gives them the option to stay or leave the page.
I used jquery so you have to add the link to jquery to your site, yo can do this calling a script tag with the src pointing to the next url:
https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
and after that just add the next code on your webpage
$(document).ready(function()
{
var flag = true;
function Close()
{
if(flag)
{
return "Are you sure you want to leave?";}
}
}
window.onbeforeunload = Close;
});
This will call the Close function at the onbeforeunload event, and will ask if you want to leave or stay
Hope this helps
The thing is I have this set of code that exports a PDF file, I used TCPDF on this one.
$('#export').click(function() {
var conf = confirm("This will generate a PDF file of all the list of products. Continue ?");
if (conf)
{
$('#ajaxloader').css('visibility', 'visible');
var href = "http://"+url+"/export/items.php";
window.open(href, '_self');
}
});
When I click the button, it downloads the pdf file that contains a list of products, but my problem it's taking about more than 30 seconds to render, I already set the time limit so I'll no problem with that, what I want to do is to display a loader while rendering the pdf file, then hide it afterwards.
Related
We use wordpress and have our users fill in a form.
When they click on the submit button, the following happens (thanks to a PDF plugin):
The form and the submit button disappear
A green message is shown ("Success...") and a download link to a PDF file appears, that the plugin has generated out of the filled form so the user can download it.
However, the plugin does not place the file on our servers and thanks to the nonce system (it's like a token), the link won't work at a later point in history.
And that's why I want to auto-download the file to the server as well (no matter if the user downloads it too or not).
My plan so far:
Tie a jQuery script to the submit button, that (as soon as the button is clicked) waits for an element (in this case the download link) to appear like so:
$(document).ready(function(){
$(".submit-button").click(function () {
waitForEl(".pdf-link", function() {
console.log(".pdf-link").attr("href");
});
});
});
var waitForEl = function(selector, callback) {
if (jQuery(selector).length) {
callback();
} else {
setTimeout(function() {
waitForEl(selector, callback);
}, 100);
}
};
(Source of the waitForEl function: https://gist.github.com/chrisjhoughton/7890303)
Where you see the console.log, I want some way to automatically download this PDF file to the server of our website instead, next to the JS file where the code from above is in.
Is that even possible? I can use JS and PHP to achieve this somehow, since we're using Wordpress.
My goal: I have a form that is in parts, 1-4, when the user clicks on the "Next" button I would like the content to animate out then part 2 slides, and so on until the form is complete. The tricky part is I would am trying to use a different php page in a different subfolder to insert as the other 3 parts. This would also change the URL subfolder the user sees.
The working example is actually WordPress. When you click through the multi-part form you will see the content and the URL act as I have described.
I did a bit of digging and it seems like they used React.js on the content but I couldn't really find any documentation on how to do this with React.js so it made me think that maybe it was custom Ajax/jQuery or what.
My Trees of Folders -
Main
Subfolder-1
index.php
Subfolder-2
index.php
And so on. The only thing I could think of would to use jQuery:
$(document).ready(function() {
$('#form-container').on('click', '.insert', function() {
var directory = $(this).attr('name');
$('#form-container').load('../' + directory);
return false;
});
});
I add the class of "insert" on the "Next" button and give it a name="Subfolder-2" $('#form-container').load('../Subfolder-2);' will actually load the content into the div without the page refreshing BUT it does not change the subfolder in the URL.
Am I on the wrong track? Maybe I am just not searching for the right thing?
Ok, so I ended up figuring out how to get the content to act like I wanted with the information John S. provided me. After doing some research and a few hours of trial and error I came up with the JavaScript below:
var data = 'start',
url = '../' + data + '/';
history.pushState(data, null, url);
Above I set the variables and immediately run a history.pushState on page load to capture the first div that is loaded into the content div. This is important because it is the only way I could load the content that happens on initial load back into the page when hitting the browsers back button.
$('body').on('click', '.insert', function(e) {
data = $(this).attr('data-name'),
url = '../' + data + '/';
history.pushState(data, null, url);
request_content(data);
return false;
});
Then I add a click listener to the button with the class .insert reset the variables so instead of grabbing the page that initially loaded it grabs the page that will be loaded, then use history.pushState again to change the url that is determined by the variables.
The request_content function is a simple .load function. So when the button is clicked the variables are set, the url changes and the new content get loaded into the page while the old content disappears.
The final piece to the puzzle which took me the longest to figure out is actually the popstate function. I am still not 100% sure why it works but after hours of messing with it and finally getting it to work I am not going to question it.
window.addEventListener('popstate', function(e){
var data = e.state;
if(data === null) {
} else {
request_content(data);
}
});
This popstate function is what allows the content to come back when hitting the browsers back or forward navigation.
CSSTricks < this article at CSSTricks helped a TON when learning this method.
Thanks again to John S. for pointing me in the right direction!
I have a few buttons that are properly linked on my website, it rarely works, most of the time it does not. when I right click and open in a new window they work else it wont.
http://studentnet.kingston.ac.uk/k1003140/group8
Any one knows why and how?
here how they are linked:
Spain
and the page spain exists. please do not give me a minus if you won't even comment.
I checked your website and i found you have a js script called general.js it calls this function
$(document).ready(function() {
//initial
$('#midcontent').load('content/index.php');
//handle menu clicks
$('ul li a').click(function() {
var page = $ (this).attr('href');
$('#midcontent').load('content/' + page + '.php');
return false;
});
});
and content/index.php is unreachable and causes an error in the console log, when i disabled javascript on your webpage the links worked fine.
as you see it adds extra content/ before the link and .php at the end, try to remove it
I'm working on an ajax loading function on a Wordpress single page portfolio.
The principle is that when you click a thumbnail in the gallery, it opens a container (#DrawerContainer) and fetch the ajax content of this article into it. With a lot of help, I'm already able to open the drawer and load the post content when I click a thumbnail.
Here is a fiddle if you want to see it working (the ajax will not load but it works locally). http://jsfiddle.net/RF6df/24/
The part I'm working on now: I need my site to be crawlable and the urls to be shareable. If I give http://mywebsite.com/#!project5 to someone, I need project5 content to be opened when he loads the page.
I thought the hash-bang (#!) urls was the way to go to make this work. With the code below (commented on the jsfiddle), I can update the url and add the hash of the clicked thumbnail.
var pathname = $(this).find('a')[0].href.split('/'),
l = pathname.length;
pathname = pathname[l-1] || pathname[l-2];
window.location.hash = "#!" + pathname;
But when I load a page, the ajax state isn't remembered. I assumed it was because my ajax container was only loaded on click event, but there is no change when I add a persistant container in the php.
Is there a way to load the page with a post content already displayed, or to open the #DrawerContainer when the page is loading a hash-bang url?
Please keep in mind that I'm just learning jquery and ajax. So I'd really appreciate if you explain or comment a little bit what you do, I'll for sure learn at the same time... :)
on onload you should check the window.location.hash and trigger a click on the particular link/div.
$(document).ready(function() {
var hash = window.location.hash;
if ( hash.length > 0 ) {
hash = hash.replace('#' , '' , hash );
$('a[rel="'+hash+'"]').trigger('click');
}
});
I have used the following on sites where I want to trigger via hash changes.
First I bind a hashchange event to get the hash value
$(window).bind('hashchange', function(o){
url = window.location.hash.substring(1);
o.preventDefault();
if (!url) {
return;
}
}
Then I trigger the hashchange when I want - in your case when the page loads i.e. on document ready.
jQuery(document).ready(function($) {
$(window).trigger('hashchange');
});
You can then use the hash value in your function that loads the correct content
I have a single php script on my site that facilitates my site's downloads (logs user info, controls user permissions etc). A typical link looks like this on my site:
Download file 12345
In file_download.php I check to make sure the file request is valid, and if so, it does a header force file download
header("Content-type: application/force-download");
which forces the download prompt in the user's browser. The user never leaves the page they click the link on.
What I am wondering is if I am able to toggle a jQuery event from file_download.php onto the parent page? It seems if I do anything on file_download.php other than a 'header force download' the user will leave the page.
Ideally I would like to keep my href links unchanged (for the sake of not editing a million instances site wide) and have file_download.php toggle a lightbox window prompting for user information before the download (if needed of course).
Any help or suggestions would be greatly appreciated, thanks.
You wouldn't need to toggle the event from the PHP page, you could attach the information box to all of your download links, and then use JavaScript to redirect:
var downloadLink;
$(".download-link").click(function(e){
e.preventDefault();
downloadLink= $(this).attr("href");
displayLightbox();
});
$("form").submit(function(e){
e.preventDefault();
//form validation
if(formValidated = true){
window.location = downloadLink;
}
});
I have an example like the above one.
This is your link :
<a id="downloadLinkId" href="file_download.php?file_id=12345">Download file 12345</a>
And this is your javascript:
$("#downloadLinkId").click( function(event) {
event.preventDefault();
launchLightBoxWindow();
});
Rest of the code is on jsfiddle.