SelectMenu Customized and Refresh - jquery-ui

I try to develop a selectMenu with image? I take exemple on jquery ui site and modify to add possibility to keep picture visible when you selected item with picture.
Here My code
My problem is on reset. Sometimes I need to put it in initial state.
I try refresh, but there is an automatic add of With on Span result and my select change size. I correct it on create event
widget.css({ 'width': '' });
But don't Work in select event... and when I click on reset my select become smaller.
Then I try destroy event. Good for the size but not for the text display. If I select an item with picture.
Click on reset
When I put break Point :
$(this).children(":first")
return the good item (text=TOUS") But it keeps old selected value to display text and display nothing
I don't know do to refresh correctly my selectmenu and return in first state
If debugging is the art of removing bugs ... then program is the art of creating

Related

Weird behavior for textarea in diagrams.net (draw.io) format panel

I'm facing a very weird (& blocking) issue using diagrams.net webapp.
I'm trying to add some nodes in the Format Panel. I created a new tab in this panel & added in it some new inputs.
There are text inputs, checkbox inputs & textarea.
But the behavior is absolutely not the expected one.
For text & cb inputs, everything works fine, but textareas behavior is... at least very weird:
The field can't get focus by mouse clicking (remember that click works on other inputs). The only way to set the focus on it is by using JS focus() method.
Text inside the tag can't be selected by mouse. If element has the focus, text can be updated. Moreover, even if text can be changed, text cursor cannot move from the end of the text.
Textarea box is not resizable. There is the bottom-right arrow to resize it & I added the "resize" value to be sure but the feature doesn't disable but I juste can't. BUT ! If I set the attribute "disabled" then I can resize the box. Unfortunately, I can't disable the textarea since I want to put it because I need to write in it.
I can't show you code for now (it's just a new node creation using document.createElement) but you can easily test this: go to drawio webapp & when the webapp is loaded, use the Inspector in the developer tools to add a new textarea node in the format panel (div with ".geFormatContainer" class) : element is not focusable with the mouse, text inside it is unselectable & box is not resizable as long as "disabled" attribute is not set.
I added a click listener in the component to check if click did something & it does, but it doesn't give the focus to the element (document.activeElement says that body is focused -_-) so I think there is something in mxgraph which avoids the element's classic behavior. But what ?

Django autocomplete light: Select2 not showing AJAX-updated selected option text

I have a DAL field with data-html attribute and populated with Select2QuerySetView::get_queryset(). I have overridden get_result_label(). For the same queryset result, get_result_label() may return different labels depending on some condition. The result labels are fetched correctly. But after selecting an option, its text displayed in the select box remains fixed even after it has subsequently changed and is re-selected from the dropdown list.
To demonstrate, here are some sequential screenshots. I am returning current time from get_result_label().
Initial results, first option being selected.
First option selected (17:42:08). New results fetched.
Second option selected at 17:42:29. Shown correctly in box. New results fetched.
First option with updated text (17:42:56) selected again. But in the box it still shows the original text (17:42:08).
Am I missing something? Or is there any workaround in DAL or Select2?
Answering own question: After trial-and-error, found that clearing the HTML in select2:selecting event seems to be working.
$(('#my_select2_id').on('select2:selecting', function(e) {
$('#' + this.id).html('');
});
Not sure if this is the correct way, though.

Need to Update a file after a DBGrid Double-Click

I seem to have a mental block with this one.
I need to save recent changes to a Record. I am doing it OK with buttons for "New" "Edit" "Post" "Next" etc but when a user double-clicks a DBGrid, it is now too late to make changes as the DBGrid selection has moved the database cursor to the selected record.
I can't use AutoUpdate as the data that may have been changed is not something the user would have directly entered, it is a value that is changing all the time.
I'll try to describe it better: While the user is reading a Test-page, a timer is counting down or up. When they click the "Next" or "Prior" buttons I can save the timer setting. But, if they Double-Click the DBGrid I have no way of first changing the current Record before the selection moves to the clicked-Record.
I tried using the
Procedure TForm1.tblTestOnBeforeScroll(...
begin
tblTest.Edit;
tblTest.FieldByName('TimerCt').AsInteger:=ClockCtr;
tblTest.Post;
end;
But, that crashed the database, not surprisingly, but I thought I would give it a try before asking here.
How do I deal with the current record? I do not want to disallow the double-click if possible as it seems nice and intuitive for the user.
I'm afraid that what you do on DBGrid is a wrong in concept action.
Key point is DBGrid is a data aware control. So everything you do on it must based on it's datasource then it's dataset.
There is a DblClick event on TDBgrid. But still you have to check it's dataset to see what record is active.
The code you shown above clearly lead you to an endless loop.
When you doing a scroll, the dbgrid will call OnBeforeScroll event, moving the active record
and call OnAfterScroll. Your OnBeforeScroll code does an data update. Then dbgrid abort its operation cause of data change. Then after data update, it try to scroll again, and the data change happen again. Endless loop happen here.
best regard
Apologies in advance if I'm misunderstanding you, but it seems to me that either the premise of your question is wrong or there is something relevant you haven't told us about what you're doing. Please try the following:
If you don't have one already, please temporarily add a DBNavigator to your form and connect it to the same DataSource as your DBGrid. The point of doing this is so that you can more clearly see what's going on.
Then, in your DBGrid's Options, set dgEditing to True.
Finally, comment out or disable your BeforeScroll handler, save and run your program.
Now, click once in some cell in your DBGrid that contains a value which it's ok to change. Click it a second time so that it selects the value in the cell rather than the cell per se.
Make some change to the cell value, but do nothing else for the time being. You should notice that a) the current record indicator of the DBGrid has changed from a black triangle to an I-Beam graphic, like ][ and b) that the tick and cross buttons of the DBNavigator are now enabled.
Now, without doing anything else on the form, click in another row of the DBGrid. You should find that a) the change to what was the current record in step 5 has been saved and b) the current row indicator reverts to the black triangle and the DBNav's tick and cross buttons are disabled.
(If you don't get the behaviour I've just described, create a minimal new project and try that instead, as some other change you've made in your existing project may be interfering with it).
What I've described in 5 & 6 is the default behaviour of a DBGrid and insofar as I understand your q, that seems to be the behaviour you're trying to achieve. If that's not the behaviour you want, please explain exactly how what you do want differs. It's not clear to me where the user double-clicking on the grid comes into your q, except that that action may move the dataset's cursor (if the dbl-click is on a different row than the current one), but as the default DBGrid behaviour will save changes to the current row before it moves the dataset's cursor, it will do what you seem to want automatically.
Btw, what "AutoUpdate" do you mean? Did you mean TDataSource's AutoEdit property?

How do I activate an in-place editor for a grid cell that displays as a progress bar?

One of the cells in my DBTreeListView is bound to a repository item that is a progress bar.
I want to be able to edit the progress displayed by clicking on this cell. At this stage my application should change its cell to another repository item: a text field where I'll be able to insert a value. Once focus is changed to another cell, my progress bar should be displayed again, showing a new value. How do I do this?
DBTreeListView has column events OnGetEditingProperty and OnGetEditProperties. I'll probably use one (or both) of them, but can't come up with any good idea.
This can be simply. You should handle click on this progress bar and display editor over it. You need to handle scrolling and clicking in another place to get rid of editor. And in case that scrolling too far - editor should be hidden.
Steps:
Create hidden editor for progress
Handle OnClick for tree view item
Display editor and set focus
On editor enter (or tab) save progress information
On click on form or another part of tree view - hide editor (saving/discarding changes how specified by your policy)
On scroll tree view move the editor and when bounds of parent does not overlap bounds of editor - hide it
Best regards,
Vladimir

jQuery mobile Trigger create doesn't completely work with element added through DOM

I have to add istantly some items without reload the page. After adding these elements I call
$('#one').trigger('create');
But not everything changes as it should (screenshot: http://www.ianaz.com/9a7c50414.html )
The background stays grey, the icon at the right is not added and the text becomes link.
It does not transform everything in a list "button". The third component in the screenshot is as should be.
Do I have to call another method?
Thanks
Just before you call create,try to call listview("refresh") on the list.For eg. if list is the id of the listview,following code should be used:
$("#list").listview("refresh");

Resources