I am trying to refresh a div with jquery load(); but the load displays the correct information but duplicates entire parts of the page that arent in the div
$.ajax({
type: 'POST',
url: $(this).attr('action'),
cache: false,
data: $("#uses_form").serializeArray(),
success: function(data)
{
$('#uses_form_div').load('#uses_form_div');
}
});
return false; });
i think you are having a misunderstanding..
if you want to load an external url into the div block
$('#uses_form_div').load("./a.file");
will do it. see the api docs.
Or if you are trying to load the ajax response of the $.ajax call into the div, it should be
$.ajax({
type: 'POST',
url: $(this).attr('action'),
cache: false,
data: $("#uses_form").serializeArray(),
success: function(data)
{
$('#uses_form_div').html(data); // see here
}
});
UPDATED according to comments below:
if the case of an included page to be refreshed. I have two ways to recommend.
make the included file as a separate url and load it initially. so instead of include you will be loading it via jquery as the page loads by a jquery load call. and when you want to refresh it you can do $('#uses_form_div').load("./a.file");
you can put it as include it self and when you need to update, make an ajx request get the data back. Here you have 2 choice. You can build the dom at server and give html as ajax response and simply $("#uses_form_div").html(data) or get the response as json
and build your dom at client side and load it via same $("#uses_form_div").html(data).
I also had the same problem but finally found the answer
<script type="text/javascript">
function recp() {
setInterval(function()
{
$("#result").load(location.href+ ' #my');
});
}
</script>
<div id="result">
<div id="my"><?php echo date('a:i:s'); ?></div>
</div>
Related
I am making a website with a submenu, which renders content to a div. The website is powered by Wordpress, and this part of the site is a plugin I've made. I want the content of the div to fetch info from database, i.e. I want to add PHP code. Can't seem to add any PHP though. If I make the loaded content a PHP file, it doesn't work due to the jQuery('#pageContent').html(msg) in the JS, and if I add PHP code to a HTML file, that code doesn't seem to be recognised. What would be the way to do this? I should perhaps add that the PHP I want to add is to be part of a form and as far as I can see needs to be in the same file as the HTML.
Here is the JS function with Ajax to load content:
function loadPage(url) //the function that loads pages via AJAX
{
url=url.replace('#page',''); //strip the #page part of the hash and leave only the page number
jQuery('#loading').css('visibility','visible'); //show the rotating gif animation
jQuery.ajax({ //create an ajax request to load_page.php
type: "POST",
url: ajax_object.ajax_url,
data: {
action: 'ajax_request2',
page: url //with the page number as a parameter
},
dataType: "html", //expect html to be returned
error: function(xhr, textStatus, textError) {
console.log(textError);
},
success: function(msg) {
window.alert("Working loadPage ajax!");
if(parseInt(msg)!=0) //if no errors
{
jQuery('#pageContent').html(msg); //load the returned html into pageContent
jQuery('#loading').css('visibility','hidden'); //and hide the rotating gif
}
}
});
}
I modified your function a little bit and directed it to a test site for JSON data. This little snippet works. Maybe it is helpful to you?
As the test site only returns JSON the "html" I put into #pageContent is not really html, but I hope you get the point nonetheless.
If you want to know what Ajax returned then you can always insert a console.log(msg) in the right place (see the commented-out line below).
And - just to be clear - if your loaded content is to be generated by a PHP script, then the url in your loadPage function should of course point to a PHP script on the relevant server. This script will look for the data and process it into your desired html format before sending it back as the response to the Ajax request.
function loadPage(url){
url=url.replace('#page',''); //strip the #page part of the hash and leave only the page number
jQuery('#IAmloading').show(); //show the rotating gif animation
jQuery.ajax({ //create an ajax request to load_page.php
type: "GET",
url: url, // the URL of the page to be loaded ...
data: {action: 'ajax_request2', id: 4}, //your further parameters ...
dataType: "json", //expect json to be returned
error: function(xhr, textStatus, textError) { console.log(textError);},
success: function(msg){ console.log("Working loadPage ajax!");
// console.log(msg); // show what the AJAX request returned
if(msg) //if no errors
{
jQuery('#pageContent').html(JSON.stringify(msg)); //put msg into pageContent
jQuery('#IAmloading').hide(); //and hide the rotating gif
}
}
});
}
// call the function with the URL of a test site (returns JSON only ...):
loadPage('https://jsonplaceholder.typicode.com/users');
#IAmloading {visibility: hidden}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="IAmloading">Please wait, page is loading ...</div>
<div id="pageContent"></div>
I need to know how to send HTML from partial view to Ajax request and Ajax display it in specific div in main page.
The actual issue that i had profile page that contain 2 Div's, one of them display some links. When i click on any link, new data will appear related to that link in the second div in page (dynamic page content).
So now i need to load new html that i saved in another and display it with JavaScript.
i found the solution that helps me
// get view model which need to loaded
$htmlView = new ViewModel();
$htmlOutput = $htmlView
->setTerminal(true)
->setTemplate(templateName)
->setVariable($key, $value);
return $htmlOutput;
also make ajax dataType as html
$.ajax({
type: 'GET',
url: requestedUrl,
data: {},
dataType : "html",
success: function(data) {
$('.divId').html(data');
},
error: function(error) {},
complete: function() {}
});
I am trying to get a div to reload once a checkbox has been selected or unselected and the form has been submitted. I have used AJAX and can get the form to submit on change, which works no problem. However the page has to reload to display new data.
I have built the php in such a way that it doesn't need to refresh the page or fetch a new page. If the div and it's content refreshes that should be sufficient to display the new filtered data.
Below is what I have written so far
$(document).ready(function() {
$("input:checkbox").change( function() {
$.ajax({
type: "POST",
url: "index.php?action=resortFilter",
data: $("#locationFilter").serialize(),
success: function(data) {
$('.resorts').html(data);
}
});
})
});
What do I need to do to get the div to reload after the request has been made?
I use class methods to handle the processing which return only the array of data. The requests are made to the class from a php function.
What I'm trying to do isn't actually possible to because PHP is a server side language. The best bet is to create a new intermediate file that can handle the display of the data so that it can be brought in through a normal AJAX request and get the new display from it
Where is the Ajax request? You are submitting your form through HTML/Browser. You need to use the following code:
$(document).ready(function() {
$("input:checkbox").change( function() {
var url = "path/to/your/script.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#locationFilter").serialize(), // serializes the form's elements.
success: function(data)
{
$('.resorts').html(data);
}
});
})
});
Source: jQuery AJAX submit form
this sample loading code maybe help you
<div id="loadhere"></div>
$('div#loadhere').load('ajaxdata.php',{datatosend:whatyouwantforexamplehelloworld});
I have a web application which features a bunch of different items, which are generated from a MySQL table. As users scroll through it, I want them to be able to click a link next to the item which will insert the request into a MySQL database. Normally, I’d do this by creating a PHP page (which I will do anyways) that grabs the item name & user id from the URI using the $_GET method & inserts it into the table. However, in this case, I don’t want the users to be redirected away from wherever they are. I just want the link to send off the request, and maybe display a small message after it is successful.
I figured jQuery/AJAX would be best for this, but as I’m not too familiar with it, I’m not sure what to do. Any tips are appreciated!
You have to do something like
$('.classofyourlink').click(function(e){
e.preventDefault();//in this way you have no redirect
$.post(...);//Make the ajax call
});
in this way the user makes an ajax call by clicking a link without redirecting. Here are the docs for $.post
EDIT - to pass the value to jQuery in your case you should do something like
$('.order_this').click(function(e){
e.preventDefault();//in this way you have no redirect
var valueToPass = $(this).text();
var url = "url/to/post/";
$.post(url, { data: valueToPass }, function(data){...} );//Make the ajax call
});
HTML
<a id="aDelete" href="mypage.php">Delete</a>
Script
$(function(){
$("#aDelete").click(function(){
$.post("ajaxserverpage.php?data1=your_data_to_pass&data2=second_value",function(data){
//do something with the response which is available in the "data" variable
});
});
return false;
});
See http://api.jquery.com/jQuery.ajax/
$('#my-link').click(function(){
$.ajax({
url: "mypage.php",
context: document.body,
success: function(){
$(this).addClass("done");
}
});
return false;
});
$('.classOfYourLinkToBecliked').click(function(){
$.ajax({
type:'GET',
'url':'yoururl',
data: {yourdata},
processData: false,
contentType: false,
cache: false,
dataType: 'json',
success: function(response){
alert(response);
}
});
});
I'm not sure this question has the best of titles but I'm not sure what else to call it so sorry for that.
I'm using ajax to pull in content for a div on my website (after an option is selected). The content is a form generated by a PHP script. When the form is submitted a JavaScript function should be called but I'm just getting an error that says the function can't be found.
The JavaScript is pulled in via ajax with the form and I can't really change that as it needs to change demanding on the option selected.
My question is should this work? if not I'll just have to re think the way I'm doing it, just wanted to check if it wasn't working because it never will or if I'm doing something wrong.
I would show the code but it's very long.
Thanks in advance!
Edit: thanks for all the comments ect, apologies for not including the code before here it is.
function select(id){
$.ajax({
url: 'select/'+id,
type: 'GET',
dataType: 'html',
success: function(msg) {
$('.product_details').html(msg);
return false;
}
});
}
Are you using a javascript library?
With jQuery specify a data type of html and make sure the script tags are before the HTML in the response
$.ajax({
url: "something.php",
dataType: "html",
success: function(data, text, request) {
...
}
});
in mootools...
var myRequest = new Request({
url: "something.php",
evalScripts: true,
onSuccess: function(responseText, responseXML){
....
}
});
myRequest.send();
Now your passed tags will be evaluated and available to the DOM