I have a Jquery Mobile shell page, which I'm loading a form into using Ajax. The form has some checkboxes, which I need to bind to.
Oddly, I can get it to work setting the listener directly on the button like so:
$('input[name="ohneiln"]').on('change', function() {
alert("hello");
});
But when I'm trying to set the listener to $(document) and delegate to the checkbox, the listener never fires:
$(document).on('change', 'input[name="ohneiln"]', function() {
alert("hello");
});
Question:
What is the correct way to set an event binding for "dynamic" elements being loaded in via Ajax using $(document).on()? Is this not possible for change events or why am I running into troubles?
Thanks for help!
The way the .on() method works changes according to how you use it. In your first example the .on() method behaves similar to bind and will only work on elements that already exist.
The second example behaves like .live() or delegate() in many ways. And will work for elements that are added later.
Read the docs for a detailed explanation http://api.jquery.com/on/
Related
I'm using TableSorter to display my table with the 'editable' widget - all working fine.
Does anyone know how I can change the 'single-click' (default, I think) which will select a cell, to 'double-click'?
Content Editable is a browser rendering, and as such TableSorter has little control on how it functions.
That being said you could write your own. Don't use the ContentEditable widget at all, just bind each tbody td to a double-click event, then wrap the content in a content editable div and focus it and bind an unfocus event to it. Once unfocused, run your validation, commit the update, update ts rows and unwrap the cell.
This is not a common UI behaviour and as such I think it would be in the realm of per site rather then the scope of TableSorter, it would be hard to maintain with a small user base and take up lots of the authors time to do so for a small base.
Of course this is my personal option of it, I know the Author is very busy and I just can't see this being a very used widget.
EDIT: Mottie just came up with an other option, it's not the best since it'll run validate on each blur, but it might be a little quicker to implement.
initialized: function (table) {
$('tbody')
.on('click', '[contenteditable]', function(){
this.blur();
return false;
})
.on('dblclick', '[contenteditable]', function(){
this.focus();
});
}
http://jsfiddle.net/abkNM/4683/
I have an NgComponent in Angular Dart which instantiates a search box and according to the query strings it populates another div in my html template with the ng-repeat directive.
More precisely,
Query string update: there is a binding to the input text value with a field in my components' controller.
Results population: In the attach() method I added a watcher for the local field which acts as a model to the input box, and whenever it changes I add to a local list some items which then acts as a model to the ng-repeat directive in another div.
So far everything works fine. But now I want to add some event listeners inside my component, like keystroke listeners or if possible to add listeners on specific elements in my html template. I have used CSS for hover and focus events and also ng-focus and ng-blur for easy functions. But I do not think that this can be used for keystroke listeners.
The reason I want the keystroke listener is to enable results traversing using the arrow keys. While the cursor is inside the input text box I would like to move to the first result, which is in another div, with the press of Down arrow, and then continue to the other results.
Thank you
OK, It seems that I have finally found the solution.
The solution is to implement the NgShadowRootAware interface with my component and then inside the void onShadowRoot(ShadowRoot shadowRoot) method I have full access to the DOM created inside the shadow dom template.
I have a requirement to ask a question when a certain scenario happens on my MVC 4 view.
When that scenario is true, I simply want to have a jQuery UI dialog pop up modally. That dialog will simply have two radio buttons for "WidgetType" (Purple or Blue).
The viewModel has a property for SelectedWidgetType (that has a default value).
I simple am looking for the best way to handle updating the underlying model with the selection a user picks in the dialog.
Thanks in advance for any replies.
NOTE: I am using this overly simple example as the basis for other dialogs that will have more fields on them that also update the underlying model.
Creating the dialog isn't the hard part, but I am struggling with getting the values.
User jQuery's AJAX post method.
Create a view model JavaScript object on the front end that maps to the parameters of your data model. This view model object can be triggered to get updated each time the user changes his selected options by calling an update method via the change event handles of each form element.
Pass it back to the server controller by packing it into a JSON object using json2.js
If you want a full framework/elegant solution look at using knockout.js which simulates most of this for you... !
I have a jquery mobile app that has a page. This page has three DIVs, I programmatically choose one of these DIVs based on a variety of variables. Regardless, the one DIV contains a select element. This element has 20 items in it. Because of the shear quantity, the select box opens in its own dialog. I'm fine with that, however, after a user makes a choice, the pagebeforeshow event of my hosting page is fired again. My problem is, I can't seem to figure out how to detect that this event was fired as a result of the user choosing an option or closing the select dialog.
Is there a way to detect in the pagebeforeshow event how we got here?
jQuery mobile passes meta-data to the callback functions of most events. From the docs on pagebeforehow:
Triggered on the "toPage" we are transitioning to, before the actual transition animation is kicked off. Callbacks for this event will recieve a data object as their 2nd arg. This data object has the following properties on it:
prevPage (object) - A jQuery collection object that contains the page DOM element that we are transitioning away from. Note that this collection is empty when the first page is transitioned in during application startup.
You should be able to use this in your callback function to branch to your advantage, i.e. detect if prevPage is the current page. This might look like:
$('#yourPage').live('pagebeforeshow', function(event, data) {
var from = data.prevPage;
// do some inspection of `from` and branch accordingly
// might require some experimental console.logging first
});
I also didn't verify the question raised in above comment, but data.prevPage has a copy of the entire previous page's HTML, accessed via data.prevPage[0].innerHTML. I'm sure you could do something like binding to the click event on the select dialog and tell it to add a class or whatever to the DOM where the user selected whatever entry, and scrape that back out of the HTML? Just throwing an idea out there.
I have a View which I call RenderPartial.
In the Partial usercontrol I set ViewData["IsTextAreaVisible"] = true;
In my View after the call to RenderPartial I check the value of ViewData["IsTextAreaVisible"].
Even though the usercontrol had set it, the View thinks that it is null.
Is this a bug or is there a better approach?
Thanks
That is working as designed.
Each partial view gets it own copy of the view data so that any changes it makes don't taint the original. What you want to do, we've expressly prohibited.
I think that the RenderPartial method actually makes a new dictionary out of the object you pass it as ViewData. Since the dictionary is different, the original won't contain any new values you've added to it.
It seems to me though, that if you can calculate the value you are setting in the partial, you ought to also be able to calculate it in the parent view. You might want to think about reversing the calculation and perform it in the parent view and add it before calling the partial. You could always check if it is available in the partial and, if not set, recalculate as needed.
Exchange of data between components of a view looks to me like a design fault. View (full or partial) are there just to passively and stupidly display the model state. All checks, calls and set up of values should be done in models/controllers. I would advice you to rethink you architecture. Even if it seems to you nice and suitable right now, there is a likelihood sooner or later you will have to redesign this piece of code.
Expanding on what Brad said, do it client side with JavaScript. Using JQuery you can find out if there are any visible textboxes on the page and init the client as so.
$(document).ready(function() {
if ($("input[#type=text]:visible").length > 0) {
// inject JS file and init tinyMCE.
$.getScript('<%= ResolveUrl("~/Scripts/tinymce/tiny_mce.js")' %>, function() {
// TODO: call tinyMCE's init function here
});
}
});
That will initialize it only if there are inputs that are visible.
See http://docs.jquery.com/Ajax/jQuery.getScript for restrictions on getScript
Edit: Edited to expand it based on Jon's comment. Note that I haven't run this revised edit in a browser so there may be a hiccup or two. Also, this should really be re-tagged with jQuery if you accept this solution.