Here's the flow of my problem:
I have one modal dialog, when I open a new dialog, it would open contentOne.jsp inside the modal dialog. When I click on a link on contentOne.jsp, the modal dialog refreshes and open contentTwo.jsp with my href reference. Then I close the dialog. When I open the dialog again, it would open contentTwo.jsp not contentOne.jsp. I tried destroyDescendants, destroyRendering.... but they didn't work.
I have a header that has a link to open a modal dialog like the following:
<div style="position: relative;right: 50px; top: 15px;">
<a onclick="dijit.byId('selectEquipmentInfo').show(); return false;" href="" />Add Equipment</a>
</div>
<%-- start equipment info dialog link --%>
<div id="selectEquipmentInfo" style="display:none;" name="selectEquipmentInfo" dojotype="dijit.Dialog" draggable="false" title="Select Equipment">
<div style="width:870px; height:400px; padding: 10px; overflow-y:auto;" href="">
<%# include file="../../StoreInfoArea/ProductFamilyDisplay.jspf"%>
</div>
</div>
This should open a modal dialog. Inside my ProductFamilyDisplay.jspf, I have an item linked to another jsp page on 'href' like the following
<div id="productFamily" class="productFamilyContainer">
<div id= "prdctFamilyRow" class="productFamilyColumn">
<c:forEach var="equipmentInfo" items="${equipmentTestList}" varStatus="status">
<c:out value="${equipmentInfo.value}" /><br />
</c:forEach>
</div>
This will render on the same modal dialog, and it's being controlled by this javascript:
<script type="text/javascript">
dojo.addOnLoad (function(event){
dojo.connect(dijit.byId('selectEquipmentInfo'), 'onClick', clicked);
});
var clicked=function(event) {
var dialog=dijit.byId('selectEquipmentInfo');
var contentNode=dialog.domNode;
var node = event.target;
var attrId = dojo.attr(node, "id");
if (attrId =="dijitCloseLink" || attrId == "dijitCloseImg") {
dialog.set('href','');
} else {
if("a" == node.nodeName.toLowerCase()){
dialog.href=node.href;
dialog.refresh();
dojo.stopEvent(event);
}
}
};
</script>
I am not able to locate code to destroy the Dialog. Try given below code. Put this code in the div where you are creating the dialog.
dojo.connect(selectEquipmentInfo, "hide", function(e){
dijit.byId("selectEquipmentInfo").destroy();
});
Related
I have a list of "workbooks" displayed in a table. Each workbook has a "Share" button next to the workbook's title. When the user clicks on the share button a modal dialog is shown containing a form.
The form allows the user to enter a list of the recipient's emails separated by a comma which is validated on the client-side.
As the dialog is located in a partial view _ShareView.cshtml that allows me to pass a modal WorkbookShareModel that has some fields like WorkbookId and Title. The goal here is to pass the details of each workbook when the user presses the share button (i.e. construct a modal and pass it to the already rendered model).
I am not sure how to pass a model to an already rendered view?
The solution have to be done on the client (i.e. dont involve actions on the server that return the partial view provided the parameters are passed). I want to avoid unnesessary calls to the server - we have all the data on the client regarding a workbook and I need to do a POST when the user types in list of emails.
This is my index.cshtml:
#section BodyFill
{
<div id="shareFormContainer">
#{ await Html.RenderPartialAsync("_ShareView", new WorkbookShareModel());}
</div>
<div class="landing-container">
<div class="workbook-container">
<table class="table">
<tbody>
#foreach (var workbook in Model.Workbooks)
{
string trClassName, linkText;
if (workbook.Metadata.SharedBy == null)
{
trClassName = "saved-workbooks";
linkText = workbook.Name;
} else {
trClassName = "shared-with-me";
linkText = string.Format(
BaseLanguage.SharedWithMeWorkbook,
workbook.Name,
workbook.Metadata.SharedBy,
workbook.Metadata.SharedDate.ToShortDateString()
);
}
<tr class="#trClassName">
<td>#Html.ActionLink(linkText, "Open", "OpenAnalytics", new { id = Model.Id, workbook = workbook.Name })</td>
<td class="last-modified-date" title="Last Modified Date">#workbook.ModifiedDate.ToShortDateString()</td>
<td class="share">
<button title="Share" class="share-button" onclick='showSharingView("#workbook.Name", "#workbook.Id", "#Model.Id")'> </button>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
}
#section Scripts
{
<!--Load JQuery 'unobtrusive' validation -->
#await Html.PartialAsync("_ValidationScriptsPartial")
<script type="text/javascript">
// hide the modal as soon as the page loads
$('#shareFormModal').modal("hide");
function showSharingView(title, workbookId, id) {
$('#shareFormModal').modal("show");
// how to pass a WorkbookShareModel to my partial view from here?
}
function hideDialog() {
var form = $("#partialform");
// only hide the dialog if the form is valid
if (form.valid()) {
activateShareButtons();
$('#shareFormModal').modal("hide");
}
}
// Helper method that validates list of emails
function IsEmailValid(emailList, element, parameters) {
var SPLIT_REGEXP = /[,;\s]\s*/;
var EMAIL_REGEXP =
/^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+##[a-z0-9](?:[a-z0-9-]*[a-z0-9])?(?:\.[a-z0-9](?:[a-z0-9-]*[a-z0-9])?)+$/i;
var emails = emailList.split(SPLIT_REGEXP);
for (var i = emails.length; i--;) {
if (!EMAIL_REGEXP.test(emails[i].trim())) {
return false;
}
}
return true;
}
</script>
}
That is my dialog:
#using DNAAnalysisCore.Resources
#model DNAAnalysisCore.Models.WorkbookShareModel
#* Partial view that contains the 'Share Workbook dialog' modal *#
<!-- Modal -->
<div onclick="activateShareButtons()" class="modal fade" id="shareFormModal" role="dialog">
<div class="modal-dialog modal-md">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Share Workbook - #Model.Title</h4>
</div>
#using (Html.BeginForm("ShareWorkbook", "Home", FormMethod.Post, new { #id = "partialform" }))
{
<div class="modal-body">
<label>#BaseLanguage.Share_workbook_Instruction_text</label>
<div class="form-group">
<textarea class="form-control" asp-for="Emails" rows="4" cols="50" placeholder="#BaseLanguage.ShareDialogPlaceholder"></textarea>
<span asp-validation-for="Emails" class="text-danger"></span>
</div>
<input asp-for="Title" />
<input asp-for="Id" />
<input asp-for="WorkbookId"/>
</div>
<div class="modal-footer">
<button onclick="hideDialog()" type="submit" class="btn btn-primary">Share</button>
<button onclick="activateShareButtons()" id="btnCancelDialog" type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
}
</div>
</div>
</div>
There are two solutions to solve your problem :
Option 1 :
Since you have got the parameters(title, workbookId, id) , you can call server side function using AJAX to render the partial view , then replace the DIV contained in the partial view with the updated contents in the callback function of AJAX .
You can click here for code sample .
Option 2 :
Directly update related input/area using Jquery . For example , the input tag helper :
<input asp-for="<Expression Name>">
generates the id and name HTML attributes for the expression name specified in the asp-for attribute. So you can set the value using Jquery like :
$("#Title").val("Title")
Please click here for Tag Helpers in forms in ASP.NET Core
With Option 2 , you need to clear the Emails area firstly after user click the share button ; With Option 1 , you don't need to care that since the HTML will replace entirely .
Help me please with this question.
Did not see the context menu after executing this code.
file: Grid.js
export default class Grid{
btnAddClick(){
browser.wait(async()=>{
await browser.executeScript('document.querySelector(".Grid--Head--leftButton-plus").click();');
return EC.presenceOf(element(by.css('.item-invoice_form_add_simple_position a')))
&& EC.presenceOf(element(by.css('.contextmenus')));
},
browser.params.timeWaitSelEl,
'Element "menu point Add position" too long in the DOM.');
}
}
test file: test.js
it('test', ()=>{
let grid = new Grid();
grid.btnAddClick();
expect(element(by.css('.contextmenus')).isDisplayed())
.toBeTruthy('contextmenu');
expect(element(by.css('.contextmenus')).isPresent())
.toBeTruthy('cont');
});
html templates:
HTML
<div class="contextmenus"><ul style="z-index: 1000000;">
<li class=" tab-elem item-invoice_form_add_rate_expense_type"><a cid="c855">Добавить</a></li>
<li class=" tab-elem item-invoice_form_add_simple_position"><a cid="c857">Добавить позицию</a></li>
</ul></div>
HTML
<div class="Grid--Head--leftButton theme-color--before Grid--Head--leftButton-plus" style="width: 23px;">
<div class="Grid--Head--leftButton--helper theme-color"></div>
<div class="Grid--Head--leftButton--helper theme-color"></div>
<div class="Grid--Head--leftButton--helper theme-color"></div>
</div>
I have got some hidden buttons on the page. When I click on text input, one of these buttons shows on the page. Before:
<div field='login'>
<input type="text">
<button class="submit" style="display: none">Save</button>
</div>
<div field='name'>
<input type="text">
<button class="submit" style="display: none">Save</button>
</div>
After click on second input:
<div field='login'>
<input type="text">
<button class="submit" style="display: none">Save</button>
</div>
<div field='name'>
<input type="text">
<button class="submit">Save</button>
</div>
So I try to interact with second button by next selectors in my test:
static content = {
submitButton { $("button.submit") }
}
but I have next error:
isorg.openqa.selenium.ElementNotVisibleException: Element is not currently visible and so may not be interacted with
If I write:
static content = {
submitButton { $("button.submit", 1) }
}
it works, but I need to work with one first visible button on the page. What is wrong?
Unfortunately there is no css selector to find visible elements but you can use displayed property of Navigator and its findAll() method to find the button that is visible:
static content = {
submitButton { $("button.submit").findAll { it.displayed } }
}
I have a the following static div:
<body>
<div id="parent">
</div>
</body>
<script>
dom.byId('parent').innerHTML +="<input type='submit' data-dojo-type='dijit/form/Button' onClick='test(this)' id='edit"+1+"' label='Edit' />";
dom.byId('parent').innerHTML +="<input type='submit' data-dojo-type='dijit/form/Button' onClick='test(this)' id='edit"+2+"' label='Edit' />";
</script>
TWo button's are created but they looks like normal HTML not DOJO.
The shortest possible answer is dojo/parser::parse(domNode):
var parent1 = dom.byId("parent1");
parent1.innerHTML += '<input type="submit" data-dojo-type="dijit/form/Button" onClick="test(this)" id="edit1" label="Edit 1">';
parent1.innerHTML += '<input type="submit" data-dojo-type="dijit/form/Button" onClick="test(this)" id="edit2" label="Edit 2">';
parser.parse(parent1);
Even though I cannot recommend that. Do not use innerHTML, it belongs to the world of IE6. Create dijits programmatically instead:
var parent2 = dom.byId("parent2");
var button3 = new Button({ label: "Button 3" });
button3.startup();
button3.placeAt(parent2);
button3.on("click", test);
var button4 = new Button({ label:"Button 4"});
button4.startup();
button4.placeAt(parent2);
button4.on("click", function(event) {
test(this); // `this` points to the button
});
See it in action: http://jsfiddle.net/phusick/9JCAj/
I have a dojo menu bar with five menu bar items.
on page load, one of the menu bar item will be in disable mode.
on clicking "Add" menu bar item, the disabled menu bar item("Save") has to come enable.
am getting it enabled using the below script. but the issue is, its not coming in the same line.
its getting enabled in next line. how to fix this.
here is my dojo menu bar:
<div class="claro" id="menuDiv151" onclick="setWidgetproperty(this.id,'x','navMenu151');" onmousedown="setMenuBarProperty('navMenu151');" onmouseup="setDocStyle(this.id)" style="border:1px dotted white; left: auto; position: absolute; width:450px; top: 620px;">
<div dojotype="dijit.MenuBar" id="navMenu151" style="font-size:11pt;" title="MenuBar">
<div dojotype="dijit.MenuBarItem" id="SelectMenu151" onclick="getEventLogUserSelect();setMenuId(this.id);" style="font-size:11pt;" title="menuBarItem">
<img class="images" id="SelectMenu151" name="Select5.png" onclick="setImgProperty(this.id)" src="images/uploads/select.png" style="height:20px; width:20px;">
Select
</div>
<div dojotype="dijit.MenuBarItem" id="AddMenu151" onclick="getUserAdd();setMenuId(this.id);" style="font-size:11pt;" title="menuBarItem">
<img class="images" id="AddMenu151" name="Add6.png" onclick="setImgProperty(this.id)" src="images/uploads/add.png" style="height:20px; width:20px;">
Add
</div>
<div dojotype="dijit.MenuBarItem" id="CopyMenu151" onclick="setMenuId(this.id);" style="font-size:11pt;" title="menuBarItem">
<img class="images" id="CopyMenu151" name="Copy7.png" onclick="setImgProperty(this.id)" src="images/uploads/Terminate.png" style="height:20px; width:20px;">
Copy
</div>
<div dojotype="dijit.MenuBarItem" id="DeleteMenu21" onclick="setMenuId(this.id);" style="font-size:11pt;" title="menuBarItem">
<img class="images" id="DeleteMenu21" name="Delete8.jpg" onclick="setImgProperty(this.id)" src="images/uploads/cancel.png" style="height:20px; width:20px;">
Delete
</div>
<div dojotype="dijit.MenuBarItem" id="SaveMenu21" onclick="setMenuId(this.id);" style="font-size:11pt;" title="menuBarItem">
<img class="images" id="SaveMenu21" name="Save9.jpg" onclick="setImgProperty(this.id)" src="images/uploads/save.png" style="height:20px; width:20px;">
Save
</div>
</div>
</div>
and the script to enable and disable the item:
window.onload = function() {
document.getElementById("SaveMenu21").style.display='none';
};
function getUserAdd(){
document.getElementById("SaveMenu21").style.display='block';
}
Here is an example showing how to hide a menubar item and how to disable a menubar item
http://jsfiddle.net/cswing/62Jcp/
require(["dojo/ready", "dijit/registry", "dojo/dom-style"],
function(ready, registry, domStyle) {
ready(200, function(){
var menuItem = registry.byId("saveItemDisabled");
menuItem.set('disabled', true);
menuItem = registry.byId("saveItemHidden");
domStyle.set(menuItem.domNode, 'display', 'none');
});
});
Try This
dijit.byId("myElement").attr("disabled", false);