Add 'onchange' Property To DetailsView Boundfield - javascript

I'm designing a page with forms for editing fields in a database. At first I was using FormView controls, but for various reasons I've changed them for DetailsView controls instead. These are so much quicker to code and the code is much tidier, because you just add a Boundfield for each field you want to display. No textboxes, labels, etc. So far so good.
However, the textboxes in my FormViews all had the onchange property specified, which called a JavaScript function. Basically it was the mechanism to alert a user that changes had been made and needed saving, and it worked perfectly.
Unfortunately, you can't add the onchange property to a DetailsView Boundfield. I've tried adding it programmatically in code behind (VB) in the DataBound event of the DetailsView, working on the theory that when the page is loaded the Boundfields are rendered as textboxes but, as expected, it doesn't work.
Can anyone suggest a way to replicate the functionality of the textboxes in my FormViews, calling a JavaScript function when text in a Boundfield is changed? I'd really like to stick with DetailsViews and Boundfields if I can. And if I could achieve this in code-behind, perhaps iterating through the fields to add the functionality, that'd mean just a few lines of code for each DetailsView, rather than adding it declaratively for every Boundfield (there are LOTS!).

This was way easier than I thought. It's possible to add the onchange property to the DetailsView itself. Once that's done, any change to any field within the DetailsView calls the JavaScript function.

Related

Checkbox and file tags don't work in Angular2

I have a form in Angular2 with several input types: text, file, checkbox, and textarea. When you click on the text and textareas, they focus as expected. However, when I click on the checkbox or file elements, nothing happens. The checkbox doesn't check, the "select a file" dialog doesn't open. I've tried this with and without [ngModel] and it doesn't seem to make a difference.
At first I thought this might be because of some issue with z-index, but I've tried removing all instances of z-index and that doesn't make a difference.
Another thought I've had from researching this is that some method is getting called somewhere for these elements onclick that counteracts the natural behavior of the elements, but I can't find any instances of where this might be happening in my own code.
I am a beginner in Angular2 so apologies beforehand if it's some simple answer I haven't thought of.
TYIA!
While trying to simplify my app for plunkr, I found my problem. I have a directive "clickOutside" with a host listener on document:click to check if any a click is outside of an element or not. I have it used in a couple of places on the page. Turns out that if there is anything more than a simple method call inside it (e.g. (clickOutside)="runMethod(); otherValue = true;" as opposed to (clickOutside)="runMethod() it makes the file and checkbox tags not work correctly. I don't know why it does this, but it makes for an easy fix!

Jquery detect textbox programmatic change

Long story short I am cowboying some code in which a custom framework I am using allows me to insert a script to manipulate the page to do what I want.
I want to fire a function, but only after the textbox I want to use has been populated from the webservice that gets called.
In Jquery/Javascript is there anyway to call a function like the jquery change function, but one that can detect when the textbox has been changed from javascript, and not by the user in the browser.
I currently just have:
$("#mytexbox").on('input propertychange paste change',function() {
doSomething();
});
But this does not fire when the original function in locked code sets the value of the textbox.
Note: I can not just overload the original function as most of it is built up from dynamic server side code that I can't mimic in Javascript.
I also want to avoid having to use setTimeout() as this is unreliable and not really a nice solution.
Thanks in advance!
Maybe you can use a hidden div or input and check the changes on this instead of changes on #mytextbox. Obviously, the user can not change the hidden div, but the script can. You get the trick? ;)

Updating model/collection from React component

I see a lot of examples using React with backbone, there is however some things that are still somewhat unclear to me. In nearly all examples they show how you can get your component to listen to a model or collection and update the view accordingly, this seems pretty straightforward, you can use the Backbone Mixin or you can setup some event listeners in "componentDidMount()".
What is unclear to me is how to handle the other way, ie when a user writes in some input field, I then want to set this same value on my model, which ultimately is what i validate and then save on the server.
With simple forms this is also pretty straightforward, you can have a callback for the onChange event, example:
return <div><input type="text" onChange={this.setPrice} /></div>
All good, in the setPrice function I can now do something like:
this.props.myModel.set('price', e.target.value);
This works, but two things that immediately strike me:
The set method will be called on the model every single key event, since Reacts "onChange" actually executes on every key event, when you type in the textbox.
My second concern is, this works good for simple forms, however we have forms that have upwards 30-40 different input fields, having an onChange event on all of these input boxes, checkboxes and what have you seems counterproductive.
Right now, we have a databinding in our Backbone Views that simply sets whatever the user types on these input fields on the model, this does not seem to be the way togo in React though since what would be updated if you use something like ReactLink is the properties inside "state" on the Component, not properties directly on the model.
Is there a best practice here, or is this "marriage" between React and Backbone simply not meant to be? It would seem as if you would need to somehow map each input field to a specific property on the model. I am not sure if this is a good thing todo with React.
Thanks
You can call the setPrice method onBlur instead of onChange so that you will update the state when the user clicks or tabs out of the field.
This is more efficient for longer forms in my opinion as you are guaranteed that the user will tab or click to the next field.

Using Javascript/jQuery to trigger event when textarea rendered

I have a JSF page where I'm trying to tie the text in specific paragraphs to the contents of a set of textareas.
Getting the content to change when a textarea changes is dirt simple using onchange and onkeyup events:
onchange="$('dynamicParagraphId').text($(this).val());"
Unfortunately, I'm having some trouble initializing the paragraphs so that their text matches the textareas when the page is initially loaded.
Because of how the page is implemented, editing the underlying HTML is bloody difficult; I'm not sure how to implement an obvious solution like a script that triggers when the page loads, because it's going to take some real work for me to get a hold of the textareas' IDs. Is there some way to insert Javascript/jQuery code into the textarea definition that will trigger when the page loads so that I can make use of the this object and not have to figure out the textarea ID? Is there some feature of jQuery I can leverage that spares me needing to know the IDs?
Trigger the keyup event for all textareas, but you can probably come up with a more specific selector:
$(document).ready(function(){
$("textarea").keyup();
});
Or if you can only attach functions through inline markup for some reason you can add it to the <body>:
<body onload='$("textarea").keyup()'>
If you know how many textareas there are and which you want (i.e. the 5th on the page), you could easily query for all textareas:
document.getElementsByTagName("textarea");
and select the one you want. Another solution is to hand over the control to JS and render the textarea on the clientside.
http://jsfiddle.net/FExQy/

Extjs databinding model properties to ui elements (textbox)

I need binding the model properties to view elements directly bidirectional way automatically stay sync. If I make a change in a textbox I need run bussiness logic in the related model, and model properties changes automatically refresh the related ui elements.
Im new in Extjs, but I guess it doesnt support it, JQXB seem to be the right way, does anyone could point me a sample using JQXB with Extjs?
With jQXB it's very simple to stay in sync.
jQXB is striclty related to jQuery so I assume your needs can be satisfied only with jQXB and jQuery.(Extjs is no more required);
In your case you need only to use jQuery to catch textbox changes and then, supposing your datamodel already binded to controls via jQXB datasource, invoke doBind method to refresh controls after changing data model.
At http://www.jqxb.altervista.org you can see in demos pages that already do something like that.
At http://jqxb.codeplex.com ( Download Section) you can examples and in Documentation Section you can find other examples.
Alternatively you can post an example of what you want to obtain or write directly a post or an email on jQXB site.
regards

Categories

Resources