jquery change method to trigger hidden file input - javascript

I have created a fake file input using an anchor tag and placed a hidden file input beside this, I want to use jquery to add a click event to the anchor tag that triggers the activation of the hidden input box but Im not completely sure how to achieve this, if anyone could give me some advice that would be great.
Here is my current effort http://jsfiddle.net/kyllle/CdXP9/
I guess Im probably way off with this one, would love some advice on how this can be achieved though
Kyle

http://jsfiddle.net/CdXP9/6/
$('#upload').css("visibility", "hidden");
$('#fakeUpload').click(function(e) {
e.preventDefault();
$('#upload').trigger('click');
});

I cannot say for certain that it isn't possible, but js code to automatically upload a file is very much frowned on, and deliberately made difficult. So I think you are probably on a hiding to nothing with this.

Use the click function it will open the browse window- if that's what you want- see http://jsfiddle.net/CdXP9/5/

Related

capture event if drop-drop has been done on the HTML page

I work on Angular4 and 5 and I have a functionality to upload a file in the table. So, on click of an Add button a pop-up will appear and through that pop-up we can browse or drag-drop a file/files.
My requirement is as soon as the drag-drop/browse is done I have to make a service call. So is there any way I can capture an event if the files has been browsed/drag-droppped? If so please guide me. IS there any other way I can achieve this?
PS: This upload pop-up and the Add button is 3rd party, I cannot make any change in their component/HTML. The thing I am trying to do is to capture the event, if there is any other way please suggest.
HTML
<button>Add Files</button>
<3rd-party-upload-popup></3rd-party-upload-popup>
Can you please make a plunker for the same, specifying where actually you need the event. Otherwise what i understood is that when you drop something, you may require an event. For this in Angular drop event is there. Also you may want to look at sortableJs

Adding DIV's inside modal dialog HTML5

I tried to google but didnt find exactly I am looking for.
I need a sample example code or a resource link to create a modal dialog box and I want to have two boxes(div's) inside the dialog box.
I have to insert different content inside both the boxes(inside the dialog box) when the user clicks.
I know how to create a dialog box but, I would like to particularly know how to insert divs inside it.
I hope my question is clear. Please help.
If you just want to look at the code have a look at the work section of http://www.pixelvalet.com (ok! its my website but then it would help you right?).
The way i approached the issue is:
first i added the template (all the empty divs i needed which i would be populating later on) in the main html file itself
next i gave it a hidden css style to the parent which contained all the divs.
then i added a logic which would tell the browser the which link was clicked and then it would populate the divs in the template appropriately using ajax
it would then slowly fade in using jQuery
but then this isnt the only way you might do this. There are tons of plugins out there which help you create a modal box. but i opted for this route because i wanted it completely customised.
hope it helps.
I have used bootstrap modal for dialog box it works great you check it here:
http://getbootstrap.com/javascript/#modals
The basic idea is just put your dialog box code at bottom of you page,
<div id="my_dialog">
content
</div>
And you detach it in your jquery or other framework you are using or just pure js.
In jquery you can do this:
var my_dialog = $( "#my_dialog" ).detach();
now when ever you need to show it you just attach it to where you want to show it.
and before you attach it you can insert any content you want.
But I would suggest you to use bootstrap's modal much easier.

Triggering Submit in File Upload with JQuery Form Plugin

I'm using the JQuery Form Plugin for a file upload.
now, at the moment i'm using a regular submit button, but i'd much rather like to have a div trigger the submit.
I tried this...
$(document).on('click', '#settings_changeprofilepic_dialog1_submit', function(event){
$(document).find('#UploadNewImage').submit();
});
('#settings_changeprofilepic_dialog1_submit' is my new submit div)
('#UploadNewImage' is my form)
But it just won't fire...
Can someone help me with this? I've tried to google this problem, but the terms JQuery, Form, Submit, File Upload, and so on seem too ambiguous to get the answer I'm looking for...
From what you have provided it is a bit difficult to determine the cause of the problem. Lets try some simple debugging to get an idea of what might be happening.
I would probably try logging the form to the console first to make sure jQuery has actually found the form. Just like this: console.log( $(document).find('#UploadNewImage') );
If you're still having trouble it would be great of we could see the code. Give us a link to where it's hosted or use a website like jsbin or jsfiddle.

How to make a javascript alert NOT say the name of the page?

My webapp alert looks like this:
InputCoordinates.html
Latitude must be filled out.
I would say this looks unprofessional and rough around the edges. Is there a way to stop the alert from displaying the pagename?
You can't manipulate that.
Maybe you take a look at these bastards called modal popups, if youre able to use jQuery.
http://jquery.iceburg.net/jqModal/
There are non-jquery options, too, of course.
I'd advise you not to use "alert". Use something that allows you to style it yourself, e.g., jQuery Dialog. You can make that modal if necessary (follow the links on the right of the page I sent for add'l examples).
Use an HTML modal box instead of the JavaScript alert() Box.
There are plenty of options to choose from on the web, e.g. here.

Any ideas on how to make edit-in-place degradable?

I'm currently writing an edit-in-place script for MooTools and I'm a little stumped as to how I can make it degrade gracefully without JavaScript while still having some functionality. I would like to use progressive enhancement in some way. I'm not looking for code, but more a concept as to how one would approach the situation. If you have any ideas or know of any edit-in-place scripts that degrade gracefully, please share.
It sounds like you might be approaching this from the wrong direction. Rather than creating the edit-in-place and getting it degrade nicely (the Graceful Degradation angle), you should really be creating a non-Javascript version for editing and then adding the edit-in-place using Javascript after page load, reffered to as Progressive Enhancement.
There are two options for this. Create the display as a form with a submit button that works without Javascript, then using Javascript replace the inputs with some kind of label that performs the edit-in-place. You should be able to use a combination of labels and id attributes to pick out the correct properties for your edit-in-place implementation to work. The other option if you don't want a form to display by default is to display the values with an button/link for turning it into a form using server-side processing, then adding the edit-in-palce to that.
You can't do edit-in-place at all without JavaScript, so graceful degradation for it consists of making sure that the user can still edit the item in question when JavaScript isn't available.
As such, I'd just have a link to edit the entire item in question and then create the edit-in-place controls in JavaScript on page load, hiding the edit link if you'd rather than users use edit-in-place when available.
If it's textual content, you could show the editable content as an input type submit button, with as caption the content. When clicked, it would submit the entire form, preserving the other values, and show an edit dialog. Afterwards the form values could be restored.
Maybe put an input in a div under each element that has an edit-in-place. When the page loads, use javascript to hide those divs. That way they'll only be usable if the javascript never fires.
I'm asuming what you're trying to do is something like the following scenario:
<li>
<span id="editable">Editable text</span> <a class="edit_button"> </a>
</li>
Where the <a> is a button that replaces the <span> with an <input>, so that it can be edited. There are a couple of ways to make this degrade gracefully (ie work without javascript).
In theory:
Using CSS, do it with psuedo-selectors. :active is somewhat like an onclick event, so if you nest a hidden <input> in the <li>, this CSS hides the <span> and shows the <input> when the li is clicked on.
li:active #editable {
display:none;
}
li:active input{
display:block;
}
This may work in your favorite browser, but you'll without doubt find that it breaks in IE.
In practice:
Use a link. Have that <a> be an actual link that goes to a page where this input/span substitution has been done server side. You stick an event handler on the <a> that uses MooTools to cancel the click event for people who have JS, like this:
function make_editable(evt) {
var evt = new Event(evt);
evt.preventDefault();
}
Try using a styled input text, and after the page loaded make it readonly, using the readonly attribute.
and when click on it remove the readonly attribute, and onblur making it readonly again.
when clicking on "Save" button or on onblur event make an Ajax Request to save the data in the server.

Categories

Resources