image upload through json in rails3 - ruby-on-rails

I'm using carrier wave for image upload and trying to do upload
image through json,but its not going to save value into database
.While image name is coming in controller correct here
#Employee_events.external_doc=params[:external_doc] .But its not
going to set in this #Employee_events.external_doc variable , as i
thing may be issue will be multipart. But d'not know how to use in
json.
.js file
$(document).ready(function() {
var evnt = {};
$("#Event_dialog-form").dialog({
autoOpen : false,
height : 400,
width : 600,
modal : true,
buttons : {
"Enter" : function() {
evnt.external_doc = $('#imgid').val();
$.post("/employee_management/add_event", evnt, function(data) {
if (data) {
alert("Data entered successfully");
} else {
alert("Oops! some error occured");
}
});
return false;
},
Cancel : function() {
$(this).dialog("close");
}
},
close : function() {
//allFields.val( "" ).removeClass( "ui-state-error" );
}
});
$(".EventEntryDialog").click(function() {
var Ed = $(this).attr("id");
$('#user_id').val(Ed);
$("#Event_dialog-form").dialog("open");
});
});
Controller
def add_event
result=TRUE
#Employee_events=EmployeeEvent.new
#Employee_events.external_doc= params[:external_doc]
puts #Employee_events.external_doc.to_s
respond_to do |format|
if #Employee_events.save
format.json { render :json => result }
else
return FALSE
end
end
end

Related

Phonegap Cordova FileSystem not persistent on iOS?

I am working on an app for iOS and Android, and I am using Cordovas File plugin to save some data to a file on the device.
This file will contain information about the user, so he/she does not have to log in every time they use the app, so the information has to be there even if the app is exited and relaunched.
On Android this works fine:
window.requestFileSystem(LocalFileSystem.PERSISTENT, 20*1024*1024, app.onFileSystemSuccess, fail);
On Android the data I save is there next time I open the app, but on iOS the file is empty (or not existing).
Does this not work for iOS?
Here is the whole source:
var app = {
initialize: function()
{
this.bindEvents();
},
bindEvents: function()
{
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function()
{
app.initAPP();
},
initAPP: function()
{
window.requestFileSystem(LocalFileSystem.PERSISTENT, 20*1024*1024, app.onFileSystemSuccess, fail);
},
onFileSystemSuccess: function(FS)
{
FS.root.getDirectory('MyAPPDir', {create:true}, app.gotDir, fail);
},
gotDir: function(Dir)
{
app.appRoot = Dir;
try{
app.appRoot.getFile('authInfo.txt', {create:true}, function(fileEntry){
fileEntry.file(function(file){
alert('Got file authInfo.txt')
var Reader = new FileReader();
Reader.onloadend = function(e){
alert(e.target.result);
if( e.target.result == '' ){
$('#container').load('login.html');
}
else{
document.authInfo = e.target.result;
alert(e.target.result);
alert('You are now auhtorized');
}
}
Reader.readAsText(file);
})
})
} catch(e){
$('#container').load('login.html');
}
},
authUser: function()
{
email = $("#email").val();
password = $("#password").val();
$.ajax({
url: AUTH_URL,
type: 'POST',
data:{
email: email,
password: password
},
success: function(data){
resp = $.parseJSON(data);
if( resp.status == 'success' ){
try{
app.appRoot.getFile('authInfo.txt', {create:true}, function(fileEntry){
fileEntry.createWriter(function(writer){
writer.truncate(0);
writer.onwriteend = function(){
writer.write(resp);
writer.onwriteend = function(){
alert('Wrote '+JSON.stringify(resp)+' to '+fileEntry.toURL());
}
}
});
});
}
catch (e){
alert(e);
}
} else {
alert(resp.message);
}
}
});
}
};
function fail(a){
alert(a);
}
I get this message in iOS:
Wrote {.......myjson.....} to cdvfile://localhost/persistent/MyAPPDir/authInfo.txt
But then when it tries to read it on launch it seems like the file does'nt exist any more, or is empty?

JQuery UI Multiple Dialogs Not Working

I have a page with two links that open two different modals, the "forgotten password" link opens the "forgotten password" modal and the "tell-a-friend" link opens the "tell-a-friend" modal.
Both modals contain forms that can be submitted.
The problem is if I open the first modal and submit it or close it, I cannot submit the second modal.
I can open the second modal, but I cannot submit it.
Please advise what the problem could be!
Here below is the javascript code that resides in separate javascript file, which is then imported into the HTML file. It is not inline javascript, if that would matter.
[code]
var forgottenPasswordDiv;
var tellAFriendDiv;
function clearErrorMessages() {
$('#errorMessage').text("");
}
function openForgottenPassword() {
forgottenPasswordDiv = $('#forgotten-password');
$('#forgotten-password').load("/Templates/include/new/ajax/modal/forgottenPassword.jsp")
.dialog(
{
autoOpen:false,
modal:true,
position:'left+35% top+20%',
width:'330',
height:'auto'
}
);
$('#forgotten-password').dialog('open');
}
function closeForgottenPassword() {
forgottenPasswordDiv.dialog("close");
}
function submitForgottenPassword() {
clearErrorMessages();
var email = $('#email').val();
if (email == null || email == '') {
$('#errorMessage').text("Please enter your user name or email");
} else {
clearErrorMessages();
/* Ajax Post */
var formData = $("#forgottenPasswordForm").serialize();
$.ajax({
type: "GET",
url: "/Templates/include/new/ajax/forgottenPassword.jsp",
data: formData,
success: function(data) {
if (data.error != null) {
$("#errorMessage").text(data.error);
} else {
$('#forgottenPasswordForm , .info').fadeOut(1000);
$("#successMessage").text(data.success);
$("div").removeClass('display-none');
}
},
dataType: 'json'
});
}
}
function openTellAFriend(gunId) {
tellAFriendDiv = $('#tell-a-friend');
$('#tell-a-friend').load("/Templates/include/new/ajax/modal/tellAFriend.jsp?id=" + gunId)
.dialog(
{
autoOpen:false,
modal:true,
position:'center top+10%',
width:'330',
height:'auto'
}
);
$('#tell-a-friend').dialog('open');
}
function closeTellAFriend() {
tellAFriendDiv.dialog("close");
}
function submitTellAFriend() {
clearErrorMessages();
var yourname = $('#yourname').val();
var errorMessage = "";
if (yourname == null || yourname == '') {
errorMessage += "Please enter your name<br />";
}
if (errorMessage != '') {
$('#errorMessage').html(errorMessage);
} else {
clearErrorMessages();
/* Ajax Post */
var formData = $("#tellAFriendForm").serialize();
$.ajax({
type: "GET",
url: "/Templates/include/new/ajax/tellAFriend.jsp",
data: formData,
success: function(data) {
if (data.error != null) {
$("#errorMessage").text(data.error);
} else {
$("#tellAFriendForm").fadeOut(1000);
$("#successMessage").text(data.success);
$("div").removeClass('display-none');
}
},
dataType: 'json'
});
}
}
[/code]
The ui-dialog widget will stay in the DOM as a hidden element even after the dialog is closed.
So, in order to isolate your two dialog functionalities from each other I'd suggest that you call:
forgottenPasswordDiv.dialog("destroy")
in your "closeForgottenPassword" function and
tellAFriendDiv.dialog("destroy")
in your "closeTellAFriend" function.
This will return the dialog back to its pre-init state (which is not harmful at all because you reinit it in your "open" functions.)

Extjs 4.1 in MVC client controller success method can't call another function in this controller

I am working with grails 2.1.0 and extjs 4.1.0 . Now I am facing some problem here with the success method. The problem is in the code below in comment. Can anyone help me on this :
onupdateOrder : function(invoiceid, payMethod, rebatevalue){
if(invoiceid > 0){
Ext.Msg.confirm('Update Product', 'Are you sure?', function (button) {
if (button == 'yes') {
var invoice = Ext.create('Ext4Example.model.Invoice',{
id : invoiceid,
rebate : rebatevalue,
paymethod : payMethod
});
invoice.save({
success: function(model) {
var inId = model.getId();
this.updateOrder(invoiceid); //warning:this.updateOrder is not a function
},
failure: function(){
console.log('Unable to save/update');
}
});
}
}, this);
}else{
Ext.Msg.alert("Please Give Invoice Id");
}
},
updateOrder :function(invoiceid){
var order = Ext.create('Ext4Example.model.Order',{
id : invoiceid
});
order.save({
success: function(order) {
console.log(invoiceid);
Ext.getCmp('InvoiceNo').setValue(invoiceid);
Ext.getCmp('itemform2').restoreItem();
},
failure: function(){
console.log('Unable to update');
}
});
}
You need to specify
scope: this
On the invoice.save() method so that the callback runs in the controller scope.

How to change the value of a JQueryUI progressbar dynamically?

In my import photos script, I try to update a progressbar (Jquery UI) following a while loop with Ajax requests.
The JQueryUI progressbar, which is supposed to be displayed before the launch of ajax requests do it after. So I have the user feedback at the end of the execution of my while loop ... (The console shows me that these applications are running well, in the right order)
I thought about using live () or bind (), but I do not know how to test it ...
Here is my jquery code:
$(function() {
var percent_progressbar=0;
$('#myform').submit(function() {
$('#myform').hide();
$("#text_result").html("Import in progress : <span class='progression'>0/0</span>").show(10, function() {
$("#myprogressbar").progressbar({value:percent_progressbar});
$("#myprogressbar").show(10, function() {
if (jQuery.trim($("#id_src").val()).length!=0) {
// Total number of photos to import
$.ajax({
type : 'POST',
async : false,
url : '/nbphotos.php',
data : 'chem=mydir',
success : function(nbphotos){
if (nbphotos>0){
$(".progression").html("0"+" / "+nbphotos);
var finish=false;
var nb_photos_imported=0;
var ajax_done = false;
var resultat_ajax="";
// Variables envoyées en Ajax
var datas = desvariables;
while (nb_photos_imported < nbphotos) {
ajax_done = false;
$.ajax({
type : 'GET',
async : false,
url : '/traitement.php',
data : datas,
success : function(resultat){
resultat_ajax=resultat;
ajax_done=true;
nb_photos_imported++;
}
});
if (ajax_done==true){
if (resultat_ajax=="ok") {
percent_progressbar = Math.floor(nb_photos_imported*100/nbphotos);
$("#myprogressbar").progressbar("option", "value", percent_progressbar);
console.info("Succès ajax (resultat : OK) : "+percent_progressbar);
$(".progression").html(nb_photos_imported+" / "+nbphotos);
} else {
finish=true;
$("#text_result").html(ajax_done);
return false;
}
} else {
// ajax error => exit the while
console.info("Ajax execution error "+nb_photos_imported);
return false;
}
} // While
if (finish==true) {
$("#myprogressbar").hide('slow');
$('#text_result').html("Import of "+nb_photos_imported+" photos done.");
}
} else{
$("#text_result").html("No photo to import.");
$("#myprogressbar").hide(10);
$('#myform').show("slow");
}
}
});
}
});
}); // callback #text_result.show()
return false;
});
});
Here is my new code. The console log show the progression of the percentage, the photos are imported, but I still have the display at the end. If I put a breakpoint with me debugging tool somewhere in the loop, the display is refreshing and everything is OK...
$(function () {
$("#myprogressbar").show();
var RetourNbPhotos = "";
var RetourImported = "";
var fini = false;
var percent_progressbar = 0;
var nb_photos_imported = 0;
var datas = desvariables; // datas sent with ajax
// Number of photos to import
function NbPhotoAjax() {
return $.ajax({
type: 'POST',
async: false,
url: '/boutique/modules/importimageswithiptc/ajax-nbphotos.php',
data: 'chem=$cheminimport',
success: function (nbphotos) {
RetourNbPhotos = nbphotos;
}
});
}
// Photo Ajax Import
function ImportPhotoAjax() {
$("#text_result").html("Import in progress : <span class='progression'>0/0</span>").show();
// RetourImported = "";
return $.ajax({
type: 'GET',
async: false,
url: '/boutique/modules/importimageswithiptc/ajax-traitement.php',
data: datas,
success: function (resultat) {
RetourImported = resultat;
}
});
}
$("#myprogressbar").progressbar({
value: percent_progressbar
});
$('#generator').submit(function () {
$('#generator').hide();
if (jQuery.trim($("#id_product_src").val()).length != 0) {
$.when(NbPhotoAjax()).then(function () {
if (RetourNbPhotos > 0) {
while (nb_photos_imported < RetourNbPhotos) {
$.when(ImportPhotoAjax()).then(function () {
nb_photos_imported++;
if (RetourImported == "ok") {
percent_progressbar = Math.floor(nb_photos_imported * 100 / RetourNbPhotos);
$("#myprogressbar").progressbar("option", "value", percent_progressbar);
console.info("Success : " + percent_progressbar + "%");
$(".progression").html(nb_photos_imported + " / " + RetourNbPhotos);
} else {
fini = true;
$("#text_result").html("ajax_reussi");
return false;
}
}).fail(function () {
// ajax error => exit the while
console.info("Ajax execution error " + nb_photos_imported);
return false;
});
} // While
if (fini == true) {
$("#myprogressbar").hide('slow');
$('#text_result').html("Import of " + nb_photos_imported + " photos done.");
}
} else {
$("#text_result").html("No photo to import.");
$("#myprogressbar").hide(10);
$('#generator').show("slow");
}
});
}
return false;
});
});

Keep impromptu "up" while performing a jquery Ajax/MVC post

Is there a way to keep the impromptu dialog box displayed during a post?
Here's the javascript code
$('#linkPostTest').click(function() {
openprompt();
});
function openprompt() {
var temp = {
state0: {
html: 'Are you sure you want to post?<br />',
buttons: { Yes: true, No: false },
focus: 1,
submit: function(v, m, f) {
if (v) {
var form = $('frmPostTest');
$.ajax(
{
type: 'POST',
url: '/Path/TestPost',
data: form.serialize(),
success: function(data) {
// I realize I could check "data"
// for true...just have not
// implemented that yet....
$.prompt.goToState('state1');
//$.prompt('Test was successful!');
},
error: function() {
$.prompt.goToState('state2');
//$.prompt('Test was not successful.');
}
}
);
return true;
}
else {
//$.prompt.goToState('state1'); //go forward
return false;
}
}
},
state1: {
html: 'Test was successful!',
buttons: { Close: 0 },
focus: 0,
submit: function(v, m, f) {
if (v === 0) {
$.prompt.close();
}
}
},
state2: {
html: 'Test was not successful.<br />',
buttons: { Close: 0 },
submit: function(v, m, f) {
if (v === 0) {
$.prompt.close();
}
}
}
};
$.prompt(temp);
}
The controller does this
[AcceptVerbs(HttpVerbs.Post)]
public bool TestPost()
{
// runs some code that saves some data...
// this works fine
bool updated = functionThatSavesCode();
return updated;
}
After I click Yes when the 'Are you sure you want to post?' impromptu dialog is displayed... it disappears...How can I make it stay displayed?
OK got it to work...I'm really impressed with the impromptu plug-in and jQuery!
Two of the things I did differently to get this to work was to add the two
return false;
statements under the state0 block and...
to set the the ajax call to
async: false,
Here's the new javascript:
$('#linkTestPost').click(function() {
TestPost();
});
function TestPost() {
var temp = {
state0: {
html: 'Are you sure you want to post?<br />',
buttons: { Yes: true, No: false },
focus: 1,
submit: function(v, m, f) {
if (v) {
if (PostView() === true) {
$.prompt.goToState('state1');
// the line below was missing from my original attempt
return false;
}
else {
$.prompt.goToState('state2');
// the line below was missing from my original attempt
return false;
}
}
else {
return false;
}
}
},
state1: {
html: 'Test Post was successful!',
buttons: { Close: 0 },
focus: 0,
submit: function(v, m, f) {
if (v === 0) {
$.prompt.close();
}
}
},
state2: {
html: 'Test Post was not successful',
buttons: { Close: 0 },
submit: function(v, m, f) {
if (v === 0) {
$.prompt.close();
}
}
}
};
$.prompt(temp);
}
function PostView() {
var form = $('frmTestPost');
var postSuccess = new Boolean();
$.ajax(
{
type: 'POST',
url: '/Path/TestPost',
data: form.serialize(),
// the line below was missing from my original attempt
async: false,
success: function(data) {
postSuccess = true;
},
error: function() {
postSuccess = false;
}
});
return postSuccess;
}

Resources