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?
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 busy icon on my page which has a class of "hidden". When the user clicks a button to start processing input data, I want to show the busy icon. I am doing this with
$("#busy").removeClass("hidden");
Immediately after removing the hidden class, I use AJAX to get some data from the server, display it on the page and add the hidden class back to the busy image.
My problem is that the busy icon is never displayed. I'm not a javascript/jQuery expert but I think this is because the page isn't redrawn until after the script has finished executing?
How can I get the busy icon to display while the AJAX processing is in progress?
Try this
First u link ur image on a div
Then
Try this, it will work fine
$.ajax({
url : "URL",
data: { data },
beforeSend: function(){
$("#loading").show();
},
complete: function(){
$("#loading").hide();
},
success: function (response) {
});
});
When I click at a target div I want a popover to be displayed (I may show a loading label as the content) and at the same time an ajax get request is sent to server to fetch the data. Once the data is back, I want to update this already open popover.
Here is my code:
$(document).on('click', '.row-client', function (e) {
var id = $(this).attr('id');
var str = id.split('-');
var component = str[0];
var clientId= str[1];
$.ajax({
url: '../Clients/Index',
type: 'GET',
data: { clientId: clientId },
dataType: 'html',
success: function (data) {
$('.popper').popover({
placement: 'bottom',
container: 'body',
html: true,
content: data
});
},
error: function (xhr, status, error) {
alert(xhr.responseText);
}
});
});
Problems I encounter with is:
Popover is not displayed automatically at first the click or when the data is loaded. I need to keep clicking. Once the data is back and loaded, the popover is displayed at the 'next' click. Why is this so?
Is there any way I can keep the popover open and update the content automatically after I got the data?
Upon the next click to raise the popover, I want the content to be blank (it is not now). What's preventing it?
The call to $().popover does not make the popover appear. It only adds popover behavior to the DOM element. What makes it appear later is the click, depending on the "trigger" you configure for the popover.
Try invoking $('.popper').popover() as soon as the document is ready.
And to change the contents of the popover, while it is shown, try the following:
$('.popper').attr("data-content","new content");
$('.popper').data('bs.popover').show();
I am using a Ajax to call a MVC controller to submit a form, on a successful call I want to display a dialog box, currently its working the way I want to but the box opens for about a second then closes.
$("#addBtn").click(function () {
$(".container form").ajaxSubmit({ url: '/umbraco/Surface/Basket/AddNow', type: 'post', success: function () { afterSuccess(); } })
});
function afterSuccess() {
BootstrapDialog.alert('Test');
}
Why this is happening?
The problem was not in the Java Script, the problem was in the html of the page. I moved the submit button out side of the form.
This must happen quite a lot! - Hope this helps some else.
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.