It seems that in IE, some delegates may somehow cause another delegate to fail to work.
This is one possible case:
<html>
<head>
<script src='jquery-1.4.2.min.js'></script>
<script>
$(function() {
$('#main')
.delegate('div', 'click', function() {
alert('on div!');
})
.delegate('[name=first]', 'change', function() {
alert('first!');
})
.delegate('[name=second]', 'change', function() {
alert('second!');
})
;
});
</script>
</head>
<body>
<div id="main">
<input name="first" />
<input name="second" type="checkbox" />
<div>Test</div>
</div>
</body>
</html>
In this particular case, the handler for the checkbox won't fire.
As usual, the problem doesn't show up in other browsers.
Changing the call orders may solve an issue , but at the risk of causing another. Note that the delegate works on mutually exclusive elements so the order should be irrelevant.
What causes this?
I cannot offer an explanation; but I have encountered similar behavior in IE8. Oddly, in my case everything worked well if I rearranged bindings so that the delegate binding on one of my checkboxes came before delegate bindings on other form elements. A delegated click handler on a link before the checkbox handler did not seem to cause problems.
In my case I had one click handler on a checkbox, two change handlers on select boxes, two click handlers on radio buttons, another click handler on another class of checkboxes, and several click handlers on links.
There are a lot of variables to account for and it is difficult to account for all of them here. For example, the delegated selector for the checkbox that caused a problem for me was an id selector while the selector for the innocuous checkboxes was a class.
It seems that the problem has been resolved in the latest version of jQuery or Internet-Explorer (as of this writing, 1.5 and 9, respectively).
I ran into this as well. For some reason, reversing the order of registering the events fixed it for me. I'd love an explanation though.
Related
Is it possible to know where an image has been dropped?
Assume we have a checkerboard with different divs
<div id="jquery-wrapped-fine-uploader"></div>
<div id="checkerboard">
<div id="A1" class="ffup"></div>
<div id="A2" class="ffup"></div>
<div id="A3" class="ffup"></div>
<div id="A4" class="ffup"></div>
......
</div>
<script>
$(document).ready(function () {
$('#jquery-wrapped-fine-uploader').fineUploader({
request: {
endpoint: 'endpoint.php'
},
dragAndDrop: {
extraDropzones: [$('.ffup')]
}
});
});
</script>
First of all, your code will only designate the first ffup div (A1) as it currently stands. You will need to pass a selector for each individual drop zone into your extraDropzones array. The jQuery wrapper will only pass the first element covered by your jQuery selector to the library. Ideally, it would pass along all items represented by the selector, but, to do this, it would have to be aware of the intended type of the parameter. The jQuery wrapper must convert all jQuery objects to HTMLElements before passing the data on to Fine Uploader's core code (which is not aware of jQuery). This is something I'd like to look into more in the future, but this is the way it has worked since 3.0. Note that this limitation does NOT apply to the target of a Fine Uploader plug-in instance, i.e. $(".myTarget").fineUploader(...).
As to your question, Fine Uploader does not currently pass any information along to callbacks that would allow you to determine which drop zone received an associated file. This is an interesting feature, and I can see how it may be useful. Please open up a feature request in the issue tracker so we can discuss and prioritize this for a future release.
It appears there is a conflict between kendo 2013.2.716 and jquery ui 1.10.3. If I have a kendo grid inside a jquery ui dialog I cannot place the cursor in the textbox inside the filter editor. I've created a jsBin to demo the problem.
http://jsbin.com/itehom/14/edit
Repo steps
click "pull the grid into a dialog"
click the filter icon on any column
try to place your mouse in the text field inside the filter editor.
Set modal: false for jQuery dialog.
Try following
$('#myModal').on('shown', function() {
$(document).off('focusin.modal');
});
If you used the jquery dialog instead of the Bootstrap modal, Varde's script might not fix your problem. I spent a few hours on this. Then I noticed the following line can be added after opening your jquery dialog, and it fixed the problem.
$(document).off('focusin');
As you may have noticed, the event doesn't contain a namespace. Keep in mind that this might turn off more "focusin" event handlers that you wish to turn off. I checked the jquery UI source code and didn't find the namespace and am unsure if they used a namespace.
The entire code block of my prototype is like:
<button id="opener">Open Dialog</button>
<div class="row" id="viewSearchResults">
blah, blah, ...
</div>
<script>
$(function () {
$("#viewSearchResults").dialog({
autoOpen: false,
modal: true,
minWidth: 700
});
$("#opener").click(function () {
$("#viewSearchResults").dialog("open");
$(document).off('focusin');
});
});
</script>
Hope the above can save some time for some developers. Thanks.
What code would I start with? I know onChange won't work with input=hidden. Would it be best to write something to re-name the hidden fields and then build it into the existing onchange for the dropdown?
Not 100% sure what you are wanting to do. I don't believe its possible to make a tag with <input type="hidden" show on the browser unless you change its type.
Just tested this at W3Schools and worked on Chrome
<input type="hidden" value="OK">
<p id="demo">Click the button below to set the type attribute of the button above.</p>
<button onclick="myFunction()">Try it</button>
<script type="text/javascript">
function myFunction()
{
document.getElementsByTagName("INPUT")[0].setAttribute("type","button");
};
</script>
<p>Internet Explorer 8 and earlier does not support the setAttribute method.</p>
Granted this code obviously states it won't work with IE8 or earlier and it would probably be better to set the id attribute for each of the hidden fields you want and probably use something like document.getElementById(IDVALUE).setAttribute("type", "text") Though this will allow the user to change the value in the tag.
Now all that is left is to give a dropdown with an onChange function that runs a statement like above based on what was selected.
You'll have to forgive me for asking a somewhat trivial question here, but I'm generally curious if there's a better way of detecting if a button has been pressed. I'm guessing this would apply to anchor tags also.
Presently I have two submit buttons (so I cannot use $(form).submit in this case), both of which will change another field when they are activated:
<button id="accept" type="submit">Accept</button>
<button id="decline" type="submit">Decline</button>
To achieve this I have detected a click event, and the Enter keypress event separately:
$('#accept').click(function(){ $('#decision').val('Agree'); })
$("#accept").keyup(function(event){
if(event.keyCode == 13){
$('#decision').val('Agree');
}
});
I guess more than anything I'm wondering if there is a way to simplify this code, as it's rather cumbersome, especially if there's a lot of processing (you could create a function, but that's yet another step) and since jQuery seems to have most things covered, I'm surprised after trawling the internet I can't find a cleaner solution.
(with the above I was worried about other ways to mimic the button press, such as hitting space, although that seems to be covered!)
Thanks!
For a button element, both the spacebar and the enter key being presses on a button will generate a click event according W3C event specifications. You should not have to do any special processing to handle that.
As for using $(form).submit(), you can. Just change your buttons to not implicitly submit the form by chaning them to push buttons (W3C):
<button type="button" id="...">...</button>
Then in your handler you can do:
$('#accept,#decline').click(function(event){
$('#decision').val($(event.target).text());
$(form).submit();
}
If you need to you can do some processing on $(event.target).text() to make 'Decline' null/emptystring if necessary.
you can do something like this to make the click a little better: (using a function is necessary here to get something better):
function setDecision(value){
$('#decision').val(value);
}
$('button[type=submit]').click(function() {
var val = $(this).text();
setDecision(val);
});
$("button[type=submit]").keyup(function(event){
var val = $(this).text();
if(event.keyCode == 13){
setDecision(val);
}
});
I think I understand your question, and there may be some precedence to be found in this related topic.
jQuery: how to get which button was clicked upon form submission?
This method avoids adding the .click() event to each button, though that may be a viable option for your application.
Hope this helps!
Mason
Add name="decision" and value="Accept" / value="Decline" (accordingly) to the submit buttons
This way you do not need javascript to handle this at all...
And if the 'Accept' button is the first, then pressing enter inside any form field will also trigger that one
Sample:
<form action="1.html" method="get">
<input type="text" name="in">
<button type="submit" name="decision" value="Accept">Accept</button>
<button type="submit" name="decision" value="Decline">Decline</button>
</form>
I'm using Dojo 1.5, and I'm trying to create a context menu that can invocate a function myFunction passing the event and other arguments. So far I've the following code:
<div dojoType="dijit.Menu" id="bankerMenu" style="display: none;">
<div dojoType="dijit.MenuItem" onclick="copyDocuments('bankerFolder');" iconClass="dijitEditorIcon dijitEditorIconCopy">Copy to Client</div>
<div dojoType="dijit.PopupMenuItem" onclick="doNothing()" iconClass="dijitEditorIcon dijitEditorIconCopy">
<span><s:text name="CopyTo.label"/></span>
<div dojoType="dijit.Menu" id="bigsubmenu">
var="distributionList">
<div dojoType="dijit.MenuItem" onclick="myFunction(event,'bankerFolder',1)"><s:property value='distributionListName'/></div>
</div>
</div>
</div>
But it is not recognizing the 'event' that I want to pass to the function. I know I can susbtitute the call using this:
<div dojoType="dijit.MenuItem" label="Some menu item 2">
<script type="dojo/method" event="onClick" args="evt">
myFunction(evt,'bankerFolder',1);
</script>
</div>
but I would like to simplify it and used the first syntax. How can I do that?
Passing event literally would likely end up leaving you at the mercy of cross-browser inconsistencies. However, since events connected through Dojo worry about this for you, and since onClick is a widget event that already receives the event object as an argument, you should be able to get away with the following:
<div dojoType="dijit.MenuItem" onClick="myFunction(arguments[0],'bankerFolder',1)"><s:property value='distributionListName'/></div>
Also note the capital C in onClick - widget events always use camel case; they are not actual DOM events, though they are often mapped to analogous DOM events. I get the impression you were testing with capital C though, based on the problem you described encountering.
Here's a simplified example of the idea working (initially provided/suggested by Dustin Machi in the Dojo IRC channel): http://jsfiddle.net/xwFC5/5/
Following from Ken's comment to the answer above, I managed to figure this out as outlined here: http://blue-networks.net/wp/?p=37 It connects to onCellContextMenu and pulls the relevant information out of the event, saving it into the grid object.