How do I open the file selection dialog of a filefield using a different button or component? I tried searching over the internet but I cant find a solution. What Im trying to do is open the file selection dialog upon click of a panel.
You'll have to trigger the click event for the filefield's "Browse..." button at the DOM level.
Simply put, the idea is to get the reference to the <input> and launch its click event.
Here's an example (also on JSFiddle - http://jsfiddle.net/fa4bwp7q/3/):
var fileField = Ext.create('Ext.form.field.File', { renderTo: 'myDiv', hidden: true });
var textField = Ext.create('Ext.form.field.Text', {
renderTo: 'myDiv',
listeners: {
change: function(btn, newValue) {
fileField.fileInputEl.dom.click();
}
}
});
This should open up the file browser when typing into the textfield, while the filefield remains hidden at all times.
This works even on ExtJS 5.
Short answer is you can't. The user needs to interact with the button directly to cause it to open.
What Ext does under the hood is it puts a file input element inside a button, that invisibly matches the dimensions of said button. So when you click on the button, it triggers the file upload. That mechanism is used to provide styling.
If you need to trigger one button's click by clicking another button...then this is what you can do:
// .....
buttons:
[
{
text: 'Open File',
id: 'open_button',
handler: function()
{
// open the dialog box and
// do what you need
}
},
{
text: 'Another button',
handler: function()
{
// here you can click the Open File button
Ext.get('open_button').el.dom.click();
}
}
]
// ....
Works like a charm. You can even check this DEMO. Inside the Upload button handler I am alerting some text. If you click on test button, it will actually click the Upload button.
Only after some time, that demo is not visible in the Sencha's try website, so you can just copy my code there in the appropriate place.
Good Luck
Look at this screenshot: http://ic.pics.livejournal.com/werdender/15522933/44207/44207_original.jpg
Blue color shows the invisible <input type="file">.
The file field is above the "Browse..." button. When you click the "Browse..." button, you're actually click the invisible file field.
Programmatically click on the file field is not possible.
But you can create a dirty hack: http://jsfiddle.net/W2ffW/
Main input thus will only contain a text value, but you can override its method extractFileInput() etc - this is another question.
Related
I've a Fullcalendar site where I use the customButtons option to add two buttons. I also use the jquery .apppend function to add a dropdown and a textfield in the header. When I click the custom button the dropdown and textfield I added disappear. I can't find the reason. Can someone help me with this problem?
This is my code for the custom button. It sets the filter option and changes the icon on the button.
customButtons: {
filterButton: {
text: '',
click: function() {
var newFilterResourcesWithEvents = ! calendar.getOption('filterResourcesWithEvents');
calendar.setOption('filterResourcesWithEvents', newFilterResourcesWithEvents);
tekst();
}
}
},
But it also removes these elements. The code for the append for the dropdown and textinput is.
$("#calendar .fc-resource-area .fc-widget-header .fc-cell-text").eq(0).append('<div class="form-inline"><div id="resourceddldiv"><select class="selectpicker" id="resourceddl" data-container="body"></select></div><input type="text" id="filter" placeholder="filter" size="15" style="margin-left:40px";></div>');
before click
after click
It looks like you are getting a postback, and it is not refreshing your JS on the page. I can't tell where you have your elements placed in your JS files. The button defaults to submit, so you need to prevent that default if you are wanting to not do a postback.
event.preventDefault();
Put this with your buttons event to stop the postback, and it won't refresh your page causing you to lose those elements.
I've solved it by appending the elements again after the function from the custom button. If I used the event.preventDefault(); the function wasn't executed at all. And because the whole table is rendered again after the function the only solution was appending it again.
I have:
When I click button "Add new" - I have modal window made by rails_admin with select and options there. Select element have id "#select_from_modal"
I want:
when user changing option in #select_from_modal - to add new fields in this modal window and save form.
I know, that I can add custom js by adding file to assets/javascripts/rails_admin/custom/file.js and I did it.
My code is:
$(document).on("change", "#modal", function() {
$('#select_from_modal').change(function() {
alert('hello!')
});
});
But it have strange behaviour. When I changing select option for the first time - nothing happens. For second time - I have alert 'hello'. For third time - I have this alert twice. Then 3 times, 4, and so on.
Please, help me to understand what am I doing wrong and how to make it in right way?
Try to use event delegation, e.g.:
$(document).ready(function() {
$(document.body).on('change', '#select_from_modal', function() {
alert('hi');
});
});
In
<script>
$all_hier_radio.on("change", function() {
// Grab an input radio checked handler
// Hide the radio options
$all_hier_div.hide();
$all_hier_radio.hide();
// Create a button to be added to another div like this:
$hierarq_but = $("<button/>", {
text: $hier_div_checked_id.text(),
type: "button",
id: "btn_hier",
});
// Append the button to another div
Whe a user selects one of the options, the list gets no visible, so it's fine.
But, I'd like that when a user clicks that button, the previously hidden radio option list could be displayed again
$("button#btn_hier").bind("click", resetHierarquia());
</script>
And in another file,
function resetHierarquia() {
console.log("RRRRRREEEESSSSEETT");
//$(this).preventDefault();
//$(this).stopPropagation();
$all_hier_div.show();
$all_hier_radio.show();
}
But I dont' get the desired effect. Please take into consideration that I'm delving into javascript for the first time...
The problem is this line:
$("button#btn_hier").bind("click", resetHierarquia());
It should be like this:
$("button#btn_hier").bind("click", resetHierarquia);
It's because you don't want to call the function resetHierarquia but pass it in parameter to the event listener.
I don't know much about writing good javascript so perhaps I am thinking about this in the wrong way, but here is the situation.
I have a page which contains various plugins, each with an edit button.
So there is for example an HTML plugin, a Twitter plugin etc.
Once you click on the edit button a jQuery UI dialog box is displayed via a common function which all of the edit buttons call.
The content of the dialog is filled with that particular plugin's update form.
The dialog created by this common function also provides a "Save" and a "Cancel" button automatically.
Since both of these "Save" and "Cancel" buttons are created by the dialog they are both assigned closures to the "click" option.
What I want to do, if possible, is provide some sort of hook function which can be run when the "Save" button is clicked, which can be defined by the javascript in each of the plugin's update forms.
I think I have explained enough now so here is some sample code:
This would tell each of the edit buttons to create a dialog box and fill it with the appropriate content.
// This function is called by each edit button
// on a click event which passes the required ids
function update_form_dialog(plugin_id) {
$.post(
'/get_plugin_update_form',
{
'plugin_id': plugin_id
},
function(response) {
var dialog = $('<div class="update_form"></div>').appendTo('body');
dialog.dialog({
open: function() {
dialog.html(response);
},
show: 'fade',
modal: true,
title: 'Update plugin',
width: 'auto',
height: 'auto',
buttons: [
{
text: 'Save',
click: function() {
// Call a hook defined in the plugin update
// form then send update data
}
},
{
text: 'Cancel',
click: function() {
// Close the dialog here
}
}
]
});
}
);
}
As you can see in the above code what I have is pretty simple, but I don't know how I can add a hook to the start of the "Save" button's click function.
Each plugin's update form is stored in the response variable and that is where the plugin update form's javascript is written.
Is there a way that I can tell the save button what to do before it runs its normal code when the "Save" button is clicked?
If anyone needs more explanation please let me know.
Any help on how I could write this would be much appreciated.
Edit:
It seems I'm having trouble explaining my problem so hopefully this edit will help make things clearer.
What I want is to execute some code which would be optionally defined in the content of the dialog box when it has been opened. This code, if defined, should be executed once the save button is clicked but before the actual click function is executed. Is this possible?
You can use a plugin for subscribing and attaching to some events like:
http://weblog.bocoup.com/publishsubscribe-with-jquery-custom-events/
http://archive.plugins.jquery.com/project/jQuerySubscribe
http://www.novasoftware.com/download/jquery/publish-subscribe.aspx
This way, on the save you can publish that the save has been done and all subscribers code will be executed.
with the third link you can do something like the following:
$(document).ready(function(){ $('.save').subscribe('save',function(){//dosomething;}})
Later on the save code you can do this:
$.publish('save');
And the code will be executed
hope it helps.
You're close!
buttons: {
'Save': function() {
// Call a hook defined in the plugin update
var code = $('textarea#input').val();
eval(code);
// form then send update data
$('form').submit();
// $.ajax({....
},
'Cancel': function() {
// Close the dialog here
}
}
I have an editable iframe and I would like to insert text at the cursor location when the user clicks a button that is outside the iframe. I am trying to use the following code to insert the text:
function insertAtCursor(iframename, text, replaceContents) {
if(replaceContents==null){replaceContents=false;}
if(!replaceContents){//collapse selection:
var sel=document.getElementById(iframename).contentWindow.getSelection()
sel.collapseToStart()
}
document.getElementById(iframename).contentWindow.document.execCommand('insertHTML', false, text);
};
I think that this is failing because the focus changes when I go to click the button. However, I am not sure how to correct this. Thank you for your help.
You're correct about the focus shift affecting your code insert.
Using the jQuery library, you can shift focus back to the iframe in the button's click binding:
$('#button').click(function(event) {
event.preventDefault();
$('#iframe').focus();
insertAtCursor('iframe', 'test-text', null);
});
In pure javascript, shift focus before executing insertAtCursor() like so:
document.getElementById('iframe').focus()