I currently have a link:
<a href="view.php?page=1">Click Here<a>
What I need is to do the same thing using ajax so that I don't have to go to a different url and still get the same result.
UPDATE:
I have page A and page B
On page A I have a link to page B
<a href="view.php?page=1">Display Page B<a>
<div id="page-b-goes-below">
Page B goes here
</div>
Can the above be done please?
HI,
You cant change a pages complete html with ajax, and the script in the ajax file won't be executed. so you have to make some tricks
some thing like iframe or a master div.
if you wish to use iframe ajax is no need.
still you need this in ajax what you have to do is.
1. ajax files should have only the body content not even the body tag.
2. have a div next to body tag of the first page and load all the file with ajax in that div.
Example:
First or Initial page.
<html>
..........
..........
<body>
<div id="ajax-container">
you content comes here..
........................
........................
</div>
<script>
$(document).ready(function() {
init_linkhandler();
});
function init_linkhandler() {
$('a').click(function() {
$('#ajax-container').load($(this).attr('href'));
init_linkhandler();
return false;
});
}
</script>
</body>
Related
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="Chat_Box_Files/Script_Files/AJAX.js"></script>
</head>
// JavaScript Document
$(document).ready(function(){
// load index page when the page loads
Load_ajax_page("http://betaserver.bioprotege-inc.net/chat_selector/Chat_Box_Files/Script_Files/Applet_Files/Index.html");
$("#ChatMaster").click(function(){
Load_ajax_page("#");
});
});
function Load_ajax_page(url){
//before we make a ajax request we have to show the loading image
$("#Applets").html('<center>Loading... Please Wait...</center>');
//this is a jquery method to make a ajax request
$.post(url,"",function (data){
//this is the place where the data is returned by the request
//remove loading and add the data
$("#Applets").html(data);
});
}
<div id="Applets">
</div>
http://jsfiddle.net/N278r/
here is my fiddle of it all in action, but it wont display the content from the html file, it used to idk what I have done wrong?
It looks like you are using ASP.NET on the server. You can add the following line to your source pages:
Response.AppendHeader("Access-Control-Allow-Origin", "*");
jQuery Mobile 1.3.2: I have a listview with the filter enabled. The page that this is on is loaded via jQuery mobile ajax.
My problem is that if I allow it to load via ajax, it detects my keyup event but it does not pull the value of input[data-type="search"]. If I refresh the page using the browser, the script executes perfectly.
How can I get this to work while loading the page with AJAX?
HTML MARKUP:
<ul id="addCompany" style="padding-bottom:10px;" data-role="listview" >
<li>Touch To Add</li>
</ul>
<div id="listwrap">
<ul data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
<li>Adam Kinkaid</li>
</ul>
</div>
jQuery
<script>
$(document).ready(function(){
var inputVal;
$('body').on("keyup",'input[data-type="search"]', function(){
inputVal = $('input[data-type="search"]').val();
if(inputVal===""){
$('#dynamic').html('<li>Touch To Add</li>');
$('#dynamic').listview("refresh");
}else{
$('#dynamic').html('<li>Touch Again To Add: '+$('input[data-type="search"]').val()+'</li>');
$('#dynamic').listview("refresh");
}
});
});
</script>
EDIT: Note that I can set the value and set the focus on input[data-type="search"] without any hiccups. It is retrieving the value that seems so tricky.
I tried adding a class to so that I wouldn't have to call it by data attribute but still couldn't pull the value unless I refreshed the page. Maybe if I inject a function into the input element I can use that to return the value?
BACKGROUND: I'm trying to use .load() to build a site from several
pages, where a user can click a button to load the next page's
content using .load().
PROBLEM: The .load() only works on the first click (loads
content from pagetwo.html), then doesn't load any
content for pages after that.
CODE:
My start page markup looks like this:
<head>
<script src="script.js"></script>
</head>
<body>
<div class="content">
<p>This is page 1.</p>
<button id="pageone">next</button>
</div>
</body>
Then my pages 2-5 contain only partial HTML, to be loaded
into div.content:
Page 2:
<p>This is page 2.</p>
<button id="pagetwo">next</button>
Page 3:
<p>This is page 3.</p>
<button id="pagethree">next</button>
Etc.
My jQuery script.js is loaded only once, with the full start page html:
$(document).ready(function() {
//load pages
$('button#pageone').click(function () {
$("div.content").load("page-two.html");
});
$('button#pagetwo').click(function () {
$("div.content").load("page-three.html");
});
$('button#pagethree').click(function () {
$("div.content").load("page-four.html");
});
});
Any ideas on why only the first .load() request works?
The ID #pagetwo and on onwards are newly introduced elements to the DOM after the first initial $(document).ready(). Thus, you'd have to access it differently there after:
$(document).on('click', 'button#pageone', function() {
$("div.content").load("page-two.html");
});
$(document).on('click', 'button#pagetwo', function() {
$("div.content").load("page-three.html");
});
$(document).on('click', 'button#pagethree', function() {
$("div.content").load("page-four.html");
});
The .on() handler will listen to any new elements through the entire document (As it starts at root) at any one stage. Your initial code was looking for elements that were present on just page load.
To read more about it, See the documentation about the .on() handler regarding new elements at "Direct and delegated events".
EDIT italics = more detailed explanation added to the question. Thanks.
I'm building a jQuery Mobile site which has a Gallery section.
The gallery has a series of thumbnails on the top of the screen.
Users click on the thumbnail to load in new content, that being a larger image, text, and potentially audio on some of them.
It's at this point that I'm not sure what to do: the way jQuery Mobile works, it's geared towards loading new pages, or views. But I just want to inject new content in a container on the current page.
To be clear, when the user clicks on another thumbnail, a new image replaces the content of the container with new content.
I have two questions:
I'm not sure how to structure the dynamic content. I was thinking i'd create an html file for each item, which as a rule always contains a title, information and sometimes, audio.
I'm not sure how to script this functionality in jQuery Mobile. It's obviously Ajax, but I'm not familiar with it yet, especially since jQuery Mobile has it's own methods in place already which seems to redefine behaviors in a way that's contradictory to this approach described here.
Here is a code explanation of what i'm trying to do:
<!-- Galleries -->
<div data-role="page" id="galleries">
<div data-role="content" role="main">
This is the Selection UI, if i click on thumb2.jpg, it'd
fill #content-holder with the whatever html is in content2.php
<div id="thumb-carousel">
<img src="thumb1.jpg">
<img src="thumb2.jpg">
<img src="thumb3.jpg">
<img src="thumb4.jpg">
<img src="thumb5.jpg">
<img src="thumb6.jpg">
<img src="thumb7.jpg">
<img src="thumb8.jpg">
<img src="thumb9.jpg">
</div>
<!-- This is the container, currently it's filled
with the kinda stuff i need to put in it. -->
<div id="content-holder">
<img src="myimage1.jpg"/>
<p>Artwork Title</p>
<p>Caption</p>
<audio>//mp3</audio>
</div>
</div>
</div>
//remember to use event delegation because you never know when the page will be in the DOM
$(document).delegate('#galleries', 'pageinit', function () {
//bind a `click` event handler to each thumbnail link
$('#thumb-carousel').children().bind('click', function () {
$.ajax({
url : $(this).attr('href'),
success : function (serverResponse) {
//select the container,
//then fade it out,
//change it's HTML to the response from the AJAX request,
//and fade it back in
$('#content-holder').fadeOut(500, function () {
$(this).html(serverResponse).fadeIn(500);
});
},
error : function (jqXHR, textStatus, errorThrown) {
//remember to handle errors so your page doesn't seem broken to the user
}
});
//prevent the default behavior of the link, which is to navigate to the `href` attribute
return false;
});
});
This expects your server-response to be valid HTML markup that is ready to inject into the DOM, meaning no <html> or <body> tags, just what you want to add to the DOM:
<img src="..." />
<span>TITLE</span>
<audio src="..."></audio>
Here are some docs for ya:
$.ajax(): http://api.jquery.com/jquery.ajax
.closest(): http://api.jquery.com/closest
.fadeIn(): http://api.jquery.com/fadein
I've an ajax code like this:
var req = new XMLHttpRequest();
req.open('GET', 'http://www.example.org/', false);
req.send(null);
if(req.status == 200)
var response = http_attendance.responseText;
document.getElementById('divAttendance').innerHTML = response;
When I get result on the page, FF browser shows the DOM elements on 'divAttendance'. If I want to put put some jquery effect on the result, I can't be able to do it.
DOM elements is clearly viewed using firebug. But, when I generate the source code of that page then there is no repsonse text on 'divAttendance'. It is blank like thisL:
<html>
....
..
<div id="divAttendance"></div>
..
..
</html>
How to manipulate or put some effect on that result ???
Well, if you are using jQuery then you should be using jquery ajax anyways
http://api.jquery.com/jQuery.ajax/
Regardless, if you are populating your div with AJAX response then it will not show up using "View Source" rather you will have to use a tool like firebug.
Your div initially should look like following
<div id="divAttendance" style="display:none"></div>
and your javascript should have the following
.....
document.getElementById('divAttendance').innerHTML = response;
$("#divAttendance").show("slow");
For such operations jQuery load is easy and usefull function, have a look at
http://api.jquery.com/load/
Your specific example can be rewritten as
<html>
....
IMPORT JQUERY.JS
<script language="javascript">
$('#divAttendance').load('http://www.example.org/', function() {
$("#divAttendance").show("slow");
});
</script>
..
<div id="divAttendance" style="display:none"></div>
..
..
</html>