How can I clear a write("message") - message

Basically, I have a button that write("message"+myVar).
Then I want to press a button that will delete the written message, but not mess with the variable at all.
I am very new to coding. I code on Code.org which is powered by javascript.
Much thanks

Welcome to SO. Always try to share your code so anyone can help you better. As much as I understand there are lots of ways to achieve this. The most straightforward one could be to create a textLabel with an empty string and then modify it with the setText property of code.org. Like so;
var myVar = "something";
textLabel("messageId","");
button("createButton", "create");
onEvent("createButton", "click", function( ) {
setText("messageId", "message" + myVar);
});
button("deleteButton", "delete");
onEvent("deleteButton", "click", function( ) {
setText("messageId",myVar);
});

Related

Protractor:Waiting for an element that is present but not displayed

I've written a test to check if a element is visible on screen, in my case an angular-ui-bootstrap collapsible panel, aka, the "warning". The code works, but the tests used to fail ~75% of the time.
There is a collapse animation on the display of the "warning", and I can't shutwod the animation for the tests, since it's a jquery animation. The warning is always 'present' in the DOM, just collapsed when there is no reason to show it.
At first, I've tested with this code, which is pretty easy:
expect(element('.warning').isDisplayed()).toEqual(true);
The problem came when I needed to test that the element is not displayed, e.g. : once the warning is displayed, some action cause it to collapse.
That test:
expect(element('.warning').isDisplayed()).toEqual(false);
will pass only if the animation started. It will fail when the condition is checked while the element is still displayed.
I've came up with two solutions.
The easy one using a ptor.driver.sleep(2000). Is slows my tests and is not acceptable.
The hard, ugly one, but that gives me good results:
exports.isWarningDisplayed = function (expectedVisibility) {
return ptor.driver.wait(function () {
if (expectedVisibility) {
return element(by.css('.warning')).isDisplayed().then(function(visibility) {
return visibility === expectedVisibility;
});
} else {
return element.all(by.css('.warning .collapse.in')).then(function(items) {
return items.length === 0;
});
}
}, 2000).then(function() {
return element.all(by.css('.warning .collapse.in'));
}).then(function (items) {
return items.length > 0;
});
};
My problem is that it just feels awfully wrong. Have you found a better way to handle that situation? My expectation would be to have something like:
expect(element('.warning').not.isDisplayed()).toEqual(true);
...but there is no .not in protractor or webDriver AFAIK.
I had a similar issue - wanting to test for when an element is no longer disabled. I struggled trying to work around things without the .not test and then realized that I could just move the 'not' test into the css selector:
// we're looking for when the element doesn't have a .disabled class
var availableElement = by.css('.some-class:not(.disabled)');
browser.wait(function() {
return ptor.isElementPresent(availableElement);
}, 30000);
expect(ptor.isElementPresent(availableElement)).toBeTruthy();
Not sure if it helps but I had a moment of clarity so thought I would share.
Using the elementexplorer (https://github.com/angular/protractor/blob/master/docs/debugging.md) I looked at the protractor object and found an answer that is working wonderfully for me:
var el = element(by.id('visibleElementId'));
browser.driver.wait(protractor.until.elementIsNotVisible(el));
expect(ptor.isElementPresent(by.css('.warning'))).toBe(false);
This is another way of checking if something is displayed on the page or not
From my experience, this is a common "sad" issue. You know your code is written properly, but test is failed due to waits. For instance, in Chrome I get the next error in console :
< unknown error: Element is not clickable at point (952, 275). >
So, I created separate function in my WebDriver class and seems it works:
this.waitElementToBeShown = function (elmLocator) {
browser.sleep(500);
browser.wait(function () {
return (elmLocator).isPresent();
}, 3000);
browser.wait(function () {
return (elmLocator).isDisplayed();
}, 3000);
}

CSS :hover iOS - on/off

I have searched the web for the past hour for a solution. I want to achieve the following hover-behavior on iOS.
1st tap -> hover on
2nd tap -> hover off
This will mainly be used to present images.
Because of the CSS tag I assume you want to do this in HTML.
This is almost impossible to do without javascript. You could add a click event handler that toggles the .hover class. For example (untested code, don't copy-paste ;)
element.addEventListener('click', function(evt) {
if (this.className == 'hover') {
this.className = 'hover';
} else {
this.className = '';
}
});
If you have other classes on the document it's probably easier to use a JS framework, e.g. jQuery (again untested):
jQuery(element).click(function(evt) {
jQuery(this).toggleClass('hover');
});

Disable button in MT.Dialog and change image

Can anyone help, i want to change my image(button), when i press my buttonImage i open MT.Dialog and then i login, and when i login i want the button to change how do i do that, i have found the code, but it doesn't work in MT.Dialog
Here is how i do it.
cmdLogin.TouchUpInside += delegate {
cmdLogin.SetImage(UIImage.FromFile("Images/Logout.png"), UIControlState.Normal);
};
and for the hidden thing i tried(But doesn't work)
if(cmdLogin.Hidden == True)
{
cmdLogout.Enabled;
}else{
cmdLogout.Hidden;
}
but that doesn't work in MT.Dialog ofcourse because i don't do anything with my string element(My string element got the name login and if someone got a link to a good login system w/ database that would be very helpful.
and ofcourse here is my MT.Dialog code
cmdLogin.TouchUpInside += delegate {
_window.RootViewController = new DialogViewController(new RootElement("Login") {
new Section ("B.V. Electronic"){
(password = new EntryElement ("Password", "", "", true))
},
new Section () {
(login = new StringElement ("Login", delegate {
if(password.Matches("1234")){
GoBackToView();
}else{
new UIAlertView("Wrong code", "It's the wrong code", null, "Ok", null).Show();
}
}))
},
new Section (){
new StringElement ("Cancel", delegate {
GoBackToView();
})
}
});
};
I am not real clear on exactly what you want to do. However, one suggestion I have for you is to look at this:
https://github.com/xamarin/prebuilt-apps/tree/master/FieldService
This is a sample application that was built by Xamarin that has a nice login screen that you could try and get some ideas from. It does not use Monotouch.Dialog for the login screen, so if you want that you can look at this:
http://docs.xamarin.com/recipes/ios/content_controls/tables/create_a_login_window_using_monotouch.dialog
Your code is similar to that, but it looks like you modified it a little.
If you want to change your Login StringElement, you need to modify it, then call Root.Reload(login, UITableViewRowAnimation.Automatic); afterwards. I don't think there is a simple way to just change the background image of a StringElement. You will need to make your own subclass of StringElement and customize the GetCell() routine to. You can refer to this SO question for more ideas on that:
How can I create a custom styled EntryElement with MonoTouch.dialog?
I hope that helps.

Get the referred link id on pagebeforeshow

In jqm I have something like this
<li>cats</li>
<li>dogs</li>
Page1 is a dynamic page and should load it's contents based on which link button I pressed and I use
$(document).on('pagebeforeshow', '#page1', function(event, data){
do something here with either cats or dogs
});
Now how do I determine here what link what used?
I could use sessionStorage or perhaps a
$('.loadPage').click(function(){
$(this).attr('id').blablabla
})
but it doesn't seem right to me. I'm sure the answer is there right in front of me, but I can't seem to get around it.
Any ideas?
You could store the id in #page1's data attribute on click of loadPage:
$(document).on("pageinit", "#page0", function () {
$(this).on("click", ".loadPage", function (e) {
e.preventDefault();
$("#page1").data("id", this.id);
});
});
Then, after jQM redirects you to #page1, check for the stored data :
$(document).on("pagebeforeshow", "#page1", function () {
alert($(this).data("id"));
// you can do anything with this id
});
Demo : http://jsfiddle.net/hungerpain/wN2L9/
compare the id:
if(this.id==='cats')
{
//do something here
}
On a side note you can use $(this).attr('id') also, but its better you use pure JavaScript whenever possible.

Jquery autocompelete - key press

We want to implement autocompelete using Jquery.
We need to enable the user to add text and to save the new text.
something like on key press event.
In Addition I want enable to user to add text into the input text.
$('#id').autocomplete({
source: url,
select: function (event, ui) {
// code..
}
});
We have tried to do this using change event , but this is not good enough since according to the API the change event is fire only after onBlur is fire (when the user live the input text).
Can someone help how to solve this problem?
Thanks,
John & Yuri.
$('#id').autocomplete({
source:function(request, response)
{
var text = $("#idofthetext").val()
alert(text);
}
select: function (event, ui) {
// code..
}
});
do you want to do something like this? var text will give you the text when user type in the input field with id "idofthetext".

Resources