bada Programming - Tab and Panel - tabs

I am currently doing an app with tabs with panels. I have tried following the TabSample provided here: http://developer.bada.com/help/index.jsp?topic=/com.osp.cppapireference.help/classOsp_1_1Ui_1_1Controls_1_1Panel.html and the BasicApp (for usage of panels) provided in the IDE. The app has 2 tabs, tab1 and tab2. In tab1, there is a button and a label, once the button is clicked, it will change the text in the label and appLog it. The problem I am currently facing is that when I can't even click on the button, it does not respond (no response for button and label and applog), I have to click on tab2 then click back to tab1 in order for the button to work/respond. May I know how to solve this?
Many thanks in advance!

I kept trying and looking out what's wrong with the TabForm and realized the problem and solved it by adding these lines of code in TabForm::OnInitializing(void) :
if (pTab)
{
pTab->SetSelectedItem(__panelId);
__pPanel[0]->SetShowState(false);
__pPanel[1]->SetShowState(false);
__pPanel[__panelId]->SetShowState(true);
}

Related

How to fix Angular bug requiring user to click a separate element before choosing a second mat chip

Here is the link for an example of the issue I will attempt to describe. In the chips autocomplete example, click the text box to select a new fruit.
Now, before clicking anywhere else, click again on the text box as you did before.
This should result in no options showing up. The issue here is that the user must either begin keying in a new selection or first click another element in the window before matchip will show the options to choose from. I am wondering if there is a way to fix this issue. I would like a user to be able to choose a selection from the list and then immediately click the text box as they had before and make a new selection.
I'm using mat-chip-list inside an outer *ngFor iterating over a FormArray.
Here is what I'have done. It's pretty efficient :
<input
#validatorInput
#operationTrigger="matAutocompleteTrigger"
[formControl]="contactCtrl"
[matAutocomplete]="auto"
[matChipInputFor]="chipList"
(blur)="contactCtrl.setValue(''); validatorInput.value='';"
(click)="contactCtrl.setValue(''); validatorInput.value=''; operationTrigger.openPanel()">
The trick is
Always clear your html input and your (shared) formControl with an empty and not null value each time the blur and click events occur.
Do NOT do this 'clear' on the input focus event. (Because when you delete the last chip, the input is auto-focus and you will have the famous Expression has changed after it was checked.
Call operationTrigger.openPanel(); when the user click on the input
Setting contactCtrl.setValue(''); allows your autocomplete panel to be automatically opened when you call operationTrigger.openPanel()
Setting validatorInput.value=''; is just a way to properly sync your formControl with the html input to ensure a good UX/UI behavior.
Inside my formArray, the formControl is the same for all the inputs but it does not matter since the user can only manipulate one input at a given time
Since you didn't post your code and you mention the example on the material site I'm going to do it as a fork of the stackblitz example they have on their site.
But this will allow you to open the autocomplete panel again despite having had the cursor there and choosing an option previously.
// Using MatAutocompleteTrigger will give you access to the API that will allow you to
// to open the panel or keep it open
...
#ViewChild(MatAutocompleteTrigger, {static: false}) trigger: MatAutocompleteTrigger;
...
ngAfterViewInit() {
fromEvent(this.fruitInput.nativeElement, 'click')
.pipe(
tap(() => {
this.trigger.openPanel()
})
).subscribe()
}
Link to the full stackblitz:
https://stackblitz.com/edit/angular-sb38ig

Tracking Link Click on Google Tag Manager

I want to track clicks on the following button/link with Google Tag Manager. I created a trigger in Google Tag Manager that triggers when the element_id = 100. This works fine, except that when I click exactly on the text, it doesn't do anything, the link looks like a button, with the text in the middle of it. I can't change anything to the html or css, otherwise I can think of multiple things, so I need to find a solution without changing the html. Also, the 'myclass' class and the 'label' class get used in other elements.
<a class="myclass" id="100" href="http://www.url.com">
<span class="label">Text</span>
</a>
Anyone an idea?
Thanks a lot,
The following workaround worked:
Create trigger when element text contains "Text". This will trigger events on the button and the label on the button, of all buttons with "Text" as label.
Create tag for that trigger that checks with simple javascript if either the id of the current element = 100, which will happen when you click the button but not the label, or that the id of the parent = 100, which happens when you click the label. You can get the element that triggered the tag using the built-in variable "Click Element". Which you need to access the parent element.
Technically, you shouldn't have a CSS ID that starts with (or is) a number, so not sure if your code example is accurate or not. Whatever the case, you're probably better off using "matches CSS selector" so that you don't need to use any custom JS.
If indeed your HTML uses id="100", then the above will work. If it's anything else that doesn't start with a number, then you can use
#whatever > span

Replacing a div with a command

i've got a site with a lot of phone models, but the code is originally from another part of the site, where the mobiles are only shown when you click on the box, but for this part of the site, I want the mobiles to be shown at anytime, so how do i make this div
<div class="submit_filter ans_div" style="display: table;"></div>'
into something that just shows without a click?
The site url are www.findaphone.dk/mobiler
And as you see, right now there is a big box at the top of the site you have to click on.
Thanks in advance!!
The JavaScript for this click event is at line 620 of your source code. CTRL+F to find it, it looks like this:
$(document).on('click','.submit_filter',function () {
Right now, the line is waiting for a click event on that large button (.submit_filter) before executing the code. Replace the line above with this, and the code in that function will trigger on document ready (when the page loads):
$(document).ready(function () {

Accepting input in popup before submitting the actual form

I am developing an application using Springs 2.0.
I have a requirement that when user clicks on a submit button on a form, a poup should be displayed showing a "select" box for selecting a predefined reasons and a "Textarea" to accept comment. (These dropdown options are picked from context so can not use static HTML page.)
These 2 values should also be stored in the database along with the other data fields in the parent form.
My problem is: if I use "window.open" then the parent form data does not get carried to child window as it is not "submitted". Also can not submit the form as it will not display popup window.
I tried searching for solution on sites, but could not find solution suitable for me.
Any help would be really appreicated.
Thanks.
Use a div as a popup instead of a new window. Or use JQuery. Example, messi popup under usage
Edit
If you just want something very basic,
<div id="modal" style="border:3px solid black; background-color:#9999ff; padding:25px; font-size:150%; text-align:center; display:none;">
This is a modal popup!<br><br>
<input type="button" value="OK" onClick="Popup.hide('modal')">
</div>
Show Modal Popup
<br>
Show Modal Popup With A Custom Screen
http://www.javascripttoolbox.com
You can use jQuery modal. Here is a similar example which accepts input in a modal http://jqueryui.com/demos/dialog/modal-form.html.
Resolved it using window.showModalDialog and normal java script. Here are the details.
Firstly I defined 2 hidden fields on parent page. When popup window is opened and submitted, the values entered in the dropdown and text area are assigned to those.
var handle = window.showModalDialog(htmlURL,this,urlProp);
when submitted,
document.getElementById("hiddenRejectionComment").value = handle.rejectionComment;
document.getElementById("hiddenRejectionReason").value = handle.rejectionReason;
Simple, wasn't it?

Highlight link with click

I'd like to create a link that when it is clicked it will open up a some sort of dialog with some text a user can copy.
I was going to use jquery ui dialog for this but I'm wondering if there is something else I should consider?
Ideally I'd like to have that text highlighted so it is ready to copy. Don't think I can do this with jquery dialog?
Any guidance would be appreciated.
Try this :
HTML :
<div id="dialog">
<textarea id="textbox">some text to copy and paste</textarea>
</div>​
JavaScript:
$('#dialog').dialog();
$('#textbox').focus().select();​
This opens a dialog and then selects all of the text within the textarea. Because the focus function is used you can Ctrl+C straight off as the text is already in focus and selected.
Working demo : http://jsfiddle.net/eZbXD/
Instead of opening a dialog, you can show a textbox in which the link is selected and ready to copy. I have done something like that before. Look at this fiddle. You can remove unnecessary codes and give some style according to your need.