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
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.
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.
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!
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
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
}
});
});