I'm Using AJAX to dynamically fetch data from my php page and display it on a html page. Its not working. Here is the link to the page
HTML Page where the call is made and result should be displayed
<h3>John</h3>
<div>
<p class="post">Result to be displayed</p>
</div>
AJAX code
$.ajaxSetup ({
cache: false
});
// load() functions
var loadUrl = "../load.php";
$("#get").click(function(){
$(".post")
.html(ajax_load)
.load(loadUrl, "language=php&version=5");
});
$(function(){
$.ajaxSetup ({
cache: false
});
var loadUrl = "../load.php";
$("#get").click(function(){
$(".post")
.html(ajax_load)
.load(loadUrl, "language=php&version=5");
});
});
Is pretty much what you want.
Related
So I have this simple AJAX load method to load an URL:
<div id="load">
<h1 id="status">Loading...</h1>
</div>
<script type="text/javascript">
$(document).ready(function(){
$.ajaxSetup({cache: false});
var url = "http://www.example.com/get.php?id=12345";
$('#load').replaceWith($('<div>').load(url));
});
});
</script>
At the moment I dont ever see the Loading... whilst the AJAX is loading, however shouldnt my method only replace it after it's loaded the new content. On a side note, if the AJAX load failed, how would I go about replacing that status class with Failed
if you load the page into a $('<div>') - then use the .load callback to complete the replacement of status - like so
<div id="load">
<h1 id="status">Loading...</h1>
</div>
<script type="text/javascript">
$(document).ready(function(){
$.ajaxSetup({cache: false});
var url = "http://www.example.com/get.php?id=12345";
$('<div>').load(url, function() {
$('status').replaceWith(this);
});
});
</script>
I want to use $.ajax to get any picture from a URL and show it on the page.
It should happen when button is clicked.
$(document).ready( function() {
$("button").click(function(){
$.ajax({url: "index.html", success: function(result){
$("#image").attr("src","test.png");
}});
});
});
HTML Code:
<button type = "button">Click Me</button>
<div>
<img id = "image" src = ""/>
</div>
Edit:
The errors is,
Use a server and serve your file over the http protocol
This works fine. But still I need to use a localserver to run this without the console error mentioned in edit.
$(document).ready( function() {
$("button").click(function(){
var url = 'test.png';
$.ajax({
url : url,
cache: true,
processData : false,
}).always(function(){
$("#image").attr("src", url);
});
});
});
Background: I am working on a small web application. AJAX will successfully POST the data to the action(create.php) and create.php will execute the necessary mysql query. Once AJAX is done, I append a message to the div id="container"></div> informing the user of a successful execution then clear the content "container" for future use; however, here in lies the problem.
Problem: After AJAX executes, I can not click on any HTML links already loaded onto the page(page.php). I have to refresh the page in order to click on any links and follow them to their destination. What is causing this to happen and how can I fix it?
AJAX does not need to return a result. It only needs to execute the specified jQuery code once the request is done. On a hunch, I altered create.php to echo the $_POST array and have AJAX return that as a result. Once AJAX loads the result into the "container" I still can not click on any links loaded on page.php
Answer: The DOM was not being reloaded after AJAX calls causing bootstrap dropdown menus to not function properly. The bootstrap dropdown class had to be manually reinitialized after each call. This has already been answered in detail here
create.php
<?php
if($_POST){
//run mysql query
}else{
//do nothing
}
?>
form.php
<form id="new-items">
<input type="text" name="item" />
<input type="button" onclick="create_item()" name="Submit" value="Submit" />
</form>
page.php
<html>
<head>
<script>
$(document).ready(function(){
$("#add_items").click(function(){
event.preventDefault();
$("#content").load("form.php");
});
});
function create_item(){
var form_data = $("#new-items").serialize();
var request = $.ajax({
url: "create.php",
type: "POST",
data: form_data,
});
request.done(function(){
$("#content").append('<div>User was added successfully</div>');
setTimeout(function(){
$("#content").fadeOut("slow");
}, 5000);
setTimeout(function(){
$("#content").empty();
}, 8000);
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
}
</script>
</head>
<body>
<nav>
Link1
Link2
Add New Items
</nav>
<div id="content"></div>
</body>
</html>
After you fadeOut the #content element, it remains hidden. The next time you call your AJAX function, it's loading create.php into an invisible element.
Try:
setTimeout(function(){
$("#content").fadeOut("slow", function() {
$(this).empty().show();
});
}, 5000);
Other issues: <div class="content"> should be <div id="content">; you didn't include jquery.js at the top of your script; you didn't pass the event object e to your click handler.
page.php should now look like:
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
$("#add_items").click(function(e){
e.preventDefault();
$("#content").load("form.php");
});
});
function create_item(){
var form_data = $("#new-items").serialize();
var request = $.ajax({
url: "create.php",
type: "POST",
data: form_data,
});
request.done(function(){
$("#content").append('<div>User was added successfully</div>');
setTimeout(function(){
$("#content").fadeOut("slow", function() {
$(this).empty().show();
});
}, 5000);
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
}
</script>
</head>
<body>
<nav>Add New Items</nav>
<div id="content"></div>
</body>
</html>
The anchor links in the <nav> will natually 'refresh' the page with the new content.
If you want to load the content via an ajax request then you should try the following:
Add a common class to the links
<nav>
Link1
Link2
Add New Items
</nav>
Then attach a click event to each link which intercepts the default page refresh with e.preventDefault(). The you can perform the ajax request using the href attribute of that link.
$(function(){
$(".anchor").on('click', function(e){
e.preventDefault();
var $this=$(this);
$("#content").load($this.attr('href'));
});
});
The DOM was not being reloaded after AJAX call. Boostrap dropdown module has to be manually reinitialized after each call. Detailed answered here: answer
I have a php page that i call a calendar class function to show the calendar. which is just
$calendar->show(true);
It has another function that lets you call it by
$calendar->show('July 2015')
So what i am trying to do is create a header on top that shows next and previous and then have it be a link, but i am trying to figure out how i can click on the previous link that when i click on it, just reruns the function with the date specified instead of reloading the whole page again and using url parameters. I've been looking into ajax and jquery, it seems possible, but it only shows how to post to a php page. I can't find a way to just rerun a function if thats even possible.
you need code like this:
HTML:
<div id='next' class='year'></div>
<div id='next' class='month'></div>
<div id='prev' class='day'></div>
<div id='date'></div>
<div id='next' class='day'></div>
<div id='next' class='month'></div>
<div id='next' class='year'></div>
jQuery:
$('.day, .month, .year').click(function() {
var a = $(this).attr('id'); // find prev or next clicked
var b = $(this).attr('class'); // find day or month or year clicked
$.ajax({
type: 'post',
url: //your php url,
data: {act: a, which: b, /* your other data */},
cache: false,
success: function(c) {
$('#date').html(c);
}
}):
});
and PHP:
<?php
include //your class
echo $calendar->show('$_POST['data']')
?>
i have a html page, which contains a form and i want when the form is successfully submited, show the below div:
<div class="response" style="display: none;">
<p>you can download ithere</p>
</div>
i also have a jquery function:
<script type="text/javascript">
$(function() {
$('#sendButton').click(function(e) {
e.preventDefault();
var temp = $("#backupSubmit").serialize();
validateForm();
$.ajax({
type: "POST",
data: temp,
url: 'backup/',
success: function(data) {
$(".response").show();
}
});
});
});
</script>
and in my views.py (code behind) i create a link and pass it to html page. i have:
def backup(request):
if request.is_ajax():
if request.method=='POST':
//create a link that user can download a file from it. (link)
variables = RequestContext(request,{'link':link})
return render_to_response('backup.html',variables)
else:
return render_to_response('backup.html')
else:
return render_to_response("show.html", {
'str': "bad Request! :(",
}, context_instance=RequestContext(request))
backup = login_required(backup)
my problem: it seems that my view doesn't execute. it doesn't show me the link that i send to this page. it seems that only jQuery function is executed. i'm confused. how can i make both of them to execute(i mean jQuery function and then the url i set in this function which make my view to be executed.)
i don't know how to use serialize function. whenever i searched, they wrote that:
The .serialize() method creates a text string in standard URL-encoded notation and produces query string like "a=1&b=2&c=3&d=4&e=5.
i don't know when i have to use it, while i can access to my form field in request.Post["field name"]. and i don't know what should be the data which is in success: function(data) in my situation.
thank very much for your help.
You have to get and display the data from your ajax post function, where data is the response you render through your DJango server, for example:
t = Template("{{ link }}")
c = Context({"link": link})
t.render(c):
Your JS / jQuery should become something like this:
<script type="text/javascript">
$(function() {
$('#sendButton').click(function(e) {
e.preventDefault();
var temp = $("#backupSubmit").serialize();
validateForm();
$.ajax({
type: "POST",
data: temp,
url: 'backup/',
success: function(data) {
// 'data' is the response from your server
// (=the link you want to generate from the server)
// Append the resulting link 'data' to your DIV '.response'
$(".response").html('<p>you can download ithere</p>');
$(".response").show();
}
});
});
});
</script>
Hope this helps.