Load content in div on page load - javascript

I currently have the following:
HTML:
<div class="content-class"></div>
JQuery Ajax:
$(document).ready(function() {
$(document).on("click", ".content-class", function(event) {
event.preventDefault();
var post = $(this);
$.ajax({
url: 'script.php',
type: 'POST',
data: { /* some data */ },
success: function(data) {
// load content from php file into .content-class
});
});
});
How do I change that function so that it loads the content from the PHP file into .content-class without having to click it (so that it does it on page load)?
Thanks.

Just remove the click event listener and do the ajax straight away:
$(document).ready(function() {
$.ajax({
url: 'script.php',
type: 'POST',
data: { /* some data */ },
success: function(data) {
// load content from php file into .content-class
$('.content-class').html(data);
});
});

as PSL said, just move the ajax call outside of click event handler:
$(document).ready(function() {
$.ajax({
url: 'script.php',
type: 'POST',
data: { /* some data */ },
success: function(data) {
// load content from php file into .content-class
});
});

Related

location.href displaying the whole page

I am inserting the data into the database and display data on the page without refresh the page.
I tried $("#e-empListwrap").load(location.href + "#e-empListwrap"); but it's displaying the whole page on my page.
$("form[name='emp']").validate({
rules: {
//rules
},
submitHandler: function(form) {
var form = $('form[name="emp"]').get(0);
var formData = new FormData(form);
$.ajax({
url: baseUrl + "/controller/emp_control.php",
type: "POST",
dataType: 'json',
data: formData,
contentType: false,
cache: false,
processData: false,
success: function(data) {
$('form[name="emp"]')[0].reset();
$('#modal-addemp').modal().hide();
$("#e-empListwrap").load(location.href + "#e-empListwrap");
},
}); // AJAX Get Jquery statment
}
});
HTML
<div class="e-empListwrap mt-4" id="e-empListwrap"><ul></ul></div>
// The below is the script when refersh the page then it will call the ajax and get the the and display on the page.
<script>
fetchEMPsaved_data();
function fetchEMPsaved_data(){
$.ajax({
url:'controller/developer_control.php',
type: "post",
dataType: "json",
data: { action: "fetchEMPsaved_data"},
success: function(data) {
$("#e-empListwrap ul").append(data);
}
});
}
</script>
You are missing a space after the url, between the url and CSS target:
$("#e-empListwrap").load(location.href + " #e-empListwrap");
or else jquery handles it as an anchor of the url, not as the element ID. You are loading url.html#element but to grep an element/css target, not the whole page, the syntax should be url.html #elementOrTarget, with the space in between.

Unknown error using AJAX to stay in the same page

Following this previous link, I tried a new AJAX code, but still getting the same result (Data is inserted correctly, but can't stay in the same page).
$(function(){
$("#form1").on("submit", function(e){
$.ajax({
url: 'insert.php',
type: 'post',
data: $('#form1').serialize(),
dataType: 'json',
success: function(data) {
alert($('#form1').serialize());
});
e.preventDefault();
});
});
The form has an id="form1" and submit button inside this form is id="insert".
Any help is appreciated, need to fix this today.
The success function should be closed before closing AJAX function. You forgot to add a closing }:
$(function(){
$("#form1").on("submit", function(e){
$.ajax({
url: 'insert.php',
type: 'post',
data: $('#form1').serialize(),
dataType: 'json',
success: function(data) {
alert($('#form1').serialize() + "&insert=yes"); // add this
} //<--------------------------------------- You missed this
});
e.preventDefault();
});
});
You are sending the insert key as a parameter to post, but it doesn't work because you are not adding it while sending to AJAX. So add that and it works.

jQuery load() does not work either Chrome or Firefox

I am newbie to jQuery... I intend to load html from another location. When I try to load something bigger, I don't get any error (except 'error') or anything, nothing happens instead. Here is my code:
$(function () {
var text;
$("a").on('click', function (e) {
$.ajax({
url: $(this).attr('href'),
type: 'GET',
dataType: 'html'
}).done(function (loadedData) {
text = $(loadedData).match(/\d{3}/g);
$.ajax({
url: '#Url.Action("MvcMethod", "Home")',
type: 'POST',
dataType: 'html',
data: {
fulltext: text,
filter: ''
}
})
.done(function (tagData) {
$("#target").html(tagData);
});
});
e.preventDefault();
});
});
I have a link, full path for a file. The file is exists of course. When I click on it, I would like to pass its content to an MVC action method.
What's wrong, help me pls.
Thanks.
UPDATE: the link maybe points OUT OF domain!

Display loading while retrieving data using Ajax method

I am using ajax, sometimes it takes time to load all the data from my database therefore I need to find a way to display (Loading...) While the data is not yet complete. Below is my sample code, and I am looking for some event while the data is still in process.
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(data){
$('#para').html(data);
}
});
It is very simple..
before you call the ajax start your loading image..& after the success hide the image
for eg :
$.fancybox.showLoading();
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(data){
$.fancybox.hideLoading();
$('#para').html(data);
}
});
here
$.fancybox.showLoading()
is my function in which I have the property of displaying the loader,
This will be internally called whenever an ajax call is made.
$.ajaxStart(function() {
$("img#loading").show();
});
$.ajaxComplete(function() {
$("img#loading").hide();
});
HTML
<img src="../images/loading.gif" alt="wait" id="loading"/>
<div id="loading">LOADING...</div>
var loading = $("#loading");
loading.hide();
function doAjax() {
loading.show();
$.ajax({
url: "/js/beautifier.js",
success: function (data) {
loading.hide();
}
});
}
doAjax();
on jsfiddle

Do something after window load

I'm doing a (simple) ajax call on window load:
$(window).load(function () {
$.ajax({
url: someUrl,
type: "get",
dataType: "",
success: function(data) {
...........
How can I do something, for instance a function or event after this ajax proces is finished. The problem is I have to append something to the data recieved by the ajax call. But I can't append on window load because the data is still being processed.
Put it in the success handler of the ajax call:
$(window).load(function () {
$.ajax({
url: someUrl,
type: "get",
dataType: "",
success: function(data) {
// do whatever you want with data
}
});
});
You can call that in the success callback function of Ajax request
success: function(data) {
myFunction() ; // If function
$('#elementID').click() // If you want to trigger a click event
}
You may use the
`$(document).ready`
So it will be similar to this:
$(document).ready(function(){
$.ajax({
url: someUrl,
type: "get",
dataType: "",
success: function(data) {
//Your code should be here
After
success: function(data) {
for (var ii = 0; ii < data.length; ii++){
building html here
}
your code here
}
you want to enter in your functions within the success function for the ajax call but before the call is complete.
You could also do
$.ajax({
url: someUrl,
type: "get",
dataType: "",
context: document.body
}).done(function() {
// do whatever when is done
onCompleteFunction();
});
this should execute your request when page is just loaded.
$(function(){
$.ajax({
url: someUrl,
type: "get",
dataType: "",
success: function(data) {
// do whatever you want with data
}
});
});
or you can do:
$(function(){
$.ajax({
url: someUrl,
type: "get",
dataType: "",
complete: function(data) {
// do whatever you want with data
}
});
});

Categories