Develop Reference

Update HTML content after a webpage has been loaded without reload

I'm using php and jquery and trying to get a notification to appear after a user submits a form. I'm using ajax for the form submission so that the page does not reload. I want the notification to contain some of the information from the form so they know if it has been entered already. The notification is just a hidden div that is shown when the ajax data is sent. Is there any PHP statements or something in javascript or JQuery that can do this?

Use ajax like this:
ajaxCall("formHandler.php", yourForm);
function ajaxCall(url, postData){
$.ajax(url, {
dataType: "json",
method: "post",
data: {postData}
success: function(data) {
// your Code, example:
document.getElementById("yourDIV").style.display="block";
});
return true;
}

send the form values to multiple pages

I am working on a web application where I need to send the value from one form to more than one page.
My form is simple :
<form method="post">
<input type="text" name="name" value="">
...
</form>
I want the values from the form to be sent to :
'page1.php' which will replace the actual page containing the form displaying the message : data saved
'page2.php' which will open when I click the submit button to render the data as a PDF file
The problem is that I can only specify only one target using the action attribute of the form.
Anyone can helps ? Thanks in advance.
Could I use JavaScript or jQuery or other ?

You can do it using JavaScript and jQuery for example. The easiest way is send two ajax requests:
$('form').submit(function() {
$.ajax({
async: false,
method: 'POST',
url: 'page2.php',
data: $( this ).serialize(),
success: function() {
window.open("http://www.stackoverflow.com"); //this page will be open in new tab
}
});
$.ajax({
async: false,
method: 'POST',
url: 'page1.php',
data: $( this ).serialize(),
success: function() {
window.location.href = "http://stackoverflow.com"; //redirect to this page
}
});
});

You could use Jquery.post() with different URLs and the same data.
More about the usage is here: https://api.jquery.com/jquery.post/

jQuery .load() to a different page

I have a form on a pop up window called add_weekly_job.php and once it has been successfully submitted I want to load content from diary_weekly_load.php to a div on another page diary_weekly.php.
I know how to use .load() to get content from a different page but not how to send content to a different page or even if it can be done?
$(".add_weekly_job_submit").on( "click", function (){
var week_start = $('input[name=week_start]').val();
var user_id = $('input[name=created_by]').val();
alert(user_id);
jQuery.ajax({
type: "POST",
url: "ajax/diaries_change_ajax.php",
dataType: "json",
data: $('#add_job_form').serialize(),
success: function(response){
if(response.success === 'success'){
$("#diary").load("ajax/diary_weekly_load.php?week_start="+week_start+"&user="+user_id);
}
},
});
});
The button add_weekly_job_submit is displayed on the pop up page add_weekly_job.php and the page I want the content to load on is diary_weekly.php
The reason I am using a pop up page rather than just a javascript pop up is because the user needs to be able keep it open if they navigate away from diary_weekly.php

I finally managed it by using
if(response.success === 'success'){
window.opener.$("#diary").load("ajax/diary_weekly_load.php?week_start="+week_start+"&user="+user_id);
window.close();
}

Multiple requests issue with ajax calls

I have a multi-tab feature incorporated with ajax calls.
show.html.erb
<a href="#tabs-2A<%= id %>"> # dynamically generated tabs within loop
$.ajax({
type: "GET",
url: "/controller1/method1",
dataType: "html",
data: { },
success: function (html) {
$(element).find("#id").append(html);
}
});
OnClick on any these tabs triggers ajax call. note: I have used append above.
partial which is getting appended, similar to actual one
<td><input type="checkbox" data-some_id="<%= #object.id %>", id="dots"/></td>
JS.
$('body').on("click", "#dots", function(){
$.ajax({
var some_id = $(".dot-checked").data('some_id');
type: "GET",
url: "/controller1/method2",
dataType: "json",
.....
});
});
So you can see there is ajax call within this partial.
Everything works fine.
But,
I'm running into multiple requests issue(onclick for checkbox), when you click on a same tab multiple times or even if we click on other tabs.
It's because of script that is getting appended every time for partial page request.
Number of duplicate requests(/controller1/method2) is equal to number of times tab is clicked.
How do I get over this?
If it's not clear, feel free to comment.

One way to solve this issue is to prevent the checkbox from being clicked twice when an AJAX call is in progress. Since you're working with a checkbox, it's usually better to use the change event handler, rather than click. This method will disable the checkbox until the AJAX call is complete.
$("#dots").on("change", function(){
$(this).prop('disabled', true); // disable on click/change
$.ajax({
type: "GET",
url: "controller/method",
dataType: "json",
complete: function() {
$('#dots').prop('disabled', false); // re-enable after AJAX is complete
}
});
});

How to have 2 Ajax Calls for 2 different PHP files?

I'm having 3 php files,
first one is posts.php ,inside this file some PHP code and here's the javascript and AJAX code:
<script type="text/javascript">
$(document).ready(function(){
$("table").on('click','a',function() {
var ID = $(this).attr("id");
$.ajax({
type: 'POST',
cache: false,
url: 'posts_info.php',
data: {id:ID},
success: function(html){
$("#more"+ID).before(html);
alert('this is the info');
}
});
});
$('#content').on('click','.more',function( event){
var ID = $(this).attr("id");
if(ID)
{
$("#loader").show();
$.ajax({
type: 'POST',
url: 'posts_load.php',
data: {id:ID},
cache: false,
success: function(html){
$("#loader").hide();
$("#more"+ID).before(html);
$("#more"+ID).remove();
alert('this is moreee posts');
}
});
}
});
});
</script>
The first ajax call happends when the user clicks on an image.The second when the user clicks on a hyperlink "more". Each of the posts.info file and posts_load file loads different content
When the user clicks on the image the content from the posts_info is displayed successfully.Also, when the user then clicks on the more link the content of the posts_load is displayed successfully.The problem is when the user clicks on more ,posts_load.php is loaded.However after that when the user clicks on the image , nothing is displayed from "posts_info.php". The call is made successfully till the alert part however nothing is displayed.Any help?

problem is when the user clicks on more ,posts_load.php is
loaded.However after that when the user clicks on the image , nothing
is displayed from "posts_info.php".The call is made successfully till
the alert part however nothing is displayed
As i can see your code may be problem is this:
When you click on Image, In second ajax call you are removing element:
$("#more"+ID).remove();
Then you are adding when click on a
$("#more"+ID).before(html);
Its not adding response content because element is already removed from DOM.