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
}
});
});
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 an AJAX function which triggers my function before the redirection at a URL. So, I need to trigger it later.
Here is the code, I will explain it below.
$('#backToLogin').click(function(e){
$.ajax({
url: "/login/",
success: function(result){
$('#member-space').show();
$("#form-container").html(result);
console.log('success');
},
complete: function(complete){
},
error: function(er) { alert(er); },
});
});
backToLogin is the button on the first page which make the redirection.
member-space is the DIV on the second page that I want to show but it's hidden. I have a button to show it but I want that DIV appear without any click event.
PROBLEM : The DIV member-space appears before the redirection.
Any idea?
HTML:
<div id="browse-container">
<input type="search" id="search-bar" placeholder="Search URL..."></input>
<button id="search-button">Search</button>
</div>
Above I have a search input where the user should be able to type in any URL.
Script:
$('#search-button').click(function(){
var HTMLresp = $('#search-bar').val();
$.ajax({
url: HTMLresp,
dataType: "jsonp",
type: 'GET'
});
$('body').append('<div id="result-window"></div>');
$("#result-window").html(HTMLresp);
});
Now when the user clicks on the button the specified url is to be placed in a variable 'HTMLresp' and then that URL should be placed inside of the ajax function. After ajax function is done the HTML response of the specified URL should be displayed in a the result window div on the page.
But right now the page just displays the string version of the URL.
JsFiddle
Try as follows:
$('#search-button').click(function(){
var HTMLresp = $('#search-bar').val();
$('body').append('<div id="result-window"></div>');
$.ajax({
url: HTMLresp,
dataType: "jsonp",
type: 'GET',
success: function(data) {
$("#result-window").html(data);
}
});
});
This way, when your request finishes, and is succesfull, the response data will be placed inside your div. You should put an error handler as well, this is just a rough example.
Keep in mind the following line:
$('body').append('<div id="result-window"></div>');
This will be executed each time the user clicks the #search-button element, You should place the div #result-window directly in your dom, or append it on document load, otherwise you will end up having a lot of divs with id #result-window
I also recommend you to read about CORS and JSONP a little, because what you want to do as a lot of limitations, you cannot ask for resources from different domains (You can, with jsonp as you do, but it has its limitations as well).
http://en.wikipedia.org/wiki/Cross-origin_resource_sharing
http://en.wikipedia.org/wiki/JSONP
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 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.