I'm not sure why i can' t get my output to surface. It shouldn't be too hard but has been stuck for several hours. All i
<script>
$(document).ready(function(){
$('#chat_submit').click(function(){
var data="{'chat_content:'+$('#chat_content').val()+'chat_from_who:'+$('#chat_from_who').val()+'chat_to_who:'+$('#chat_from_who').val()+'order_no:'+$('#order_no').val()}";
$('#order_chatbox').load('/seller/helpers/order_chat.php',data);
});
});
</script>
Any help here will be greatly appreciated.
You are sending the data as a long string.. not as an object.
Change it to
var data= {'chat_content': $('#chat_content').val(),
'chat_from_who': $('#chat_from_who').val(),
'chat_to_who': $('#chat_from_who').val(),
'order_no': $('#order_no').val()};
Try the following:
$(document).ready(function() {
$('#chat_submit').click(function(event) {
// event.preventDefault();
var data = {
chat_content: $('#chat_content').val(),
chat_from_who: $('#chat_from_who').val(),
chat_to_who: $('#chat_from_who').val(),
order_no: $('#order_no').val()
};
$('#order_chatbox').load('/seller/helpers/order_chat.php', data);
});
});
Related
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
});
});
I have started learning jquery AJAX. I have run into a problem, and was wondering if you guys could help me. I am trying to pass a php variable back to jquery, but it displays as [object Object]. I will be posting my code below.
index.html:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function() {
$("p").text($.get("return.php"));
});
});
</script>
</head>
<body>
<p>This is a test!</p>
<button>Click Here</button>
</body>
</html>
return.php:
<?php
$message = "Another test!";
echo $message;
?>
So what is it that I need to do to pass php variable $message into the paragraph using jquery ajax?
I know I could simply do if I changed index.html to index.php, but then if $message later changes, I have to reload the page. I am trying to learn how to make dynamic content without having to reload the page.
Thanks ahead of time for any help you provide! :-)
You'll have to wait until the data is returned before you can use it:
$(document).ready(function(){
$("button").click(function() {
$.get("return.php", function(data) {
$("p").text(data);
});
});
});
Add a callback to get.
$.get("return.php", function(data) {
$("p").text(data);
});
You can use callback function in .get function.
$(document).ready(function(){
$("button").click(function() {
$.get("return.php",function(data){
$("p").text(data);
});
});
});
Here you can pass the datatype as well in which form you want the response from server.
Suppose you want to return anyother datatype(i.e. json)from server, just use datatype with it like this :
$(document).ready(function(){
$("button").click(function() {
$.get("return.php",function(data){
$("p").text(data);
},"json");
});
});
For more detail,refer : http://api.jquery.com/jQuery.get/
var studno = $('#studno').val();
$(document).ready(function () {
$('.go').click(function () {
$('.inup').load('prochat.php', {
studno: studno
});
});
});
I have this code and it's supposed to send the value of studno into prochat.php but everytime it does it only says undefined. Can anyone explain?
Try this:
$(document).ready(function(){
$('.go').click(function(){
var studno = $('#studno').val();
$('.inup').load('prochat.php', {studno:studno});
});
});
Try this:
$(document).ready(function(){
$('.go').click(function(){
var studno = $('#studno').val();
$('.inup').load('prochat.php', {studno:studno});
});
});
Never mind. Turns out this works
$('.inup').load('prochat.php', {studno: $('#studno').val()});
These could be possible reasons:
at the line where you are assigning the value to studno, the value of studno might be undefined
#studno is not defined in the html
possible solutions:
-. try assigning the value within the click function:
like this:
$('.go').click(function(){
studno = $('#studno').val();
$('.inup').load('prochat.php', {studno:studno});
});
-. make sure that the element with id studno exists in the html document
This should work better:
$(document).ready(function () {
$('.go').click(function () {
$('.inup').load('prochat.php', {
studno: $('#studno').val()
});
});
});
I am writing a script using AJAX in JQuery that takes an action_id from exp_actions as the destination URL for the method I need to execute in my mcp file. The reference is made statically. Can the ACT value be found by making a PHP call in the view in a way similar to:
$aid =$this->EE->cp->fetch_action_id('Class_name', 'method_name'); ?
My page currently looks this way:
<script type= "text/javascript">
$(document).ready(function() {
$('form').change(function(e){
var data = $(this).serializeArray();
console.log(data);
$.post(
<? echo'http://ourwebsite.com/ee/admin.php?ACT=44&id=4 ,';?>
data,
function() {
console.log(this);
}
)
});
});
Thanks in advance!
So I found the answer to my question on the expressionengine forums. For those curious, the link is below. Thanks for the help :)
http://expressionengine.com/forums/viewthread/171401/#986831
Assuming you are using that script in a template or a snippet, you could make a call to your addon instead, returning the needed URL:
<script type= "text/javascript">
$(document).ready(function() {
$('form').change(function(e){
var data = $(this).serializeArray();
console.log(data);
$.post(
'{exp:your_addon:method_for_getting_action_id_url}',
data,
function() {
console.log(this);
}
)
});
});
If you want to make an ajax request in the CP, you just need to request the cp url:
/system/index.php?S=0&D=cp&C=addons_modules&M=show_module_cp&module=my_module&method=my_method
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.