I am asynchronously submitting my form using jquery and AJAX . Refer the code below
$("#save_report").click(function()
{
$.ajax({
url : actionOfForm,
type : $('#custom_targeting_param_form').attr("method"),
data : $('#custom_targeting_param_form').serialize(),
success : function(){
alert('Report Saved successfully');
$("#showOrExportCustomTargetingReport").val('showReport');
}
});
return false;
});
I have got a link in my html with the id save_report and on clicking the link an Ajax call is being made to the URL which is passed as the actionOfForm variable as shown above.
Till this everything is fine. But now I want to get a preloader image/text like loading.. while the form submission is taking place in the background . And I want to show it in an alert box , not on my html ...
as i am a new user sorry for not able to post the image, but i hope i am comprehendable
Once the form submission is done , the preloader image will be gone and replaced with the success message alert.
Can you please help me with this?
i think you can have your image in a div..intially hide it..
<div id="imgDiv" style="display:none"><img src="/img.png"/><div>
then on click on your link(on AJAX call)..show this div on top of page(you have to use some css property for this).like this-
$("#save_report").click(function()
{
$('#imgDiv').show();// show your loading image
$.ajax({
url : actionOfForm,
type : $('#custom_targeting_param_form').attr("method"),
data : $('#custom_targeting_param_form').serialize(),
success : function(){
alert('Report Saved successfully');
$('#imgDiv').hide();// hide your image after successful call
$("#showOrExportCustomTargetingReport").val('showReport');
}
});
return false;
});
Related
This question already has an answer here:
Facebook ignoring OG image on first share
(1 answer)
Closed 6 years ago.
First of all hi and thanks in advance to anyone who can help with this because I've been going crazy over this for weeks now.
So I've got a website which lists gif taken from my mobile application (which are then stored on AWS and my visitors ( I haven't found a use for me to have users) can share these gifs on facebook using the facebook sdk.
The problem appears when I try sharing an image for the first time
This is what the share dialog shows the first time I click on my sharing button:
http://i.stack.imgur.com/lNVNF.png
and then I close and reclick the same button and now it works:
http://i.stack.imgur.com/YsDUm.png
Now I've been trying to find a way to make this work on the first sharing attempt but to no avail.
I am using meteor in combination with biasport:facebook-sdk and Amazon S3 for the hosting of my files.
Edit here is the code used:
FRONT SIDE
HTML
<div class="facebook share">
<img src="/gallery/fb.png">
</div>
Javascript
Template.*templateName*.events({
'click .facebook': function(e){
e.preventDefault();
e.stopPropagation();
// this is in a modal so I store the data I need
// (events have photos which in turn contain a url to the gif
var url = Session.get('event').photos[Session.get("id")].url;
FB.ui({
method: 'share',
href: url
});
}
SERVER SIDE
JAVASCRIPT
if(Meteor.isClient) {
window.fbAsyncInit = function() {
FB.init({
appId : 'APP_ID',
status : true,
xfbml : true,
version : 'v2.5'
});
};
}
Edit: I found a manual solution using exec future and curl
so first I added a call to a meteor method on the share that updates the facebook crawler
JAVASCRIPT
Template.*templateName*.events({
'click .facebook': function(e){
e.preventDefault();
e.stopPropagation();
// this is in a modal so I store the data I need
// (events have photos which in turn contain a url to the gif
var url = Session.get('event').photos[Session.get("id")].url;
Meteor.call('updateCrawler', url, function(){
FB.ui({
method: 'share',
href: url
});
});
}
Then I defined my meteor method as such
JAVASCRIPT
Meteor.methods({
updateCrawler: function(url){
var future = new Future();
cmd = 'curl -X POST -F "id=' + url + '" -F "scrape=true" -F "access_token={my_access_token}" "https://graph.facebook.com"';
exec(cmd, function(error){
if (error){
console.log(error);
}
future.return();
});
future.wait();
}
});
it's ugly but since I'd have to wait for the crawler to update and it works I'll leave this here for future use for someone maybe
Edit2:
I did not use og tags at all since I was simply sharing a url to aws directly and not a url to my website
I worked around this problem by calling the Facebook API direct from the server to make it scrape the og data by requesting info on the page. First time round it doesn't have the image cached but second time it does so this workaround does the initial call before sharing.
Use an access token for your facebook app and call the below in an ajax call and await the response before opening share dialog. Replace Google address with your own uri encoded address https://graph.facebook.com/v2.5/?id=http%3A%2F%2Fwww.google.co.uk&access_token=xxxxx
EDIT:
As per comments, here is my server side method for calling this which I use when posts etc are inserted to make the initial call and prompt a scrape from fb:
var getTheOGInfo = function (link)
{
if (!link || link.slice(0, 4).toLowerCase() != "http"){
throw new Meteor.Error("og-info-bad-url", "Function requires an unencoded fully qualified url");
return false;
}
var url = "https://graph.facebook.com/v2.5/{{{{id}}}}?access_token={{{{token}}}}&fields=og_object{id,description,title,type,updated_time,url,image},id,share";
var token = Meteor.settings.private.fb.token;
if (!token){
throw new Meteor.Error("og-info-no-token", "Function requires a facebook token in Meteor.settings.private.fb.token");
return false;
}
var link_id = encodeURIComponent(link);
url = url.replace('{{{{token}}}}', token).replace('{{{{id}}}}', link_id);
var result = HTTP.get(url, {timeout:1000});
return result;
}
Or for your purposes you may not want anything that might be blocking so you could change the last two lines to be aynchronous:
var result = HTTP.get(url, {timeout:1000});
return result;
//Replace with non blocking
HTTP.get(url, {timeout:1000}, function(err, result){console.log('something asynchronous', err, result);});
return true;
After detail search and googling I finally decide to put my question.
In my JQM web app there are total 4 pages. 2 of them are dynamically populated via Ajax. I have used
$.extend($.mobile, {
defaultPageTransition: 'none'
});
My dynamically populated function is
$.get_detail= function(){
$.ajax({
url: "mypage.cfm",
data: data,
timeout:5000,
cache:false,
type:'GET',
dataType:"html",
success: function(data3) {
//$('#filldiv').empty();
$("#filldiv").html(data3);
$.mobile.changePage('#detailpage');
},
error: function(statusCode, errorThrown)
{
if (statusCode.status == 0)
alert("you are offline");
else
alert("Please try again.");
}
});
}
When I change page flash white screen just like flicer happened but when there is no data fill in div then there is no flicker. I have noticed that, if there is no screen size change then every thing is okay and if screen size change by filling the dynamic content flicker happen
Please help me out to solve this issue. Thank you
Here's what I'm using to disable default transitions:
$(document).on( "mobileinit", function() {
$.mobile.defaultPageTransition = 'none';
});
The newest version 1.4, is also supposed to help with better transitions.
I am new for extjs.
I am having one store in which i am having some data coming from json file.
I have created a form.
i want to save new data in that store through form.
How can I create button and submit form on that button's click?
please let me know.
Thanks in advance
If you're using ExtJS 4 and your form is bound to a 'model' instance, then you get get a reference to your model in your buttons click handler and call:
model.save();
Which will send a post request to the url defined as the proxy on the model class.
Post your code and perhaps we can be some more direct help.
In the API of ExtJS is a good example on how to create a Ext.form.Panel with a button. When you click on this button the form gets submitted.
This example doesn't work because it doesn't submit to a page but it is very configurable.
Snippet of the button+handler:
buttons: [{
text: 'Submit',
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
url: '', //this is the url where the form gets submitted
success: function(form, action) {
Ext.Msg.alert('Success', action.result.msg);
},
failure: function(form, action) {
Ext.Msg.alert('Failed', action.result.msg);
}
});
}
}
}]
I have a form in a jQuery popup on a webpage. The jQuery popup is a div named .vote-form and the form inside it has the name "#form".
When the form is submitted, the content inside the jQuery popup changes to a success message. I need to make it so that when the jQuery popup is closed, the success message is removed and the form is refreshed back to the original form, so that when the jQuery popup is opened again, the form is showing again and NOT the success message.
My feeble attempt to get this result involved refreshing the ENTIRE page when the jQuery popup is closed. This PARTLY has the desired result, but when the page is refreshed, most browsers get a popup asking if the user wants to resubmit the form content. I need to avoid this.
This was my code handling the closing of the .vote-form:
$('.vote-form-close').click(function(event) {
event.stopPropagation();
$(".vote-form").fadeOut("normal");
$("#the-lights").fadeTo("slow",0);
$("#the-lights").css({'display' : 'none'});
window.location.reload();
});
I suspect that its possible to refresh ONLY the div, and not the entire page, but I do not know how to accomplish it.
Can someone assist me?
EDIT: Based on one of the answers below, I modified my code. I also wanted to show the code used to open the form up too:
$('.vote').click(function() {
$(this).parent().find(".vote-form").fadeIn("normal");
$("#the-lights").css({'display' : 'block'});
$("#the-lights").fadeTo("slow",0.7);
});
$('.vote-form-close').click(function(event) {
event.stopPropagation();
$(".vote-form").fadeOut("normal");
$("#the-lights").fadeTo("slow",0);
$("#the-lights").css({'display' : 'none'});
$(".vote-form").load(window.location.href + " .vote-form-container");
});
Here is the problem - I have 3 forms on the page. When "vote-form-container" is loaded, its loading ALL THREE forms into the .vote-form box - how do I modify the code to only load the .vote-form-container that is part of the specific .vote-form - I suspect I have to use $(this) but I tried modifying the code to this and it didnt work:
$(".vote-form")(this).load(window.location.href + " .vote-form-container");
I am thinking I did it wrong.
EDIT 2: Now the "Close" button dosen't work after the form is reloaded the first time:
$('.vote').click(function() {
$(this).parent().find(".vote-form").fadeIn("normal");
$("#the-lights").css({'display' : 'block'});
$("#the-lights").fadeTo("slow",0.7);
});
$('.vote-form-close').click(function(event) {
event.stopPropagation();
$(".vote-form").fadeOut("normal");
$("#the-lights").fadeTo("slow",0);
$("#the-lights").css({'display' : 'none'});
var current_form = $(this).closest('.vote-form'),
index = $('.vote-form').index(current_form)
current_form.load(window.location.href + " .vote-form-container:eq(" + index + ")");
});
Don't reload the page but redirect your user:
window.location.href = window.location.href.toString()
Or load the new form with ajax:
$(".vote-form").load(window.location.href + " .vote-form");
For more information on the ajax approach see api.jquery.com/load/#loading-page-fragments
Update:
Using jQuery the index function you are able to replace only the current form.
// I asume your button is in the form
var current_form = $(this).closest('.vote-form'),
index = $('.vote-form').index(current_form)
current_form.load(window.location.href + " .vote-form:eq(" + index + ")");
... I need to make it so that when the jQuery popup is closed, the success message is removed and the form is refreshed back to the original form...
So, if I well understood:
$('.vote-form-close').click(function(event) {
event.stopPropagation();
var vf = $(".vote-form");
/* fadeout and remove inner content of the popup */
vf.fadeOut("normal", function() { vf.empty(); });
/* reset the form */
document.getElementById('form').reset();
...
});
I am a jQuery newbie and ma trying to use a modal to reveal a constant contact simple form generated by the form generator. I have applied jQuery.validate(), and the validation is working, but I don't know how to submit the form. If there is an action="signup/index.php" in the tag, i land on a new page.
The generated form uses action='signup/index.php' and this file calls for a new page location see file in Github. I commented those last lines out, but still am failing to make the form submit. I cannot see the new email in the Constant Contact email list.
This is my sumbmit handler
submitHandler: function() {
$('#signup').click(function(e) {
$.post('signup/index.php', $().serialize(), function(data) {
$('#output-div').html(data);
});
$('#form-message').fadeIn(300, function() {
$('#form-message').html('<p>Thank you for joining our list. Great offers coming soon.</p>')
});
$('#myModal').delay(1500).trigger('reveal:close');
});
}
solved it.
I had commented out the last several lines of the signup/index.php, including this line
if($postFields['request_type'] == 'ajax'){ $postFields["success_url"]=''; $postFields["failure_url"]=''; }
For some reason, that line is needed for form submittal success. Everything after that line is commented out, from
if ($return_code==201) {
to
</ol>
</p>'; }
}
and my jQuery is handling messages, errors and completion as such
submitHandler: function() {
$.post('/dev/rest/ccphp/signup/index.php', $("#ccsfg").serialize(), function(data) {
$('#results').html(data);
}).success(function() {
$('#ccsfg').html('<h4>Thank you for joining our list. Great offers coming soon.</h4>');
})
.error(function() {
$('#ccsfg').html('<h4>Oops! There was an error. Please try again. </h4>');
})
.complete(function() {
$('#myModal').delay(1500).trigger('reveal:close');
});
}