I have a page which I redirect from it to another page (let's call it "middle page") with parameters in the query string. and I want to redirect from the middle page to some other page in another domain without losing the referral url (the query string of the middle page). my project is MVC C#.
I've tried:
- redirecting in the server side -> didn't work since the query string of the middle page didn't have a chance to change in the client side.
- redirecting in the client side through java script: location.replace/ location.href -> didn't keep the referral url.
- redirecting in the client side with Meta tag refresh -> didn't work.
I did see that if i place a link () in the middle page, clicking it would keep the referral url. so my last resolution was placing a javascript that automatically clicks on the link on document load-> it didn't work as well.
anyone has a solution for this?
I've solved it by using a timeout before I auto-click my link.
however I don't like this solution. does anyone have a better solution?
Try to submit a form using javascript: (Edited version)
So, we have a file "first.html" which calls "middle.html" with parameters:
<html>
<body>
<script>
document.location.href="middle.html?a=1&b=2";
</script>
</body>
</html>
Now "middle.html" makes form-submit to another domain:
<html>
<body>
<script>
var myForm = document.createElement("form");
myForm.method = "GET";
myForm.action = "http://google.com";
document.body.appendChild(myForm);
myForm.submit();
</script>
</body>
</html>
I checked it in FF with Firebug where under GET-request i can see HttpHeader "Referer" which equals to "middle.html?a=1&b=2"
Related
I have a CakePHP 3.x app with some APIs being called from AJAX.
On AJAX I call the url like so:
url: 'user/id/' + id,
method: 'get',
dataType: 'json'
// ...
Etc..
My url is http://localhost:8090/users
So the url on ajax is like
http://localhost:8090/currentpage/users/id/
But for some reason sometimes the url changes to http://localhost:8090/users/id/
What should I change?
What is happening?
This is happening because of your action(parameter) in URL.
Here are some examples so you can understand it better.
Let consider we have a link to every page of our project.
Click Here to add a new user
This link will create different URL depending on your current URL
Current URL URL generate by LINK
localhost/products (here index is the method) localhost/users/add
localhost/products/add localhost/products/users/add
localhost/products/edit/1 localhost/products/edit/users/add
To fix this issue, use a "/" at the beginning and provide the path from your webroot
I think the other answer is correct.
On how to solve it, what I commonly do is save the webroot as returned from CakePHP in a javascript variable. By doing this in the header of the template file it will be available everywhere:
<!-- src/Templates/Layout/default.ctp -->
<head>
<script>
var webroot = <?= $this->request->webroot ?>
</script>
</head>
When you then want to create a Ajax call, use this URL as generated from Javascript:
url: webroot + "user/id" + id //...
Now the call will be as expected, regardless of where your application is placed on the webserver.
I'm using jquery mobile and I'm in dealing with a problem:
I have 2 html pages: index.html and page.html
//index.html
...
<script src="script.js"></script>
<body>
<div id='contents'></div>
</body>
...
//script.js
$(document).ready(function(){
$.ajax({
...
success:
$("#contents").html(content_to_display).trigger('create');
...
});
});
and another page that calls the previous
//page.html
...
<body>
Back
</body>
...
the problem is that when I click on the Back button (after refreshing the page.html), the page index.html is displayed correctly, except the that stays empty unless I manually refresh the page (F5 or Ctrl+R) displaying the content I want to be displayed.
how to load the index.html page without manually refreshing the page every time?
Refresh is your problem, this is a timeline of what have happened:
index.html is loaded
page is changed to page.html and its body content is loaded into index.html DOM but link is still domain/page.html
Because of full page refresh, page.html is reloaded without a HEAD content of index.html.
page is changed to index.html and its body content is loaded into page.html DOM WITHOUT its HEAD part and that is a reason why javascript is not triggered
This problem will be fixed if both index.html and page.html have identical HEAD content, mainly reference to the same custom js file. For more solution to this problem (with solution) take a look at this ARTICLE, to be more transparent it is my personal blog. Or it can be found HERE.
I think you are looking for something like:
window.onbeforeunload = function () {
// stuff do do before the window is unloaded here.
}
this runs before the user is navigated away from the current page.
this means you can force the user to navigate to your page which will refresh correctly.
Try this instead of the backbutton if you are just navigating back one page:
BACK
Or give this a shot:
$.mobile.changePage(href, {changeHash: false });
i was looking at this website and i am interested on how did the developer managed to load different htmls in a single page without the current page being reloaded...
here is the website: http://demos.kendoui.com/web/validator/index.html...
for example if you clicked globalization in the Framework section, you can see the url changed, the body changed also but a part of the page remains (the top part) and the current page is not reloaded...
i am just starting in web development and i want to know this technique... i hope you can share it to me.... thanks :)
It is using ajax partial updates. You send request to the server and get portion of the page and then place it in some element, for example in div.
Normal:
<html>
<head>
<head>
<body>
<div id="divToUpdate"></div>
#Ajax.ActionLink("Call Partial", "MyAction", "MyController", AjaxOptions{ UpdateTargetId = "divToUpdate" })
<body>
</html>
Partial:
<span> here is my partial view which will be placed in "divToUpdate" div after clicking "Call Partial" Link </span>
Is it possible to refresh an iframe whenever the page changes? (The page within the iframe - not the page the iframe is on) I want to have an iframe show a page which is being developed, then whenever the page is changed/updated I want the iframe to refresh so it shows the newer version. Hope that makes sense. :P
Or would it be better to use something else instead of an iframe? Are iframes outdated now?
Only because I find this interesting... using jQuery:
<iframe id="someiFrame"></iframe>
<script type="text/javascript">
var page = '/some/page/on/this/server.html', lM;
function checkModified(){
$.get(page, function(a,a,x){
var mod = x.getResponseHeader('last-modified');
if(lM != mod){
lM = mod;
$('#someiFrame').attr('src', page);
}
}
}
setInterval(checkModified, 5000); // every 5 seconds
</script>
That will poll the page every 5 seconds (incredibly wasteful but if it's on a local dev machine, so what?) and reload the iframe only when the page is updated :)
Note that the iFrame MUST be on the same domain as the parent page.
Do you have access to the page that's being modified? If so, why not just add a refresh meta tag to the page's HEAD that will then update your iframe at whatever interval you set. The following tag produces a 5-minute refresh and it won't matter if your iframe is cross domain:
<meta http-equiv="refresh" content="300" />
How can I implement showing "Generating data... please wait" information to a web browser from a web application (if data is not cached it can take some time to generate response), with and without JavaScript (AJAX)?
I am interested both in solution using AJAX (where I can replace loading message using JavaScript), and in solution using only server process, without JavaScript (if possible).
I'd like to replace loading message with response as soon as it is available.
Here's what I would do in implementing this client side.
This would be quite easy to accomplish using an Ajax call. Set a div on your page to show the "Generating... please wait" message when you first make the Ajax call. (A simple unimaginative animated graphic would suffice to cue the user's expectation of a pending operation. Convention = understanding = good interface.) Then pass a function into the readystatechange handler that updates the div with the message/progress graphic once the Ajax request returns.
function ShowPendingOperation(){
var resultHolder = document.getElementById( 'statusDiv' );
resultHolder.innerHTML = "Your data is loading... <img src='yourProgressAnim.gif'>";
var request = GXmlHttp.create();
request.open("post", "/yourScript", true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
request.onreadystatechange = function() {
if (request.readyState == 4) {
resultHolder.innerHTML = "operation complete";
resultHolder.innerHTML += "result1";
resultHolder.innerHTML += "result2";
resultHolder.innerHTML += "etc";
}
}
request.send( 'field1=data1&field2=data2' );
}
Note the snippet above is drawn from sample code written for a Google Map site, presumably your line creating the XMLHttpRequest object will vary...
You would need to use JavaScript to accomplish this without reloading the page. Here's a sample of using jQuery to create this type of effect.
http://trevordavis.net/blog/tutorial/ajax-forms-with-jquery/
The only way you could do this from the server side would be to show the message on the page you're POSTing to and write to the screen using a buffered output before you do the actual processing.
Here's what I would do:
When you determine that you have to perform a long operation, start a thread and associate that thread with an ID of some sort. Do not re-use the IDs.
Return the user to a page that says "Generating".
If ajax, use ajax to periodically poll the server or to perform a request that will block until the operation completes. This request has the ID in it and that is how the server knows what message to return.
If no ajax, use a meta-refresh to periodically reload the page with the specified ID. Repeat until the transaction is done. Note: in this case you should put a message on the page indicating when the refresh will happen and include a link to reload the page for people whose browsers don't support (or ignore) meta refresh.
JqueryUI's Tabs plugin has this built in, you could easily tie into their plugin to do what you want without having to write it yourself.
Without script: You could redirect to an intermediate web page with a "please wait" message that redirects to the result page when the process is complete.
With script: Your page could have a hidden div that shows up with a "please wait" message. That div could also be as big as your page and transparent (with the message in a smaller div) so that your users cannot click on the page while the message is displayed.
One of the trick I have found is to use <meta http-equiv="refresh" content="0" /> to redirect to ready view... but not closing html tag and not closing connection till the final response is ready:
print <<'EOF';
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="refresh" content="0"/>
<title>$title</title>
</head>
<body>
EOF
print "Generating...";
while (!is_ready()) {
print ".";
wait();
}
print <<EOF;
</body>
</html>
EOF
Is that something that has the chance of working, or does it work only by accident?