I have a mobiscroll list. I added an extra button called "Add new" I want to click that button and add a new item to the mobiscroll list.
Is that possible? I've been digging through that api to no avail. I can catch the event with a custom handler and I have the mobiscroll instance available there but no way to add to it.
If so, can I add that new item as custom html? I'm thinking an input so that the user can change that newly added item.
Thanks
The "pretty" way:
/*Create the new item*/
var newOption = document.createElement("option");
newOption.value = "My Value"
newOption.innerHTML = "My Text"
/*Append the new item*/
HTMLSelectControlID.appendChild(newOption)
/*Recreate the list*/
$("#HTMLSelectControlID").scroller('destroy').scroller($.extend(scrollerConfig["select"], { }));
The "dirty" way:
/*Inject the new item*/
HTMLSelectControlID.innerHTML += "<option value='My Value'>My Text</option>"
/*Recreate the list*/
$("#HTMLSelectControlID").scroller('destroy').scroller($.extend(scrollerConfig["select"], { }));
Related
In Xamarin.Forms we want to add a new button using
f001content = new Xamarin.Forms.AbsoluteLayout;
f001content.Children.Add(new Button
{
Text = "Button",
AutomationId = "MyButton",
}, new Rectangle(0,0,100,40));
How can we find the reference to the button just added so that we can modify it in the future?
Create a reference to it
f001content = new Xamarin.Forms.AbsoluteLayout;
var btn = new Button
{
Text = "Button",
AutomationId = "MyButton",
}, new Rectangle(0,0,100,40));
f001content.Children.Add(btn);
If you need to reference it outside the scope it’s created in, you’ll need to declare it at the class level
If you're doing in the code behind, you need to create a variable to hold it.
var coolButton = new Button { Text = "Button", AutomationId = "MyButton" };
f001content.Children.Add(coolButton, new Rectangle(0,0,100,40));
Now when you need to reference it, you can. Note that you'll most likely want coolButton to be class wide or something. If you declare it in a method, you'll lose the reference when you exit the method.
I'm trying to create a coded UI test (with VS2010 Ultimate) for a simple web form page with two checkboxes and a submit hyperlink. The checkboxes have the same text label; "I Agree".
Using the coded UI test builder to record actions, only one checkbox is captured because both checkboxes have the same text / same UIMap Name.
Using the crosshair tool to select the second checkbox, it replaces the previous checkbox instance because they have the same text / same UIMap Name.
When the test is run, the first checkbox is checked, the second is not, and the hyperlink is clicked to submitted the form (failing validation).
How can I add the second checkbox to the test map and differentiate between the two?
If there are no unique properties on the checkboxes themselves, specify the parent object of each checkbox to differentiate them.
Example:
For
<div id="box1Parent">
<input label="I Agree"/>
</div>
<div id=box2Parent">
<input label="I Agree"/>
</div>
You would define the object like this:
public HtmlCheckBox AgreementBox1()
{
HtmlDiv parent = new HtmlDiv(browser);
parent.SearchProperties["id"] = "box1Parent";
HtmlCheckBox target = new HtmlCheckBox(parent);
target.SearchProperties["label"] = "I Agree";
return target;
}
Then, do the same for the second box, but point the parent to box2Parent. This would be your code in the non-designer section of the .uitest class.
There are multiple ways to do this.
Try to find out unique property of object like id, name.
Try to find out parent control/container of checkbox, then use {TAB} or {UP}/{DOWN} keys.
Use {TAB} key of keyboard. find out previous control -> click on that control -> use {TAB} from that control to get focus on checkbox control and use {UP}/{DOWN} arrow key to navigate.
Find out text of document and click on first or second occurrence of that as per your need.
Code to find out document Text,
public string GetCurrentPageVisibleTexts()
{
var window = this.UIMap.<WindowObject>
UITestControlCollection c = window.GetChildren();
var pgContent = (string)c[0].GetProperty("OuterHtml");
var document = new HtmlAgilityPack.HtmlDocument();
document.LoadHtml(pgContent);
// We don't want these in our result
var exclusionText = new string[] { "<!--", "<![CDATA", "function()", "</form>" };
var visibleTexts = new List<string>();
//var nodes = document.DocumentNode.Descendants().Where(d => !d.Name.ToLower().Equals("span"));
foreach (var elem in document.DocumentNode.Descendants())
{
// Foreach element iterate its path back till root
// and look for "display: none" attribute in each one of its parent node
// to verify whether that element or any of its parent are marked as hidden
var tempElem = elem;
while (tempElem.ParentNode != null)
{
if (tempElem.Attributes["style"] != null)
{
// if hidden attribute found then break.
if (tempElem.Attributes["style"].Value.ToLower().Contains("display: none")) break;
}
tempElem = tempElem.ParentNode;
}
// If iteration reached to head and element is found clean of hidden property then proceed with text extraction.
if (tempElem.ParentNode == null)
{
if (!exclusionText.Any(e => elem.InnerText.Contains(e))
&& (!elem.InnerText.Trim().IsNullOrEmpty())
&& (!elem.HasChildNodes))
{
visibleTexts.Add(elem.InnerText);
}
}
} // Foreach close
var completeText = string.Join(" ", visibleTexts).Replace(" ", " ");
return Regex.Replace(completeText, #"\s+", " ");
}
So I'm using a PHP API to interact with, to build a forum using MooTools. I can get comments from my database and add comments, but I want to inject an edit button to coincide with each comment.
I inject the comments using:
function domReady() {
$('newComment').addEvent('submit', addComment);
}
function addComment(e){
e.stop();
var req = new Request({
url:'control.php?action=insertPost',
onSuccess:addajaxSuccess
}).post(this);
}
function addajaxSuccess(idNo) {
new Element('span',{
'text':'Post successful.'
}).inject($(newComment));
$('commentList').empty();
domReady();
}
I want to attach an edit button to each comment injected, and add an event listener on the button to change the comment into a textarea for editting, with an update button.
Any ideas?
If you want to bind a global events to a dynamic content you have better look into Element Delegation In mootools.
Basically it's give you the ability to bind event to some container and "listen" to events of that children container base on selectors. I made you a little example here:
http://jsfiddle.net/xwpmv/
mainContainer.addEvents({
'click:relay(.mt-btn)': function (event, target) {
var btn = target;
if(btn.get('value') == 'Edit'){
btn.set('value','Done Editing');
var content = btn.getPrevious();
content.setStyle('display','none');
var textarea = new Element('textarea').set('text',content.get('text'));
textarea.inject(btn,'before');
}
else{
btn.set('value','Edit');
var textarea = btn.getPrevious();
var new_value = textarea.get('value');
textarea.destroy();
var content = btn.getPrevious();
content.set('text',new_value);
content.setStyle('display','block');
}
}
});
Here you can see the mainContainer listen to the click event of every element who has mt-btn class (the buttons)
You have several errors in your code but maybe it is just an example so I didn't relate to it.
How can one make dijit.Dialog to fade in a given time period? Is there any way define it?
I have created above dialog in a method. But I need to call the method frequently. So it will create multiple dialogs. So how to block(not to appear) other dialogs until visible dialog get faded?
<script>
// Require the Dialog class
dojo.require("dijit.Dialog");
// Create counter
var counter = 1;
// Create a new Dialog
function createDialog(first) {
// Create a new dialog
var dialog = new dijit.Dialog({
// Dialog title
title: "New Dialog " + counter,
// Create Dialog content
content: (!first ? "I am a dialog on top of other dialogs" : "I am the bottom dialog") + "<br /><br /><button onclick='createDialog();'>Create another dialog.</button>"
});
dialog.show();
counter++;
} </script> <button onclick="createDialog(true);">Create New Dialog</button>
trying to have an item in a DropDownList selected by default from within my viewmodel.
I am creating the select list in my view model using teh following overload..
public SelectList ProgramsSelectList()
{
var ddlist = new SelectList(DiversionPrograms, "DiversionProgramID", "CrimeName", new {value = "1"});
return ddlist;
}
value = 1 is just hard coded for now. I am not sure the Html.DropDownList() respects this selected item.
Razor View:
#Html.DropDownList("programSelect", Model.ProgramsSelectList(), "Choose a Program to Manage")
I must be missing something here...
Figured it out...
var ddlist = new SelectList(DiversionPrograms, "DiversionProgramID", "CrimeName", DiversionProgram.DiversionProgramID);