I'm using the javascript code below to load recrefresh.php when the page initially loads. When the function ajaxvote is executed I want the following div to refresh:
<div class="recrefresh"></div>
I tried adding the following after success:, but the div doesn't refresh after executing ajaxvote:
$.get('recrefresh.php', function(data) {
$('.recrefresh').html(data);
});
Entire Script:
<div class="recrefresh"></div>
<script type="text/javascript">
$.get('recrefresh.php', function(data) {
$('.recrefresh').html(data);
});
</script>
<script>
$('.ajaxvote').click(function(e){
e.preventDefault(); // Prevents default link action
$.ajax({
url: $(this).attr('href'),
success: function(data){
alert("Vote Saved.");
$.get('recrefresh.php', function(data) {
$('.recrefresh').html(data);
});
}
});
});
</script>
use this
<script>
$(document).ready(function(){
//run function here
refreshMyDiv();
//click event for dynamically generated elements
$('.recrefresh').on('click' , '.ajaxvote' , function(){
//run function inside click
refreshMyDiv();
});
});
// function to refresh the .recrefresh div
function refreshMyDiv(){
$.get('recrefresh.php', function(data) {
$('.recrefresh').html(data);
});
}
</script>
To solve this issue take parent div to <div class="recrefresh"></div> because direct div does not load sometimes so wrap this div with other div say for ex.
<div class="recrefresh_parent"><div class="recrefresh"></div></div>
and use recrefresh_parent to refresh table.
There is the way to refresh or load div after ajax call:
$('.recrefresh_parent').load("recrefresh.php .recrefresh_parent");
Related
CODE:
<span class="clickable" id="span_resend">Resend</span>
<script>
$('#span_resend').click(function (e) {
e.preventDefault();
var save_this = $(this);
var middle_this = $('<span class="loader">now_loading</span>');
$(this).replaceWith(middle_this)
$.ajax({
url:'/ajax/',
type:'post',
dataType:'json',
cache:false,
data:{
com: 'some',
},
success:function (data) {
console.log(data)
if (data.res === 'success'){
middle_this.replaceWith(save_this)
}
}
});
})
</script>
It works well when I click resend first.
However cause of script tag, there will be term of now_loading and after loaded, then clicking #span_resend does not works well.
I think it's from that I did not bind click function well on #span_resend.
But I don't know how to do it.
How can I do this?
More explanation: This code is to get ajax response from server, and that ajax response takes some time, maybe 10~15 seconds. So I want to change my resend button to show that ajax is being called, at the same time user cannot click during the waiting of ajax response from server.
The Problem:
Here's what's happening in your code that isn't obvious right away. On first click, you create a jQuery object containing the clicked span, you save this to a variable and after your post completes, you then replace the temporary span with the value of the variable.
Seems like everything should be just fine, but what you've actually done is dynamically added a control to your HTML and while the html of the control is identical to the original span, it is not the same control.
Why does this matter?
Events. It's all about events. When you copy a control, you aren't copying those event listeners associated with it too. So when that event fires again, it looks for the original control and doesn't find it.
You can read in depth about events and event listeners here.
So great, what do you do about all this?
The Solution:
The answer here is to bind those events to a control that is higher than the one you're replacing and won't be replaced itself. So maybe your body tag, or even the document tag. Here's what that would look like in your code:
// Instead of this:
$('#span_resend').click(function (e) {
// Some code.
});
// Do this:
$(document).on('click', '#span_resend', function (e) {
// Some code.
});
This ensures that those event listeners aren't removed when you replace the control.
Here's a mock up of your code using this method:
$(document).on('click', '#span_resend', function (e) {
e.preventDefault();
var save_this = $(this);
var middle_this = $('<span class="loader">now_loading</span>');
$(this).replaceWith(middle_this)
$.ajax({
url:'https://reqres.in/api/users?delay=3',
type:'post',
dataType:'json',
cache:false,
data:{
com: 'some',
res: 'success'
},
success:function (data) {
if (data.res === 'success'){
middle_this.replaceWith(save_this);
}
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="clickable" id="span_resend">Resend</span>
Hope that helps!
I recommend not replacing the button with a now loading but to hide it and show a separate loading indicator, then revert back once it's done
$(document).ready(function() {
$("#saveBtn").click(saveData);
});
function saveData() {
$('#saveBtn').hide();
$('#nowLoadingInd').show();
//AJAX here instead of timeout (just for demo purpose)
window.setTimeout(function() {
$('#saveBtn').show();
$('#nowLoadingInd').hide();
}, 10000);
}
#saveBtn {
display:inline-block;
background:green;
color:white;
border-radius:10px;
cursor:pointer;
padding:3px 5px
}
#nowLoadingInd {
color:gray
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="saveBtn">Save!</div>
<div id="nowLoadingInd" style="display:none">Now Loading...</div>
</body>
</html>
Alternatively, you can pass an element to your ajax options and reference it in the then callback with the this object:
$.ajax({
url:"yourUrl",
data:{your:"data"},
extraProperty:$('#yourElem')
}).then(function() {
this.extraProperty.show()
});
I want to get all the images in a div of another page and include them to current page. I tried this code but It's not working.
<div id="preview-image"></div>
<script>
$.ajax({
url: '(my_url)',
success: function(data) {
$(".message img", data).each(function() {
$(this).appendTo('#preview-image');
});
}
});
</script>
I have a web page where I have defined one DIV element with id "selectedProduct", now while I click on particular link it will call ajax request and it will fill DIV element with response data. But i have requirement that when onBlur event occurs on "selectedProduct" DIV, it should remove all the child element of it's. My code is as follow:
<script type="text/javascript">
function getPage(event,id)
{
event.preventDefault();
var page = document.getElementById(id).id + ".html";
var dataString = page
$.ajax(
{
type: "POST",
url: page,
data: dataString,
cache: false,
success: function(result)
{
var result=result;
$("#selectedProduct").html(result);
// location.replace("index1.html");
}
});
}
function focOFF(id)
{
// I don't have any idea what code should i write here which can remove all child of DIV element....
}
</script>
<body>
Solar Power Plant
<div id="selectedProduct" onBlur="focOFF(this.id)">
</div>
</body>
Use the below solution of getting all child elements and the removing them,
function focOFF(id)
{
$( "#"+id ).children().remove();
}
Use empty() function inside your blur function . It removes all child nodes of selected element
function focOFF(id)
{
$('#'+id).empty();
}
document.getElementById(id).innerHTML = '';
I have a AJAX call that adds nested divs (with the class .song_block) to a div (#song_list) on the page. I have a button that I want to hide once the count of nested divs reaches a certain number.
Here is my script
<script type="text/javascript">
$(document).ready(function() {
if($("#song_list").find('.song_block').length == 100){
$('#loadmore').hide();
}
});
</script>
Here is the AJAX call
<script type="text/javascript">
$(document).ready(function() {
$('#loadmore').on('click', function() {
$('#loadmore').hide();
$('#loadmore-gif').show();
$.ajax({
type: "GET",
url: "/loadmore/",
data: {
'slug': $('.dj_slug').text().trim(),
'song_rank': $("#song_list").find('.song_block').length
},
}).done(function (response) {
$('#song_list').append(response);
$('#loadmore').show();
$('#loadmore-gif').hide();
});
});
});
</script>
Now this doesn't work since $(document).ready() doesn't work for AJAX loaded content. How can I handle such a situation using javascript?
The equivalent to $(document).ready for AJAX is ajaxComplete.
So here is the code:
$(document).ajaxComplete(function(){
//your code here
});
Thanks to #usman on the answer here Document Ready equivalent for ajax-loaded content via jQuery Mobile accordion
Create a function
function hideLoadMore() {
if($("#song_list").find('.song_block').length == 100){
$('#loadmore').hide();
}
}
And use it when DOM was loaded and when related ajax requests are done
$(hideLoadMore);
$(function() {
$('#loadmore').click(function(){
$.ajax(...).done(/*perform dom insertion*/).done(hideLoadMore);
});
});
I have a jquery ui dialog that loads its content via ajax:
$('#register').click(function(e) {
var tag = $('<div></div>');
$.ajax({
url: 'signup.html',
success: function(data) {
tag.html(data).dialog({modal: true}).dialog('open');
}
});
e.preventDefault();
return false;
});
I have a second script within the content that is supposed to close the dialog when the submit button is pressed
$(function() {
$('form #submit').click(function(e) {
$(this).parents('.ui-dialog').dialog('close');
e.preventDefault();
return false;
});
});
When i click the submit button, i get the error:
Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'
What is it that i am missing to allow me to close the dialog from the content that has been loaded via ajax?
You have to call dialog('close') on the element where dialog('open') was called before. You're calling the function on$('.ui-dialog')instead of$('.ui-dialog ...')`.
You should define id or class for the tag element in your code:
var tag = $('<div id="signup-id"></div>');
Then find the correct element in click handler like this:
$(this).parents('.ui-dialog').children('#signup-id').dialog('close');
Note: You can find #signup-id in click handler directly like $(this).children('#signup-id') if you're sure that signup.html never contains element with signup-id id.
Define you tag dialog in html
<div id="tag_dialog" style="display:none">
</div>
then on document ready:
$(document).ready(function(){
$('#tag_dialog').dialog({
modal:true,
autoOpen:false,
//you could give some other options such as width, height .....
});
$('#register').click(function(e) {
$.ajax({
url: 'signup.html',
success: function(data) {
$('#tag_dialog').html(data).dialog('open');
}
});
e.preventDefault();
return false;
});
$('form #submit').click(function(e) {
$('#tag_dialog').dialog('close');
e.preventDefault();
return false;
});
});