I am trying to solve a riddle here. Imagine the following. The user uploads one image, which a minute later he wants to replace. Thus he clicks on the image and selects the upload button again, chooses another image and uploads it. In the editor this image is shown, but when he saves the change, the old image is shown again.
My guess is, that this is due to the fact that only the src-attribute gets updated, but not the data-cke-saved-src-attribute. The question now is: How do I change that?
I should also mention, that since I have a blur-handler, that is asking the user if he wants to discard the change. This fires whenever an dialog opens, which is why I am "refocusing" the editor using the following snippet:
CKEDITOR.on('dialogDefinition', function (e) {
var dialog = e.data.definition.dialog;
dialog.on('hide', function () {
dis.ckEditor.focusManager.hasFocus = true;
$('.cke').show();
});
});
Related
I have a form to upload images. By default the source is "images/noimage.png";
<img id="previewing" src="images/noimage.png" />
I store the path in the database. If I select a specific user and the form gets loaded I want to display the image for the specific user. I do this in the windows.onload event. However another image (previous image the user had, if user had one) gets loaded instead of the new one.
var Logo = 'Logos/123.png'; //path stored in Database
if (Logo!='') {
//If the user has a 'Logo', show it
$("#previewing").prop("src", Logo);
} else {
// if user has no 'Logo', show default image
$("#previewing").prop("src", 'Images/noimage.png');
}
This does not work as expected. What's wrong here?
If after reloading image getting change then most probably its Caching issue.
you may try adding some random string into image URL like
Logos/123.png?v=xyz
I have many records in a table in my page, each of them has an "edit" button, it gets all the data in relation of that record from server, and then it fills the form next to the table.
Thing is, Im using Krajee File Input, and I can't seem to change the preview image to the one I previously uploaded in server. When I click "Edit",
It should change the preview image everytime an edit button of any record is clicked, and show the image of that record in the File Input Plug-in.
First question: Is that even possible?
Second and last, I leave my JS code, initialisation:
$(document).on('ready', function()
{
$('#photo').fileinput(
{
overwriteInitial: true,
maxFileSize: 100,
showRemove:false
}
);
});
The Edit function that inside has the FileInput code part.
$("#photo").fileinput('refresh',
{
initailPreview:
[
'<img src="../img/Legacy.jpg" class="file-preview-image">'
],
showUpload:false
}
);
For what I have seen so far, It refreshes the Plug-in, it removes the "Upload" button, but the image doesn't show.
The images only appear when I add them in the "OnReady".
And for practicall matters I just used any image stored in my project (Legacy.jpg), to see if it works.
Oh my god, it was "Initial" not "Initail".
I have the 2 sets of code:
Saves the data
myapp.activeDataWorkspace.ProjectHandlerData.saveChanges();
2.Refreshes the page
window.location.reload();
is there a way to make both of these work together on one button, as currently when i click save, the browser recognizes the changes and the (are you sure you want to leave the page) message or something along those lines pops up..
cheers
This is for the HTML client, right?
Assuming that is the case:
saveChanges() is an asynchronous operation, so you'd want to do:
myapp.activeDataWorkspace.ProjectHandlerData.saveChanges().then(function () {
window.location.reload();
});
That way it will wait until it is finished saving the changes before it reloads the screen.
However, there is a smoother way to do it, at least from the user perspective it's smoother.
On the edit screen, leave the Save method out, let LightSwitch handle that. When the user clicks save, it will close the edit screen, and go back to where they were before. Using the options parameter of the showScreen method, we can change that behavior.
Change the method that calls the edit screen like this:
myapp.showEditProject(screen.Project, {
afterClosed: function (editScreen) {
myapp.showViewProject(editScreen.Project);
}
});
This way, after the edit screen is closed, and it has handled the save changes operation for you, the application will automatically navigate to the details view screen of the recently edited item.
If you are instead wanting to refresh the browse screen after adding a new entity:
myapp.showAddEditProject(null, {
beforeShown: function (addEditScreen) {
addEditScreen.Project = new myapp.Project();
},
afterClosed: function () {
screen.Projects.load();
}
});
Those two options, beforeShown and afterClosed, give you a lot of really cool abilities to influence the navigation in your application.
I have learnt that you can save from a add/edit window, and reload the main page you are going back to by doing the following:
For Example: (adding an order to an order screen)
click on your button to add the order
enter the details required.
hit your custom save button with your validation included.
before your commitChanges(); write in the following line: screen.OrderLine.OrderTable.details.refresh(); "This needs applying to your scenario"
when you return to your screen your details should have been updated (for example the total value now displays the correct value in my case)
hope this helps...
I'm in a sticky situation. I'm trying to make an image an upload button, but I cannot change that image at all... however, when you click the image, I have it calling a JS function I can put anything into.
How can I launch an browser upload though this function alone? Normally I would just make the image an input, but like I said, in this case I cannot do that.
Does anyone have an example they could share?
Here's my function (which is called onclick of the image):
function fnImport(elem){
var $input;
$input = $input || $("<input type='file'>");
$('#Import').append($input);
$input.click();
$input.hide();
}
However, when I run it, on the first click it adds the button, then on second it acts as an upload (and doesn't hide in either).
In addition, I'm getting a strange as well in my console?
Something like this might spark some ideas for you: http://jsfiddle.net/NKekN/2/
This is a ColdFusion 8 question.
I have a cfm page that has a button that onClick calls the following Javascript function located in the page header:
function confirm_expiration_letters() {
var resultOfConfirm = confirm("Would you like to send expiration and reminder letters?");
if (resultOfConfirm == true) {
document.body.style.cursor = "wait";
window.location="_expiration_letters.cfm";
}
}
On the page that is called, a series of emails are generated, then a PDF report file is generated and displayed using these two lines:
<cfheader name="Content-disposition" value="attachment;filename=#fileName#">
<cfcontent type="application/pdf" file="#docPath#/#fileName#" deletefile="true">
Notice in the JS function that the cursor is changed to "wait". But the program control appears to get lost after the above cfheader call and so I can't find anywhere that I can reset the cursor back to:
document.body.style.cursor = "default";
Do you have ideas on where I can place this to turn off the cursor animation? I tried multiple places and it doesn't work. Once the cfheader and cfcontent calls happen, control of previous window and cursor are lost it appears.
You might try something like this above the cfheader.
<script>
document.body.style.cursor = "default";
</script>
<cfflush/>
The problem is that doing so might (probably will) screw up the cfheaders since cfflush is designed to flush partial results and will include the headers. But it's the only thing I can think of.
If I understand you correctly, you want to have a "wait" cursor whilst the PDF is prepped, and then return to a standard cursor after that.
Don't web browsers do this automatically when you're waiting for a requested document? IE: as soon as you do your window.location, whilst the document is loading, the cursors automatically changes to a "wait", and then once the doc is served, returns to an "auto".
This is what I see (when running code similar to yours). Is this not what you see?
Instead of changing the cursor, display a loading message using HTML/animated gif. When the PDF loads, it will replace the loading screen.
I would suggest having a hidden div containing your loading message, then use JavaScript to make it appear when needed.
Here's some JavaScript. This is how it would be done with jQuery.
function confirm_expiration_letters() {
var resultOfConfirm = confirm("Would you like to send expiration and reminder letters?");
if (resultOfConfirm == true) {
$('#Loading').fadeIn(); //SHOW THE LOADING INDICATOR
$.post('PDFGenerator.cfm', function(returnData){ // AJAX POST, CALLBACK
//RETURN THE FILENAME OR LOCATION OF THE PDF
var FileName = $.trim(returnData); // TRIM THE RETURNED DATA
window.open("path_to_file/" + FileName,"_blank"); // NEW WINDOW
$('#Loading').fadeOut(); // HIDE THE LOADING INDICATOR
});
}
}