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.
Related
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 have a page (form.php) that is called via ajax when a user group is clicked in main page. form.php contains form fields (like date picker etc and other fields as per usertype selection in main page.
My issue is the when I click on any user type in main page form.php page load using ajax but date picker in this form is not working. I check all path and sequence but its not working.
here is my code
$.ajax({
type: "GET",
url: "services/forms.php",
data: {UserType: UserType},
success: function(data){
$('#assessmentform').html(data);
}
});
$.ajax({
type: "GET",
url: "/services/forms.php",
data: {'UserType': UserType},
success: function(data){
$('#assessmentform').html(data);
}
});
try this if this file in outside the services folder
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();
}
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
}
});
});
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.