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
Related
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!
We pushed a small UI change to the site last night. The google analytics code is in the header and has not been touched at all (entire header for the site and all the pages have not been touched at all)
Since the change, we are seeing a lot of hits logged to the page "/site/loading" which is not a page on our site. Even when we visit the site to test, we are occasionally seeing the active page show up as "/site/loading" instead of "/" or the specific page we are visiting. The pages are loading fine and the site is working fine. The error is happening somewhat randomly. Occasionally when someone visits the home page, it shows up as "/site/loading" and occasionally shows up correctly as "/"
Unclear why this is happening or what we might have done to trigger this changed behavior. Until yesterday, our tracking seemed fairly accurate.
Appreciate any ideas or suggestions
Next time just do a search for the url endpoint in your codebase....
var urlToLoading = '/site/loading';
function attachModalForJobs() {
$('.listing-job').find('.title a').click(function(e){
e.preventDefault();
var link = $(this);
$('#modal-external-site').modal();
$('#modal-external-site').on('shown.bs.modal', function (e) {
var modal = $('#modal-external-site');
var bodyHeight = modal.find('.modal-content').height()-modal.find('.modal-header').outerHeight(true)-modal.find('.modal-footer').outerHeight(true)-20;
modal.find('.modal-body').height(bodyHeight);
//modal.find('.modal-body').load(link.attr('href'));
modal.find('iframe').attr('src', link.attr('href') );
modal.find('iframe').attr('height', bodyHeight );
modal.find('iframe').css('height', bodyHeight+'px');
//$('iframe').contents().find('body').addClas('transform');
//var head = $('iframe').contents().find('head');
//head.append($('<link/>', { rel: 'stylesheet', href: 'http://dev.tapwage.com/themes/dark/css/tapwage.min.css', type: 'text/css' }));
});
$('#modal-external-site').on('hidden.bs.modal', function (e) {
$('#modal-external-site').find('iframe').attr('src', urlToLoading );
});
});
}
There is an javascript in your page that loads that page (which leads to a 404 page that contains you tag management/analytics code). Around Line 935 in the code you have:
var urlToLoading = '/site/loading';
function attachModalForJobs() {
.......
$('#modal-external-site').on('hidden.bs.modal', function (e) {
$('#modal-external-site').find('iframe').attr('src', urlToLoading );
I assume that's where the logged url originates.
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.
I have a hyper-link in my php page which opens in new window when it is clicked. But I want it should open only in one window at time, it should ne open if it is already open in new window of browser. Suppose If I click 5 times it is opening in 5 new windows, I want it only in one window. This problem is coming with Mozilla Firefox Please help me doing this with JavaScript or Jquery.
Thanks
thanks. and sorry to share incomplete information. Actually multiple links will be created through php code, which will be opened in different windows. I have used JavaScript to open them in different window. My problem is that same url should not open again if it is already open in window or if any url is clicked multiple times it should open only one window.
Here is my code :
PHP Code
<?php
$Class="class='links'";
$jsfun = 'javascript:openMyLink';
while(condition)
{
print "Click Here";
}
?>
JS code :
function openMyLink(arg1,arg2,arg3) {
var url = "http:///launcher.php?arg1="+arg1+"&arg2="+arg2+"&arg3="+arg3;
newwindow = window.open(url, "Mywindow",'height=596, width=795, left=0, top=0, resizable=yes, scrollbars=no, toolbar=no, menubar=no');
}
I tried to change the second parameter of window.open as dynamic also instead of "Mywindow" but it did not work too. Its not giving the issue with chrome or IE.
If you want to open a site in new window only once you clicked on it, use below code...
<a id="target" href="javascript:void(0)" onClick="myfunc()">click here</a>
<script type="text/javascript">
x=0;
function myfunc()
{
if(x==0)
{
x+=1;
window.open("<--- YOUR SITE URL --->");
}
}
</script>
On your first page have this code,
jQuery(document).ready(function($){
$("#theLink").click(function(e){
if($(this).attr("at")=='1')
{
e.preventDefault();
return false;
}
});
});
and your link should be having an attribute 'at' set to '0' just
like
<a id="theLink" href="demo.html" target="_blank" at="0">Click here to go away</a>
and let your children or newly opened page have this code.
window.opener.$("#theLink").attr("at","1");
$(window).unload(function() {
window.opener.$("#theLink").attr("at","0");
});
This is little tricky but works.
Worked great for me on IE8.
Here is my code :
$('li a').click(function() {
var link1=$(this).attr('href');
$('section:#main').load(link1);
if (link1!=window.location) {
window.history.pushState({path:link1},'',link1);
}
});
The url on the browser is changing but if the user clicks refresh on the browser it will give the url page only, not the complete one.
I use a very simple jquery plugin for this.
http://benalman.com/projects/jquery-hashchange-plugin/
Works fine and remembers the page loaded by the hash tags, ex: www.site.com/#yourajaxpagetag