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();
}
Related
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;
}
I have a problem in my current application. I load lots of page content via ajax and it works always as expected. However, every time user visits another page of my application and clicks back button, those ajax calls is sent every time. I found myself deleting all of the content before ajax call and load it after that. Is there a simple way for such a case ? I mean, I would like to know if there is a way that I can be informed as back button is clicked so I don't need to make another ajax call ?
This is html file:
<div id="contentToBeLoaded">
</div>
It's my current java script now:
$(document).ready(function(){
$("#contentToBeLoaded").empty(); // This is to the handle back button is clicked
$.ajax({
type: 'GET',
url: '/pageToLoadContent',
dataType: 'html',
success: function(html) {
$("#contentToBeLoaded").html(html);
},
error: function(error) {
console.log(error);
}
});
}
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.
I want lo show some button on webpage according login status of user in mvc view page.
I'm using ajax function to check login status of user then according that button hide and show.
since page got load before ajax response come.it seem odd to hide and show button on after page page load
$(document).ready(function () {
$.ajax({
type: "GET",
url: url,
dataType: 'jsonp',
success: function (result) {
if (result.IsuserLogin == "true") {
$("#withlogin").show();
$("#notlogin").hide();
} else {
$("#withlogin").hide();
$("#notlogin").show();
}
}
});
});
Is there any way to call ajax function first take response then load page.
i'm already calling ajax function at time document ready function.
So what if you put this in your page and display appropriate text based upon if request is authenticated or not.
#if (Request.IsAuthenticated)
{
<div> Authenticated</div>
}else{
<div>Anonymous </div>
}
I have the newest Fancybox and I just want to update the content of a Ajax Fancybox with a Button in the Fancybox.
Is there any Method in Fancybox which reload the content?
$('#button').click(function(){
$.ajax({
data:
{
//whatever you need to send back to the server
//this could be the id of the element to refresh
},
url: 'your_url_to_send_it_to'
cache: false,
type: 'POST',
success: function (result) {
//update the element with result
}
})
});
I've written down a very simple ajax call on a button with id "button". This is exactly what you need in order to refresh the Fancybox element. There isn't a method you can use within Fancybox itself to perform this, you have to write your own ajax call. Hope I was of some help.