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.
Related
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');
});
});
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.
Is there a way to get the hyperlink name when you click on it using jQuery? I have the following code, I need some jQuery direction:
<a href="#" id="imageClick" name='<%# Eval("fileName1") %>'><asp:Image ID="myImage" name='<%# Eval("fileName1") %>' runat="server" ImageUrl='<%#"~/Image/" + Eval("fileName") %>' /></a>
Basically I would like to return the value of whatever <%# Eval("fileName1") %> is.
Thanks.
EDIT: To be more clear, I have a popup page which contains a listView which that has images and radio buttons. The requirement is if you click on the radio button, it should get the value of that specific choice and close the popup. I'm also passing a value back to the parent window. So this is what I have:
$(document).ready(function () {
$("#form1").change(function () {
var val = "";
if ($('input:radio[name=myRadio]:checked').val()) {
val = $('input:radio[name=myRadio]:checked').val();
}
if (val != "") {
$(window.opener.document).find('#txtLogos').val(val);
// Close the window
window.close();
}
});
});
This works fine when I click on one of the radio buttons. But now they added another requirement that if they click on the images they want the same result (Obviously without disrupting the functionality that the radio button has).
You can just access it using this.name inside your click handler. this here is the Dom element (Don't need jquery to retrieve the element attribute value), so just directly access the name attribute of the element.
$('#imageClick').click(function(){
alert(this.name);
});
Edit
Form change will not be triggered if you click on an image; unlike input, select, textarea etc. So you need to trigger form change manually on image click event (to simulate a radio button click triggering the form change event).
Bind a click handler to your images to add class:
$('yourimageselector').click(function(){
$(this).toggleClass('checkedImage'); // Add a class on first click and again clicked on it remove the class to say it is turned off. If you dont want a turn off functionality simply say :
//$(this).addClass('checkedImage'); //or if this is the only class then this.className = 'checkedImage' classList is not yet supported in all browsers.
$('yourform').change(); //as this is image it wont trigger form change event so you need to manually trigger form's change event (only for input, select, textarea etc form change will be triggered).
});
And in your form event:
$("#form1").change(function () {
var imgNames= $('.checkedImage')
.map(function(){return this.name; })
.get(); // Will get you all the image names in an array.
//if it is just one image then simply do if($('.checkedImage').length > 0) $('.checkedImage')[0].name,
//Code follows
});
Fiddle
this can also work in the event handler of your click :
document.getElementById("new-answer-activity").name
I'm writing a Greasemonkey script and having a problem setting the active states for two buttons I'm adding, each for toggling.
I've added code to assign class. The problem occurs when switching buttons.
For instance, when I press Button A, it becomes active. But then, if I press Button B, Button A remains active. Thereby leaving me with two buttons in an active state.
I know I can remove the active class by pressing my active button again prior going to another button. However I would like to achieve a function whereby, if Button A is active, and I press Button B, then Button A loses its active class, and vice versa.
Here is the code I'm using that's assigning class to my buttons:
$('#ButtonA').toggle(function () {
$("#ButtonA").addClass("active"); }, function () {
$("#ButtonA").removeClass("active");
});
$('#ButtonB').toggle(function () {
$("#ButtonB").addClass("active"); }, function () {
$("#ButtonB").removeClass("active");
});
It's not clear why you are using toggle like that, and avoid CloneAndModifyProgramming as much possible.
Add a class to your buttons, like so:
$("#ButtonA, #ButtonB, #ButtonC").addClass ("MyRadioBtns");
Then use click to handle the active state:
$("button.MyRadioBtns").click ( function (zEvent) {
$("button.MyRadioBtns").removeClass ("active");
var jThis = $(this);
jThis.addClass ("active");
//- DO WHATEVER ELSE IS DESIRED WITH jThis HERE.
} );
See the code in action at jsFiddle.
You simply add one line in your first callback for each button to remove active class from any active button.
$('#ButtonA').toggle(function() {
$('button.active').click(); // Remove active class from any active button.
// you may adapt 'button.active' to select the proper buttons
$('#ButtonA').addClass("active");
}, function() {
$('#ButtonA').removeClass("active");
});
But, use only one block of code for all the buttons, like this;
$('#ButtonA, #ButtonB, #ButtonC').toggle(function() { // this refer to the just clicked button.
$('button.active').click(); // Remove active class from all other buttons.
$(this).addClass("active");
}, function() {
$(this).removeClass("active");
});
instead of copying and pasting.
See http://jsfiddle.net/fNtPP/1/ for a clean refactored code showing an example with 3 buttons.
I have this JQuery Code, Its in the DOM Ready, on click of .deleteCatFavs it runs this function. I want to add some If functionality to this but am having trouble.
// Delete a Favorite Category,
$('.deleteCatFavs').live("click", function(){
var actionRequested = "AJAX_delFavCat";
var url = "index.php";
var catId = $("input[name=FavCats]:checked").val();
var rowId = $("input[name=FavCats]:checked").attr("id");
$.post(url, {AJAX_Action: actionRequested, rowId: rowId},
function(data){
$("#favCats").html(data);
});
});
I want this to do something like this. I have used a isset() to show what I want to do in a PHP way, I just dont know how to do this in javascript.
// On DOM Ready, Hide .deleteCatFavs
$('.deleteCatFavs').hide();
// When the input radio button is checked [name=FavCats],
if(isset($("input[name=FavCats]:checked") // <-- if radio button is selected
$(".deleteCatFavs").show(); // Then show the Delete class,
// And if the .deleteCatFavs class is clicked, then run the JQuery code above
if (.deleteCatFavs.isClicked){
Run Jquery Code here';
}
So basically, When the radio button is checked, I want to show the .deleteCatFavs class, otherwise I want it hidden on DOM ready. And also, when the .deleteCatFavs is shown and clicked, It must run the above code.
Im sure this is so simple, I just dont know how to do isset queries in Javascript.
Also, lets keep it simple.
How about:
$("input[name='FavCats']").change(function () {
/* Fired immediately after a radio button is clicked with name='FavCats' */
$(".deleteCatFavs").show();
});
Which binds an event handler to the change event--I'm assuming that if any radio button with name FavCats is clicked, you want to show .deleteCatFavs.
And:
$(".deleteCatFavs").click(function () {
/* Run jQuery code when element with class deleteCatFavs is clicked */
});
try with latest jQuery v1.6 method prop
if ( $(elem).prop("checked") )