I am having an interesting issue with dijit widgets and widgets inside widgets. I have a custom widget that I created that houses a dijit.dialog with a form. Here is a sample
<div dojoattachpoint="WorkinProgress">
<div dojoType="dijit.Dialog" id="formDialog" title="Agent Note" >
<table>
<tr>
<td>
<label for="desc">
Description:
</label>
</td>
<td>
<input dojoType="dijit.form.Textarea" style="width:400px" type="text" name="desc" id="desc">
</td>
</tr>
<tr>
<td align="center" colspan="2">
<button dojoType="dijit.form.Button" type="submit" dojoattachevent="onclick: createNote >
SAVE
</button>
<button dojoType="dijit.form.Button" type="button" onClick="dijit.byId('formDialog').hide();">
CLOSE
</button>
</td>
</tr>
</table>
As you can see the dialog is nested inside my WorkInProgress widget. The form in the dialog itself needs to be able to call a function inside the WorkInProgress widget to post the data of the form to a webservice. I have tried using dojoattachevent but have not gotten anywhere. How do I, from the my template file, get access to the parent of the widget the dojo button resides in. Any help would be greatly appreciated. Thanks!
If you're adding the child widget dynamically, try to use dijit._Widget.placeAt function to include the DOM nodes inside. Apparently, just adding the HTML string to the parent widget only adds the root DOM of the child widget (in your case, the second div). After doing that, you should be able to get the parent info from the dojoAttachPoint, etc.
Why not give the buttons, dialog and outermost widget dojoAttachPoint attributes and then in the postCreate function of your custom widget do something like:
dojo.connect(this.createNoteButton, "onclick", this, this._createNoteHandler);
Then create a function on your custom widget called '_createNoteHandler' and do what you need to do there.
The advantages of this approach are that you can use pub/sub rather than dojo.connect for multiple handlers for 1 event, you are in greater control over the interaction, you don't litter your markup with the names of functions that may change (better separation of concerns)...
Related
Using the PrimeNG components I am trying to filter values in a table column using a p-columnFilter component. The Table is inside a modal.
My code is as follows:
<th>
<div class="flex justify-content-center align-items-center">
Sample
<p-columnFilter type="text" field="sample" display="menu">
</p-columnFilter>
</div>
</th>
When I activate the menu, I am unable to enter any text into the input within the PrimeNg-generated menu:
<input type="text" pinputtext="" class="p-inputtext p-component ng-star-inserted">
Although the input is highlighted, no characters can be entered.
It appears that the input is enabled but I am cannot type anything into it.
I found a solution and am going to share it in the hopes of helping someone else who is having the same issue.
The problem was with the modal, not with the input.
The following is the CSS for the modal that fixes the problem:
.modal-dialog{
position:absolute !important;
}
I have a sidebar component located in a view-router view component that renders several child component buttons. It renders the child components using v-for loops.
<div v-for="type in this.facebookLightButtons" :key="type">
<SidebarButton :type="type"/>
</div>
<div v-for="type in this.facebookButtons" :key="type">
<SidebarButton :type="type"/>
</div>
facebookLightButtons is simply an array of strings containing the text of the button (which is also the name of the image source of the button). The result is the following:
The corresponding code in the SidebarButton components are:
<template>
<div>
<router-link :to="'/' + capitalizeFirstLetter(type)" class="sidebar-button">
<table>
<tr>
<td>
<img class="sidebar-button-icon" :src="getImage" />
</td>
<td>
<p>{{capitalizeFirstLetter(type)}}</p>
</td>
</tr>
</table>
</router-link>
</div>
</template>
and
computed: {
getImage() {
return require('#/assets/images/SidebarIcons/' + this.type + '.png');
}
}
When I change to a new view-router view and then return to the home page where this sidebar is located, the images are all missing:
I am trying to figure out how to keep the images there when returning to the home page.
Things I have tried:
Clearing and setting the image source in the SidebarButton components in the created, beforeMount, mounted, activated, deactivated, updated, and unmounted lifecycle hooks (non of which seemed to work).
Clearing the image, waiting for 2000 milliseconds using setTimeout() and then setting the image to the correct image source
Wrapping both the contents of the SidebarButton template as well as the v-for loop in the parent component with a <keep-alive> tag
Hard coding each SidebarButton component instead of using a v-for loop
It seems like something must be missing. What can I do to ensure that these images stored locally on my computer not only show when first displayed, but also appear when the user returns to the homepage after entering a separate view-router view?
I use v-for to render table rows
<table>
<tr v-for="(item, i) in data">
<td>
<button v-if="...">....</button>
<el-tooltipplacement="right">
<button v-if="..." >...</button>
<div slot="content">
<button #click="...">...</button>
<button #click="...">...</button>
</div>
</el-tooltip>
</td>
</tr>
</table>
The tooltip is a component of element ui,
the tooltip will display after hovering the button.
The table data is gotten by ajax call,
and there are several pages,
it will get the data by ajax call while turning page,
the problem occurs after turning page.
Some tooltip will not display after hovering,
I assumed the problem is doms don't re-render,
I used $forceUpdate() after ajax call,
but it had no effect.
If you can please help me out.
element ui Tooltip component and exmaple： https://element.eleme.io/#/en-US/component/tooltip
I tried to continue with the example on the vuejs website. I tried to add images and a transition state when I sort data.
However it doesn't work. I have tried to add the following line to make it works but it doesn't:
<tbody name="table-row" is="transition-group">
Do you have some ideas for me?
https://codepen.io/wooza/pen/wezqXP
https://codepen.io/anon/pen/gRmxwJ
https://v2.vuejs.org/v2/guide/transitions.html#List-Transitions
Unlike <transition>, it renders an actual element: a <span> by
default. You can change the element that’s rendered with the tag
attribute.
<transition-group tag="tbody" name="table-row">
<tr v-for="entry in filteredData" :key="entry.name">
//...
</tr>
</transition-group>
I am using selenium for testing my application.
In my application there are 5 buttons, each have a different image associated with it.
I want to click on button which have a specific image associated.
Currently i am using a while loop to get the node of image and then replacing this node into xpath of button to select it.
is there any way either with xpath or css to do this directly.
Providing more information-this is like submit button is there and then below this image is there. submit button and images are sibling element and need to click submit button when the next element is specific image
<div class="select">
<span class="sysTxtBtn submit xxs">
<span class="btnTagDummy">
</span>
<div class="specialRateMarking">
<img width="79" height="11" alt="Marking2" src="someimages"/>
</div>
<div class="select">
<span class="sysTxtBtn submit xxs">
<span class="btnTagDummy">
</span>
<div class="specialRateMarking">
<img width="79" height="11" alt="Marking1" src="someimages"/>
</div>
Could you include a snippet of your HTML? Below is an example of an image in a form and a few ways of locating it using Selenium, but these may not be relevant depending on your implementation:
<input id="submitForm" name="imgbtn" type="image" src="images/submit.png" />
id=submitForm
name=imgbtn
//input[#src='images/submit.png']
//input[contains(#src, 'submit.png')]
css=input[src='images/submit.png']
UPDATE:
Given the HTML:
<div class="select">
<span class="submit">
<div class="marking1"></div>
<div class="select">
<span class="submit">
<div class="marking2"></div>
You can locate the 'submit' span parent of the 'marking2' div using the following XPaths:
//div[#class='marking2']/..
//div[#class='marking2']/parent::*
//div[#class='marking2']/parent::span
UPDATE 2:
Based on the HTML now included in the question, you can locate the span with the class of submit related to the image many ways, a few examples follow:
//div[//img[#alt='Marking2']/span[contains(#class, 'select')]
//img[#alt='Marking2']/../../span
//div[img[#alt='Marking2']]/preceding-sibling::span
I hope this gives you some ideas. I'd certainly recommend XPath over CSS for locating these elements as it's much better at these sorts of relationships.