I have following script which fetch data from server based on form parameters.
jQuery('#request_search').submit(function(e){
e.preventDefault();
var s_date=jQuery('#actualfrom').val();
var e_date=jQuery('#actualto').val();
var type=jQuery("#type").val();
var loc=jQuery("#loc").val();
jQuery.post("scripts/get_gamma_activity_type.php", {"loc":loc,"start_date":s_date, "end_date":e_date, "type":type}, function(data) {
jQuery('#report').html(data);});
});
});
This part is working and some times, based on search criteria , it takes a couple of seconds to get results. in the mean time I would like to show some GIF saying data loading. I have the GIF ready. How to implement it in the above script?
please try this.
jQuery('#request_search').submit(function(e){
$("#report").html("<div><img src='loading.gif' alt='Loading.. \n Please wait' title='Loading.. \n Please wait'` /></div>");
e.preventDefault();
var s_date=jQuery('#actualfrom').val();
var e_date=jQuery('#actualto').val();
var type=jQuery("#type").val();
var loc=jQuery("#loc").val();
jQuery.post("scripts/get_gamma_activity_type.php", {"loc":loc,"start_date":s_date, "end_date":e_date, "type":type}, function(data) {
jQuery('#report').html(data);});
});
});
Add Image with path in your html file with id attribute and then show/hide div
based on request and success.
Try below code:
Add html div in your html file :
<div id='loadingmessage' style='display:none'>
<img src='loadinggraphic.gif'/>
</div>
Try below code of jQuery:
jQuery('#request_search').submit(function(e){
$('#loadingmessage').show(); // show the loading message.
e.preventDefault();
var s_date=jQuery('#actualfrom').val();
var e_date=jQuery('#actualto').val();
var type=jQuery("#type").val();
var loc=jQuery("#loc").val();
jQuery.post("scripts/get_gamma_activity_type.php", {"loc":loc,"start_date":s_date, "end_date":e_date, "type":type}, function(data) {
jQuery('#report').html(data);});
$('#loadingmessage').hide(); // hide the loading message
});
});
Related
I am currently using a very similar AJAX post request across many parts of my page:
$(document).ready(function() {
$("#name").change(function(e){
var vname = $("#name").val();
$.post("addit.php", {name:vname}, function(response, status) {
$("#table").html(response);
});
});
});
The above code works perfectly.
I am having a problem getting any functionality with dynamically loaded content. So for example a form grabbed by an AJAX call and put into my page this above does not work.
If we can pretend that I was running the same AJAX call as above but on dynamically loaded content from a PHP script using AJAX. what would my call look like. #table is a static element that is always present on the page.
I have tried this but it is not working:
$(document).ready(function() {
$("#table").on("click", "#btn1", function(e){
e.preventDefault();
var vname = $("#name").val();
$.post("addit.php", {name:vname}, function(response, status) {
$("#table").html(response);
});
});
});
Currently I am getting nothing show up on console and it just does not work.
Is what I am doing here correct?
The html would look like this: echoed from php:
<table id='table'>//this is the static element form is echoed
<form method='post'>
<input id='name' name = 'name'>
<button id='btn1' type='submit'>Add me</button>
</form>
</table>
I have changed my code slightly click on button rather than on change.
Try updating the code with following
$(document).ready(function() {
$("#table #btn1").on("click", function(e){
e.preventDefault();
var vname = $("#name").val();
$.post("addit.php", {name:vname}, function(response, status) {
$("#table").html(response);
});
});
});
It is not possible to set a function on a dynamically added element, when the element is not there in document
And instead of <table> use <div> if possible
I think your problem is that you miss
$( document ).ajaxComplete(function() { "script here will run and be available after ajax load" });
I need a person who can help me solve this problem.The code below is working well with the post and the php code.
//Getting the id of a buyer and loop through
//sending a request to the seller
$(document).ready(function(){
$('.buyerRequest').click(function(){
var id=$(this).attr('id').replace('id_','');
$.post('SendingOffer.php',{id:id},function(data){
if(data=="true"){
$(this).html('<b>Offer Send</b>').css('background','#dce6f1');
$(this).attr("disabled","disabled");
}else if(data=="false"){
alert('You have reached the maximum number you can send todays');
}
});
});
});
I have tested the php code,that is,if data returned is true output alert box and is working.For instance
if(data=="true"){
alert(id);
}
However,on including this code
if(data=="true"){
$(this).html('<b>Offer Send</b>').css('background','#dce6f1');
$(this).attr("disabled","disabled");
}
and clicking the current id,i am unable to disable it and change it's attributes to offer send.
How can i deal with this problem
This is my div code
echo"<li id='td_request'><a id='id_".$fetch_num['order_id']."' class='buyerRequest' href='#".$fetch_num['order_id']."'>Send Offer</a></li>";
There were a few problems. I assume this is a button. I created a div to apply the styling to. The problem is that this is defined by scope. Inside of the post callback, this refers to the actual post object, not an html element.
<script>
$(document).ready(function() {
$('.buyerRequest').click(function() {
var id=$(this).attr('id').replace('id_','');
$.post('SendingOffer.php', {"id":id}, function(data) {
console.log(data);
if (data.length>0) {
$('#my_div').html('<b>Offer Send</b>').css('background','#dce6f1');
$('#id_my_button').prop("disabled",true);
}
else {
alert('You have reached the maximum number you can send todays');
}
});
});
});
</script>
<input type='button' class='buyerRequest' id='id_my_button' value='my_button'>
<br/>
<div id='my_div'></div>
$(this) might not be a very good idea to use inside a $.post. You better use a reference to the html object.
for example
$("#mydiv").html('Offer Send').css('background','#dce6f1');
$(this) usually refers to the current object in the context, in this case the ajax request if i am not mistaken. For example...
$(".mydiv").each(function(){
//using $(this) here refers to the current instance of .mydiv; not the DOM or the body
});
So, try this
$(document).ready(function(){
$('.buyerRequest').click(function(){
var id=$(this).attr('id').replace('id_','');
$.post('SendingOffer.php',{id:id},function(data){
if(data=="true"){
$("#**yourdivid**").html('<b>Offer Send</b>').css('background','#dce6f1');
$("#**yourdivid**").attr("disabled","disabled");
}else if(data=="false"){
alert('You have reached the maximum number you can send todays');
}
});
});
});
Working Code
<a id='id_0' class='buyerRequest' href='#0'>Send Offer</a>
<div id='responseDIV'></div>
<script>
$(document).ready(function(){
$('.buyerRequest').click(function(){
var id=$(this).attr('id').replace('id_','');
$.post('SendingOffer.php',{id:id},function(data){
if(data=="true"){
$("#responseDIV").html('<b>Offer Send</b>').css('background','#dce6f1');
$("#id_0").removeAttr("href");
}else if(data=="false"){
alert('You have reached the maximum number you can send todays');
}
});
});
});
</script>
Maybe "this" is ambiguous here, try to change into:
var currentBtn = $(this);
var id = currentBtn.attr('id').replace('id_','');
$.post('SendingOffer.php',{id:id},function(data){
if(data=="true"){
currentBtn.html('<b>Offer Send</b>').css('background','#dce6f1');
currentBtn.attr("disabled","disabled");
}else if(data=="false"){
alert('You have reached the maximum number you can send todays');
}
});
if disabled attribute does not work, you can try:
currentBtn.prop("disabled", true);
It belongs to your jQuery's version , reference: jQuery .attr("disabled", "disabled") not working in Chrome
Hope this help :)
New here and glad to be, I've gotten a lot of answers from this forum. I am however stuck at the moment.
I have some javascript that is creating a window color and handle picker (click on the color swatch it changes the image, click on a handle and it does the same). Below the image is a description of the window selected. This text is being generated by the javascript by pulling the image titles.
Now the fun part. Below this picker I need to add a form that will be emailed using php. Within that email I need to pull the window description that is being generated by the javascript.
I have tried so many things today I have lost count. The last bit of code I tried was
<script>
$(document).ready(function() {
$("windowDesc").each(function() {
var html = jQuery(this).html();
});
});
</script>
And in the php mail file I added:
$windowtitle = $_GET['html'];
as well as trying
$windowtitle = $_POST['html'];
and I have also tried the following:
<script>
var content = $('#windowDesc').html();
$.ajax({
url: 'send_mail.php',
type: 'POST',
data: {
content: content
}
});
</script>
And in the php mail file I added:
$windowtitle = $_GET['content'];
as well as trying
$windowtitle = $_POST['content'];
Not to mention a plethora of other things.
Basically what I am trying to do is grab the content of the div that holds the generated text and email it. If any of the above are correct then I must be placing them in the wrong position or something. With the first one I have tried it inside the form, outside the form, before the div, after the div. Just haven't tried it on top of my head yet. It's been a long day, thanks in advance :o)
Sorry for the delay, been a busy two days. OK, so here is the code that handles the window color and handle picker:
var Color = "color";
var Handle = "handledescription";
var ColorDesc = "color";
var HandleDesc = "handle description"
function Window(Color,Handle,ColorDesc,HandleDesc) {
$('#windowPic').animate({opacity: 0}, 250, function () {
thePicSrc = "http://www.site.com/images/windows/" + Color + Handle + ".jpg";
$('#windowPic').attr('src', thePicSrc);
$('#windowDesc').html("<p>" + ColorDesc + " frame with " + HandleDesc + " hardware</p>");
$('#windowPic').animate({opacity: 1}, 250)
})
}
$(document).ready(function() {
$('#wColors li').click( function() {
Color = $(this).attr('id');
ColorDesc = $(this).attr('title');
Window(Color,Handle,ColorDesc,HandleDesc);
});
$('#wHandles li').click( function() {
Handle = $(this).attr('id');
HandleDesc = $(this).attr('title');
Window(Color,Handle,ColorDesc,HandleDesc);
});
});
You need a hidden input in your form:
<form id="send_email" action="send_email.php">
<input id="content" type="hidden" name="content"/>
... other inputs here
</form>
Then you can use Javascript to fill it in before submission:
$("#send_email").submit(function() {
$("#content").val($("#windowDesc").html());
}
<script>
var content = $('#windowDesc').html();
$.ajax({
url: 'send_mail.php',
type: 'POST',
data: content
});
</script>
It worked here.
I have a script called notify_me.php which I run like so:
script type="text/javascript">
//Run notify_me.php script
$(document).ready(function(){
$("#submit").click(function(){
var d = $('form').serialize();
$.get('php/notify_me.php',d,function(data){
$(".container").html(data);
});
});
});
</script>
and I would like to show a animated loading .gif until the script is printed. The code for that is :
<div class="search_load" >
<span class="searching_font"> Fetching your flight prices...</span><br/><br/>
<img src="images/searchloading.gif">
</div>
How can I write a function that shows the .search_load class during the processing of notify_me.php. The .search_load class should also be shown in the .container div.
Tried some different ways with append(); and appendTo(); but can't seem to get it working.
Appreciate your help on this!
EDIT: I got the .search_load div to show the first time I hit the #submit. The second time it doesn't show att all. This is the problem I'm trying to solve. Any ideas?!
SOLUTION: Guys, I solved it by looking in to #Rohan's link. Check out below. Thank you all!
$(document).ready(function(){
$("#submit").click(function(){
$('#info').show();
$('html,body').animate({scrollTop: $("#info").offset().top},'slow');
$('.container').after('<div class="search_load"></div>');
var d = $('form').serialize();
$.get('php/notify_me.php',d,function(data){
$(".container").html(data);
$('.search_load').hide();
});
});
});
$(document).ready(function(){
$('.search_load').hide();
$("#submit").click(function(){
var d = $('form').serialize();
$('.search_load').show();
$.get('php/notify_me.php',d,function(data){
$('.search_load').hide();
$(".container").html(data);
});
});
});
You can also hide the div with CSS, so you can remove the line #2: $('.search_load').hide();
Steps:
Make your loading div hidden
When loading starts, display it using .show() and modifying the CSS so that its placement is correct
OnLoaded -> div.hide()
Refer to this: How to show waiting message during sync ajax call in browser
jQuery(document).ready(function($) {
$("#submit").click(function(){
$(".search_load").show();
var d = $('form').serialize();
$.get('php/notify_me.php', d, function(data) {
$(".container").html(data);
$(".search_load").hide();
});
});
});
try this:
$('div.search_load').hide();
$('#submit').click(function() {
$('div.search_load').show();
var d = $('form').serialize();
$.get('form.php', d,
function(data) {
$('div.search_load').hide();
$('.container').html(data);
},
'html');
return false;
});
Try This:
Javascript:
<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(){
var d = $('form').serialize();
$(".search_load").show();
$.get('php/notify_me.php',d,function(data){
$(".container").html(data);
$(".search_load").hide();
});
});
});
</script>
HTML Changes:
<div class="search_load" style="display:none" >
<span class="searching_font"> Fetching your flight prices...</span><br/><br/>
<img src="images/searchloading.gif">
</div>
Hope this will work.
I have a Google style instant search script written in jQuery which pulls results from a PHP script. I want to make a script so I can change the destination of the file by clicking a certain link. How can I make it so when a certain link is clicked it changes the selected.tab variable to the name of the search type. How can I do this?
Here is my jQuery script:
$(document).ready(function(){
$("#query").keyup(function(){
var query=$(this).val();
var yt_url=''+selected.tab+'.php?q='+query;
window.location.hash=''+selected.tab+'/'+query+'/';
document.title=$(this).val()+" - My Search Script";
if(query==''){
window.location.hash='';
document.title='My Search Script';
}
$.ajax({
type:"GET",
url:yt_url,
dataType:"html",
success:function(results){
$('#results').html(results);
}
});
});
if(window.location.hash.indexOf('#'+selected.tab+'/')==0){
query = window.location.hash.replace('#'+selected.tab+'/', '').replace('/', '');
$('#query').val(decodeURIComponent(query)).keyup();
}
});
From your code, the selected variable seems to be global, so:
<a id="change" href="#">change</a>
<script type="text/javascript">
$('#change').click(function() {
selected.tab = "somethingelse";
});
</script>