I've written a javascript function to show a PHP within a Div. It seems to work, except that the php to be shown only flashes up for a brief second. Is there any way to get it to stay shown until I select an option to close it.
Many thanks
function showBiog(keysop){
$.ajax({
url: 'test2.php?number=' + keysop,
type: 'POST',
dataType: 'html',
data: $('#SubmitForm').serialize(),
success: function(content)
{
$("#DisplayDiv").html(content);
}
});
event.preventDefault();
$('#submit_btn_id').click();
}
Related
I have the following code: There are 18 listelements which I want to click on. After I clicked on all of them, I need a modal to pop-up. If a do this way, it wont work, it works only on the 19th click
listPoints.each(function(i){
$(this).attr('id', "list-point-" + i);
$(this).click(function(){
addPoint("list-point-" + i);
if (checkPoints()) {
$.ajax({
type: 'GET',
url: 'modal.html',
dataType: 'html',
success: function(html){
$("body").append(html);
}
});
$('#exampleModal').modal();
}
});
});
However if I put the modal show part in the ajax success part, without changing anything else, it works, the modal shows on the 18th, the last click, which is exactly I wanted
listPoints.each(function(i){
$(this).attr('id', "list-point-" + i);
$(this).click(function(){
addPoint("list-point-" + i);
if (checkPoints()) {
$.ajax({
type: 'GET',
url: 'modal.html',
dataType: 'html',
success: function(html){
$("body").append(html);
$('#exampleModal').modal();
}
});
}
});
});
I can't realize the difference. Why is one working while the other isn't?
#exampleModal might be coming from html you are getting in succes.
From your first code :-
As $('#exampleModal').modal(); is executed before the ajax success and hence it might not find that element.
You are iterating through list item and $('#exampleModal').modal(); is repeating in all iteration however compiler will attach the modal to the last item only as id cannot be duplicate.
But in second scenario, id ("exampleModal") is not executed initially by the compiler because ajax will be executed by browser and success part will be executed in later part.so whenever you click list item, it gets attach to that list item.
Hello mates just stuck with a problem.
i am using click() and load() function to get my content in a css class
$("#feed").click(function(){
$(".homefeed").load("feedcontainer.php");
$("#elementcontainer").show();
});
$("#news").click(function(){
$(".homefeed").load("n.php");
$("#elementcontainer").show();
});
$("#info").click(function(){
$(".homefeed").load("newinfo.php");
$("#elementcontainer").hide();
});
As you can see when i click a div then i am able to load a php file content in a .homefeed class container and it is working perfectly
all i want to show a loading image..like loading....loading..... before the content loads..
because when i click one of those div then it is loaded into homefeed container perfectly but it is taking some time so i just want to show user some loading image to keep them engaged
any guess how to achieve it now?
thank you.
Try this: $(".homefeed").prepend(response); change to $(".homefeed").html(response)
$("#info").click(function (e) {
$("#loadimg").show();
jQuery.ajax({
type: "POST",
url: "newinfo.php",
dataType:"text",
cache: true,
success:function(response){
$(".homefeed").html(response);
$("#loadimg").hide();
},
});
});
You can use jquery blockUI plugin. jquery blockUI
Use the .beforeSend option in the jQuery AJAX call. Note, that this only works if your AJAX call is asynchronous. If you call it using synchronous, it won't do any animations/queries/callbacks (as jQ is busy blocking everything until your call comes back).
$.ajax({
url: "http://myurl.dot.com.jpeg.image.file.chmtl.php.asp.cfm",
async:false,
cache: false,
beforeSend: function( xhr ) {
// do stuff here to do the 'loading' animation
// (show a dialog, reveal a spinner, etc)
},
done: function(data){
//process response here
}
})
http://api.jquery.com/jquery.ajax/
I have an ajax call which loads some HTML into the DOM. If the call was successful I show a spinning loading gif and when the call is complete I hide it. The code:
$.ajax({
url: someUrl,
type: 'POST',
dataType: 'json',
data: someData,
success: function(response){
$(myLoadingGif).show(); // Show the loading gif
$(myContainer).html(response);
},
complete: function(){
$(myLoadingGif).hide(); // Hide the loading gif. Note: HTML has not been added yet
}
});
The problem is: The loading gif becomes hidden a couple of seconds BEFORE the HTML is added, even though I declared it in the complete section of the ajax call. I want it to remain visible the entire time. And I don't want to do an ugly setTimeout() of 1000ms just to delay it. I might add that the chunk of HTML loaded is fairly big. It's a table with 20-40 rows.
Any ideas on how to make sure the gif remains visible until the HTML has actually been added?
Success fires every time your ajax call returns a value. Complete fires when the last value is returned from the Ajax call. Because your Ajax call only returns values once, success and complete fire at the same time.
$(myLoadingGif).show();
$.ajax({
url: someUrl,
type: 'POST',
dataType: 'json',
data: someData,
success: function(response){
// Show the loading gif
$(myContainer).html(response);
$(myLoadingGif).hide();
},
failure: function(){
$(myLoadingGif).hide();
}
complete:function(){}
});
Try the above and see if this works.
You need yo hide the gif, after the new HTML is attached to the DOM, so because .html() is synchronous, any code put after calling .html() would execute after the new html is appended to the DOM. But sometimes, there's a delay, just because the DOM is added, but the browser engine not render it yet, it's there, but not showing.
For that purpuse, try a hack, sometimes it's been usefull to me:
$.ajax({
url: someUrl,
type: 'POST',
dataType: 'json',
data: someData,
success: function(response){
$(myLoadingGif).show(); // Show the loading gif
$(myContainer).html(response);
},
complete: function(){
setTimeout(function(){$(myLoadingGif).hide();},0);
}
});
I have a js and html form that submits through php. Once submitted, the email is sent and php returns a success message that is appended to the bottom of the form using jquery.
submitHandler: function(form) {
$.ajax({
type: 'POST',
url: 'process.php',
data: $(this).serialize(),
success: function(returnedData) {
$('#commentForm').append(returnedData);
}
});
return false;
},
Instead, I want the js to remove and reset (hide and clear) the comment form but still append the returned data to the same location as #commentForm
The remove() function does that.
$('#commentForm').remove();
based on what #GRIGORE-TURBODISEL sayd, but with better animation you can do this
$('#commentForm').slideUp(1000, function(){
$(this).html(returnedData).show('fast');
});
first it hides the form in 1 second, when finished emptys the html, puts in returnedData and shows it again
I have a select with my servers and I load information on the selected server without reloading the page. I am using ajax and ReplaceWith().
I tried using live() to replace the information several times, but it only works once, why?
<script>
$(function(){
$('select').live('change', function(){
$.ajax({
type: "POST",
url: "server.php",
data: "hostname=" + $(this).val(),
success: function(data){
$("#results").replaceWith(data);
}
})
});
});
</script>
It is because you are replacing the #results container with the data. The next time the $("#results") selector will not match any elements (because the container was replaced by the previous call).
.html() does not replace the container, but updates the content of the container.
I do not really understand why it works with html() and not with ReplaceWith(), but it works!
<script>
$(function(){
$('select').live('change', function(){
$.ajax({
type: "POST",
url: "serveur.php",
data: "hostname=" + $(this).val(),
success: function(data){
$("#results").html(data);
}
})
});
});
</script>
Sorry to answer my own question.
live() method is kind of deprecated and might work not properly. Try on() instead of.