I am writing a program that should simulate clicking on submit in AJAX, after which the page should asynchronously reload. I wrote a program, that asynchronously reloads the page, but only if I click on the submit button.
Here is my program:
$("#form_id").submit(function() {
var str = $(this).serialize();
$.ajax({
type: "POST",
url: "../async_db.php",
data: str,
success: function(html) {
$('#d_id').html(html);
}
});
return false;
});
To reload a page after post data by ajax asynchronously you can use location.reload() at the end of the submit() function.
$("#form_id").submit(function() {
var str = $(this).serialize();
$.ajax({
type: "POST",
url: "../async_db.php",
data: str,
success: function(html) {
$('#d_id').html(html);
}
});
return false;
location.reload();
});
Related
I am submitting a form via an ajax post request but there is a possibility that there is also one get parameter and if the get parameter is set it must be included in the post request.
I currently have this:
jQuery(document).ready(function($) {
$("#plugin_check").submit(function(e) {
e.preventDefault(); // avoid to execute the actual submit of the form.
var form = $(this);
var actionUrl = form.attr('action');
$.ajax({
type: "POST",
cache: false,
url: actionUrl,
data: form.serialize(), // serializes the form's elements.
success: function(data)
{
$("#result").html(data); // show response from the php script.
}
});
});
});
I need to figure out how to put $_GET['datesort'] into the post data.
you can try this, create variable to save datesort and add this to ajax data
jQuery(document).ready(function($) {
$("#plugin_check").submit(function(e) {
e.preventDefault(); // avoid to execute the actual submit of the form.
var form = $(this);
var actionUrl = form.attr('action');
var queryString = window.location.search;
var urlParams = new URLSearchParams(queryString);
var datesort = urlParams.get('datesort')
$.ajax({
type: "POST",
cache: false,
url: actionUrl,
data: form.serialize() + `&datesort=${datesort}`, // serializes the form's elements.
success: function(data) {
$("#result").html(data); // show response from the php script.
}
});
});
});
Hi I have function in javascript where I delete photos from database and from server. It work fine, I delete photo but this photo is still in my browser. I have question. How can I refresh only on javascript side?
container.addEventListener("click", function(e){
if(e.target.tagName == 'BUTTON'){
var id = e.target.dataset.type;
var r = confirm("Are You sure to delete?");
if (r == true) {
$.ajax({
type: 'POST',
url: 'index.php?r=gallery/deletep&name='+id,
dataType: 'html'
});
}
}
});
Now I treid to add
location.reload();
after ajax but I don't want to refresh all page. How Can i delete dynamically from browser?
OK in this type of situation you have two options. Either you load contents using AJAX request or remove the element from DOM either using class or id of that element.
So what happens is if you have loaded content using AJAX you can load all those contents again after successful deletion of image.
$.ajax({
type: 'POST',
url: 'index.php?r=gallery/deletep&name='+id,
dataType: 'html',
success: function(response) {
$(e.target).remove();
}
});
OR,
$.ajax({
type: 'POST',
url: 'index.php?r=gallery/deletep&name='+id,
dataType: 'html',
success: function(response) {
// use next ajax query to load content on DOM
}
});
you don't need to reload the whole page to remove the image. Use remove() API from jQuery in the success callback in AJAX call.
$.ajax({
type: 'POST',
url: 'index.php?r=gallery/deletep&name='+id,
dataType: 'html',
success: function(response){
$('img#id').remove();
}
});
alright, I have a popup which displays some notes added about a customer. The content (notes) are shown via ajax (getting data via ajax). I also have a add new button to add a new note. The note is added with ajax as well. Now, the question arises, after the note is added into the database.
How do I refresh the div which is displaying the notes?
I have read multiple questions but couldn't get an answer.
My Code to get data.
<script type="text/javascript">
var cid = $('#cid').val();
$(document).ready(function() {
$.ajax({ //create an ajax request to load_page.php
type: "GET",
url: "ajax.php?requestid=1&cid="+cid,
dataType: "html", //expect html to be returned
success: function(response){
$("#notes").html(response);
//alert(response);
}
});
});
</script>
DIV
<div id="notes">
</div>
My code to submit the form (adding new note).
<script type="text/javascript">
$("#submit").click(function() {
var note = $("#note").val();
var cid = $("#cid").val();
$.ajax({
type: "POST",
url: "ajax.php?requestid=2",
data: { note: note, cid: cid }
}).done(function( msg ) {
alert(msg);
$("#make_new_note").hide();
$("#add").show();
$("#cancel").hide();
//$("#notes").load();
});
});
</script>
I tried load, but it doesn't work.
Please guide me in the correct direction.
Create a function to call the ajax and get the data from ajax.php then just call the function whenever you need to update the div:
<script type="text/javascript">
$(document).ready(function() {
// create a function to call the ajax and get the response
function getResponse() {
var cid = $('#cid').val();
$.ajax({ //create an ajax request to load_page.php
type: "GET",
url: "ajax.php?requestid=1&cid=" + cid,
dataType: "html", //expect html to be returned
success: function(response) {
$("#notes").html(response);
//alert(response);
}
});
}
getResponse(); // call the function on load
$("#submit").click(function() {
var note = $("#note").val();
var cid = $("#cid").val();
$.ajax({
type: "POST",
url: "ajax.php?requestid=2",
data: {
note: note,
cid: cid
}
}).done(function(msg) {
alert(msg);
$("#make_new_note").hide();
$("#add").show();
$("#cancel").hide();}
getResponse(); // call the function to reload the div
});
});
});
</script>
You need to provide a URL to jQuery load() function to tell where you get the content.
So to load the note you could try this:
$("#notes").load("ajax.php?requestid=1&cid="+cid);
$('body').on('click','.removebet i',function(e){
var a = $(this).attr("id");
var data = "a="+a;
$.ajax({
type: "POST",
url: "yorumcikar.php",
data: data,
success: function(e){
});
I'll explain the problem. I can post AJAX form with this function and there's no problem except the .removebet i comes from the ajax.
If I append .removebet i with AJAX this function doesn't work because it doesn't call AJAX.
example:
$(".maindiv").html("<span class='removebet'><i>Yes</i></span>");
Then when I clicked to 'i' tag the function at top doesn't work.
I believe this should work.
$('.removebet > i').click(function(event){
var a = $(this).attr("id");
alert(a);
$.ajax({
type: "POST",
url: "yorumcikar.php",
data: data,
success: function(retval){
alert(retval);
}
});
});
EDIT
This will work, however each newly added item will not be bound as the binding has already happened. In order to get newly added items to be bound as well you will have to rebind them when they are added.
$.ajax({call to get your new item},
success: function(data){
// add to dom
bindElement(newElement);
}
});
function bindElement(element){
$(element).click(function(event){
var a = $(this).attr("id");
alert(a);
$.ajax({
type: "POST",
url: "yorumcikar.php",
data: data,
success: function(retval){
alert(retval);
}
});
});
}
Hi i have jquery request like below ,
$('#filterForm').submit(function(e){
e.preventDefault();
var dataString = $('#filterForm').serialize();
var class2011 = document.getElementById("2011").className;
//var validate = validateFilter();
alert(dataString);
if(class2011=='yearOn')
{
dataString+='&year=2011';
document.getElementById("2011").className='yearOff';
}
else
{
document.getElementById("2011").className='yearOn';
}
alert (dataString);
$.ajax({
type: "POST",
url: "myServlet",
data: dataString,
success: function(data) {
/*var a = data;
alert(data);*/
}
});
and my Form is like ,
<form method="post" name="filterForm" id="filterForm">
<!-- some input elements -->
</form>
Well, I am triggering jquery submit on submit event of a form ,(it's working fine)
I want pass one extra parameter inside form which is not in above form content but it's outside in page
it's like below
[Check this image link for code preview][1]
So how can i trigger above event , on click of , element with class yearOn ( check above html snippet ) and class yearOff , with additional parameter of year set to either 2011 or 2010
$(document).ready(function () {
$('#filterForm').submit(function (e) {
e.preventDefault();
var dataString = $('#filterForm').serialize();
if ($("#2011").hasClass('yearOn')) {
dataString += '&year=2011';
$("#2011").removeClass('yearOn').addClass('yearOff');
}
else {
$("#2011").removeClass('yearOff').addClass('yearOn');
}
$.ajax({
url: "/myServlet",
type: "POST",
data: dataString,
success: function (data) {
/*var a = data;
alert(data);*/
}
});
});
});
1.) If you are using jQuery already, you can use the $.post() function provided by jquery. It will make your life easier in most cases.
2.) I have always had a successful post with extra parameters this way:
Build you extra parameters here
commands={
year:'2011'
};
Combine it with your form serialize
var dataString=$.param(commands)+'&'+$("#filterForm").serialize();
Perform your post here
$.post("myServlet",data,
function(data) {
/*var a = data;
alert(data);*/
}
);
OR use $.ajax if you really love it
$.ajax({
type: "POST",
url: "myServlet",
data: dataString,
success: function(data) {
/*var a = data;
alert(data);*/
}
In the end, here is the full code the way you are doing it now
$('#filterForm').submit(function(e){
e.preventDefault();
var class2011 = document.getElementById("2011").className;
//var validate = validateFilter();
alert(dataString);
if(class2011=='yearOn') {
dataString+='&year=2011';
document.getElementById("2011").className='yearOff';
} else {
document.getElementById("2011").className='yearOn';
}
commands={
year:'2011'
};
var dataString=$.param(commands)+'&'+$("#filterForm").serialize();
alert (dataString);
$.ajax({
type: "POST",
url: "myServlet",
data: dataString,
success: function(data) {
/*var a = data;
alert(data);*/
}
});