I want a part of another page with Ajax Loading. When you click on a button. I have a page. But, i want load only the .section div in the page. When i click on the button. Than only the .section page in the other page must be load.
But, how can i load with ajax / jquery. Only a div from a other page.
You can do this without ajax using jQuery's load method. With this, you can load the content returned into your #div_id or body. Here is an example to load your content into your page's body;
$("#your_button_id").click(function() {
var myUrl = "yourpage.html #div_id_having_data";
$("body").load(myUrl);
return false;
});
Take a look at the jQuery Ajax/load documentation
If i have understood your question properly, then this would be the solution,
On button click load the whole page (.section should be hidden). Then on click of the other button just toggle the .section div.
Related
I tried to refresh some div in my page with ajax load by using .load() but didn't work. I have to create new file page that use php to echo my div again. So Question is Do I have to create new file for echo that div, if I just want to refresh some div in my page?
$("button").click(function(){
$("#div1").load("currentpage.php");
});
above is not work.
I have to use below code.
$("button").click(function(){
$("#div1").load("otherpage.php");
});
Use Ajax for this.
Build a function that will fetch the current page via ajax, but not the whole page, just the div in question from the server. The data will then (again via jQuery) be put inside the same div in question and replace old content with new one.
Relevant function:
http://api.jquery.com/load/
eg
$('#thisdiv').load(document.URL + ' #thisdiv');
Note, load automatically replaces content. Be sure to include a space before the hastag.
Reference link : Refresh Part of Page (div)
I have an update panel in aspx page.
Click on one of the button show a div from code behind, and load to that div element from another page
ScriptManager.RegisterClientScriptBlock(this.Page, typeof(UpdatePanel), Guid.NewGuid().ToString(),
"UpsalePopup(); $('#MyDiv').load('PopUp/UpsaleAdv.aspx #UpsaleAdvPanel');"
, true);
And its working perfect.
After user close that div (have only picture)
click on asp Button to do function on server side, go to '/UpsaleAdv.aspx' and show it as 404.
Is the load() function ruin my page ? how can I prevent it or solve it ?
The page 'PopUp/UpsaleAdv.aspx' was an aspx page with <form> tag.
And after do this function:
$('#MyDiv').load('PopUp/UpsaleAdv.aspx #UpsaleAdvPanel');"
it makes the current page (myaspa.aspx) to get the funcunality from PopUp/UpsaleAdv.aspx
And once I removed the <form> tag and replaced the page to inherit from master page all works perfect.
Im using javascript - ajax and jquery to load all contents from php files which is under (#menu a)[see below 'you.php'] without refreshing the page when navigating across the page - which works perfectly.
However, how do I create a hyperlink of somesort on content-A (which loads and shows all the contents from home.php) when clicked, it relocates & shows the user to/the contents of settings.php(B).
Please note my href hyperlinks doesn't have .php at the end. The 'general.js' file explains why.
(you.php):
<div id="menu">
Home
Settings // Content (A)
</div>
<div id="content"><div>
<script src="./js/jquery-2.1.4.min.js"></script>
<script src="./js/general.js"></script>
(general.js):
$(document).ready(function() {
// initial content that will be loaded first upon logging in:
$('#content').load('home.php');
// handle menu clicks
$('#menu a').click(function(){
var page = $(this).attr('href');
$('#content').load('' + page + '.php');
return false;
});
});
(home.php):
<h1> welcome to homepage </h1>
Would you like to go to your settings?
Click here: <a href="settings.php>Settings</a>
Obviously the problem with doing the href hyperlink like this in home.php, is that it goes directly to the settings.php page. Which makes my general.js (ajax) and jquery file pointless.
Since the whole point of using ajax and jquery is for smooth navigation and no page refresh upon navigating around the website.
and No, I do not want to load the contents of settings.php within the contents of home.php, 'loadception' is not what I'm looking for.
This is my simple question, I would like a simple answer in php,javascript,ajax.
Any ideas?
You need to use event delegation. To better performance in my example, all links that must be loaded into "#content" have a class "open" so, in jquery you could do some like this:
$('#content').on('click', '.open', function(e) {
e.preventDefault();
var page = $(this).attr('href');
$('#content').load('' + page + '.php'); // concat .php if it's only necessary
});
Updated
I created a demo on github: https://github.com/josemato/stackoverflow/tree/master/spa-event-delegation
is there any way that loading GIF image while onclick and simultaneously, navigation should happen.
i tried using jquery but loader animations are not happening while page navigates in some mobile browser, is there a solution using ajax to overcome that problem?
The best way to do is is to use AJAX to load new content. What you can do is have a button which when clicked clears the html of the initial page and reloads content for the other html page.
Lets say you have the page's HTML contents in a div called #div and there's a button called #button which when clicked takes you to the new page. What you can do now is that whenever #button is clicked, you can clear the HTML contents of the current div, load the HTML of the new page (and while it loads you can display the GIF image) and then populate the div with the HTML of the new page.
$("#button").click(function() {
//till the time the post function below doesn't return the following image will be displayed
$("#div").html('<img src = "images/ajax-loader.gif" />');
$.post("get_html.php", function (data) {
//get the new HTML content
$("#div").html(data);
});
});
This is just an example, if you are more specific in what you need, maybe I could write code suited to your needs.
I'm just building a small game, so i loading the first page (Intro) and then, i need immediately start loading the Second page (The 1st level of the Game, but just load, without show it), and then wait for the user click to Show it..
Here is my code for now:
in my html page:
<body id="loadlevel">
in my JS page:
var level1 = "level1.html";
$("#loadlevel").load(level1).fadeIn("slow");
But it show the loaded page immediately!..
How can i load the next page and then wait for the user input to show the loaded page?..
I though to use the JQuery hide() and show(), but hide() will hide the entire page (Also the current page) ;)
Create some invisible field and load data.
<div id="temp" style="display:none;"></div>
Then in JS
var level1 = "level1.html";
$("#temp").load(level1);
and
$('#start').click(function(){
$('#main').html($('#temp').html());
});
Your best bet is to have a main div that's initially hidden with css or jquery, then load the content into there and fadein.
.load()-loads data from the server and place the returned HTML into the matched element.
Whenever an Ajax request is about to be sent, jQuery checks whether there are any other outstanding Ajax requests. If none are in progress, jQuery triggers the ajaxStart event. Any and all handlers that have been registered with the .ajaxStart() method are executed at this time.
css:
.get-in{
background:white;
position:absolute; // or fixed
left:0;
top:0;
width:100%;
height:100%;
}
jQuery:
$('#loadlevel').ajaxStart(function() {
$('<div/>').appendTo('body').addClass('get-in');
});
$('.get-in').on('click', function(){
$(this).fadeOut("slow");
});