Change window location Jquery - javascript

I am using ajax to load my website content and want to update the window location when ajax is successful.
How can I update the window location to "/newpage"?? I need users to be able to go back and to refresh. Is this possible??

I'm assuming you're using jquery to make the AJAX call so you can do this pretty easily by putting the redirect in the success like so:
$.ajax({
url: 'ajax_location.html',
success: function(data) {
//this is the redirect
document.location.href='/newpage/';
}
});

You can set the value of document.location.href for this purpose. It points to the current URL. jQuery is not required to do this.

you can use the new push/pop state functions in the history manipulation API.

Assuming you want to change the url to another within the same domain, you can use this:
history.pushState('data', '', 'http://www.yourcurrentdomain.com/new/path');

If you want to use the back button, check this out. https://stackoverflow.com/questions/116446/what-is-the-best-back-button-jquery-plugin
Use document.location.href to change the page location, place it in the function on a successful ajax run.

I'm writing common function for change window
this code can be used parallel in all type of project
function changewindow(url,userdata){
$.ajax({
type: "POST",
url: url,
data: userdata,
dataType: "html",
success: function(html){
$("#bodycontent").html(html);
},
error: function(html){
alert(html);
}
});
}

Related

Ajax clear cache of selected data

I use ajax in Arcgis Javascript (if you are familiar, i just inform you that i use it, never mind) to select some data and show it in modal window, but i have problem, e.g. i clicked several feature on map (e.g. 3 features) and on each click i get different info, but if i click info button again and again it shows these selected features one by one even though i have selected different feature on map, it stores data and does not show correct info when i continue click and get info from a map.
I use 'cache: false' in $.ajax but it's not working.
Any help please, i checked this article, but it didn't help.
here is a piece of code i use
$(document).on('click', '#vf', function () //
{
var folder_name = 'inv_images/' + graphic.attributes.Wis_invent_N;
var action = "fetch_files";
$.ajax({
url: "action.php",
method: "POST",
data:{
action:action, folder_name:folder_name,
},
cache: false,
success: function(data)
{
$('#file_list').html(data);
$('#filelistModal').modal('show');
}
})
});
});
If it's the browser that's caching the ajax request (ex. IE does that) then you can change the actual request that's done by adding a timestamp to the url:
...
$.ajax({
url: "action.php?t=" + new Date().getTime(),
...
The backend should ignore the extra t parameter, but your browser thinks it's a different url therefore doesn't use the cached response.

Ajax loading image error

my question is very simple. I have drafted the code as follow for showing the loading image when the form is being posted. The loading image can be shown properly. However, it cannot hide automatically after the result is returned. May i know what is the error?
HTML
<div id="loading"></div>
Ajax
function email_subscribe(){
$('#loading').html('<img src="loading.gif"> loading...');
$.ajax({
type: 'post',
url: 'index.php?subscribe',
dataType: 'html',
data:$("#subscribe").serialize(),
success: function (html) {
$('#loading').html();
eval(html);
}});
}
You're just calling the .html() method without any parameters (which serves as a getter). To achieve what you're looking for here, you need to at least pass in like an empty string to set and overwrite existing content.
$('#loading').html('');
I also think you should not use eval....
...and yes call .html() with an argument like:
$('#loading').html(" ");
or
$('#loading').html(" ");

AJAX Getting Data, Post Back and Get Again

I'm trying to do the following thing with AJAX:
Visitor click button/ AJAX show spinning/loading image to visitor.
AJAX Visit URL 1 http://www.mywebsite.com/url1.php and it'll return a random code, for example 1357.
Then, I want it to visit URL 2 http://www.mywebsite.com/url2.php?code=1357&action=ask (1357 is a variable from url1). URL 2 will verify the request return a final code. I want to show the code to the visitor after removing the spinning/loading image.
How do I do that?
Thanks in advance.
Try this.
$.get("http://www.mywebsite.com/url1.php").done(function(data){
$.get(
"http://www.mywebsite.com/url2.php",
{code: data, action: "ask"}
).done(function(next){
$("#result").html(next);
});
});
Try this:
$.ajax({
url: 'http://www.mywebsite.com/url1.php',
dataType: 'html',
type: 'GET',
success: function (data) {
// Show the random code, like 1357
$(".result").html(data);
$.ajax({
url: 'page2.php?rand_n=' + data, // Change rand_n to what you want
dataType: 'html',
type: 'GET',
success: function (data2) {
// Hide the spinning/loading image
$("#loading_img").hide();
// Show final code
$(".result").html(data2);
}
});
}
});
Here is my idea for you:
Method one:
1.ajax request http://www.mywebsite.com/url1.php
2.in url1.php generate a random code like :1357
3.use [curl][1] request http://www.mywebsite.com/url2.php?code=1357&action=ask
4.echo result from curl2 to frontend
above only need one time ajax,the second request use curl quietly..
Method two:
you also could use header to redirect the url:
go on with step 2:
step 3:could use header('Location: http://www.mywebsite.com/url2.php?code=1357&action=ask');
step 4:url2.php should echo the result.
this tow method only have one ajax request and won't affect you frontend ,i recommand you use method two,method one is better used in different domain..

Append a php file with jquery

i have a file which echoes out data from a database.
I wish to have a load more button which appends this file so that it will keep loading the rest of the results.
The php page works fine but need help with the jquery...
have used this else where for a json return but dont think this is needed for this.
So i am trying this:
$(document).ready(function(){
$("#loadmore").click(function () {
$("#content").append('includes/loadmorebuilds.php');
});
});
In essence, this works but it appends 'includes/loadmorebuilds.php' as just that. I simply appends those words and not the file.
Any help on this?
Many thanks!
You could use $.ajax to get content from file to be appended into DOM. One important thing is that you should use Relative PATH to your web root on url parameter in $.ajax
So it will become like this
$('#loadmore').click(function() {
$.ajax({
url: '/relative/path/to/your/script',
success: function(html) {
$("#content").append(html);
}
});
});
And make sure you should be able to access your script on http://www.example.com/relative/path/to/your/script
You have two options:
$('#content').load('includes/loadmorebuilds.php');
Which will replace the content of #content with the new html.
Or this:
$.ajax({
url: 'includes/loadmorebuilds.php'
}).done(function(data) {
$('#content').append(data);
});
Which will append the new data.
use $.ajax
$(document).ready(function(){
$(".loader").click(function(){
$.ajax({
url:"index.php",
dataType:"html",
type:'POST',
beforeSend: function(){
},
success:function(result){
$(".content").append(result);
},
});
});
});

How to get the html of a div from a different page with AJAX?

How can I get the html of a certain html element which is located on a different site?
Solution:
$.ajax({
url: 'somefile.html',
success: function(data) {
data=$(data).find('div#id');
$('#mydiv').html(data);
alert('Done.');
}
});
You can use $.load with an appended container
The .load() method, unlike $.get(), allows us to specify a portion of
the remote document to be inserted.
$('#result').load('ajax/test.html #container');
Make a ajax call to a php or any other file , use CURL or other tools to grab the page you want and extract the div and echo it and then when you get back the html just put it inside a div in your page
$.ajax({
url: 'somefile.html',
success: function(data) {
data=$(data).find('div#id');
$('#mydiv').html(data);
alert('Done.');
}
});
Here you go:
$('#div_id_in_your_page').load('ajax_page.html #required_div');
For class:
$('.div_class_in_your_page').load('ajax_page.html #required_div');
One way is:
send an ajax call to a server side script
this script fetches the remote page and returns HTML as a response. (generally JSON is preferred)
your page finally gets access to the html.
you can also use like this.
$.ajax({
url:"page2.html",
success:function(response){
$("#currentDIV").html(response);
},error:function(){
alert("error");
}
});

Categories