Jquery class selector is not working - jquery-ui

I have following html tags.
<span class="ui-btn-text">ALFL</span>
<span class="ui-btn-text">AL</span>
I want to replace ALFL with
<span class="ui-btn-text">A</span>
through jquery.
I have used
$("span .ui-btn-text").replaceWith("<span class="ui-btn-text">A</span>");
But it is not working. Please give me some answers.
Thanks in advance.

Your selector matches an element that has the class ui-btn-text with a parent that is a span. You just need to remove the space.
I also noticed that your replaceWith replaces the element with a duplicate of itself with some content. There's no need to replace the element, just set the text:
$("span.ui-btn-text").text("A");

What's about
$("span.ui-btn-text").replaceWith("<span class='ui-btn-text'>A</span>");
or
$("span.ui-btn-text").text("A");

If you just want to change the ALFL Text , you can do something like this :
var $span= $('span.ui-btn-text');
$span.each(function(){
if ($(this).text() =='ALFL') {
$(this).text('A');
}
});
Js fiddle Demo : http://jsfiddle.net/95CyN/
If you want to change text/html of all span with class ui-btn-text, do this:
// change the text inside the element
$('span.ui-btn-text').text('A');
OR
// change the html content inside the element
$('span.ui-btn-text').html('A');
OR
// Replace the html element
$('span.ui-btn-text').replaceWith('<span class="ui-btn-text">A</span>');

Your selector is looking for an element with the class of .ui-btn-next inside a span element, because you includied a superfluous space character:
$("span.ui-btn-text").replaceWith("<span class="ui-btn-text">A</span>");
Should be what you want. Also, if you only need to change the content of the element (i.e. to "A"), use text() or html():
$("span.ui-btn-text").text('A');

$("span.ui-btn-text").replaceWith('<span class="ui-btn-text">A</span>');
The replacement string you wrote is going to make the Javascript engine crash.

Try this code friend:-
$("span.ui-btn-text").each(function () {
if ($(this).html() == "ALFL") {
$(this).html("A");
}
});
});

Related

Add last element to an array from for loop

I have a code like so...
for element in self.arr_Offline {
self.arr_OfflineTemp.add(element)
break
}
self.arr_Offline.removeObject(at: 0)
Here I'm looping through an array called self.arr_Offline, adding the first element from that array into another array called self.arr_OfflineTemp and immediately doing break so that the second array will have just one element and then once I'm outside the for-loop, I remove the added object from the main array by doing self.arr_Offline.removeObject(at: 0)
But I want to add the last element to self.arr_OfflineTemp instead of the first and then remove that last element from self.arr_Offline. It should look something like so...
for element in self.arr_Offline { // looping through array
self.arr_OfflineTemp.add(lastElementOf'self.arr_Offline') //add last element
break
}
self.arr_Offline.removeObject(at: 'last') //remove that last element that was added to `arr_OfflineTemp`
How can I achieve this..?
First of all never use NS(Mutable)Array and NS(Mutable)Dictionary in Swift.
Native Swift Array has a convenient way to do that without a loop
First element:
if !arr_Offline.isEmpty { // the check is necessary to avoid a crash
let removedElement = self.arr_Offline.removeFirst()
self.arr_OfflineTemp.append(removedElement)
}
Last element:
if !arr_Offline.isEmpty {
let removedElement = self.arr_Offline.removeLast()
self.arr_OfflineTemp.append(removedElement)
}
And please drop the unswifty snake_case names in favor of camelCase
Did you try the same approach with reversed() Swift:
for i in arr.reversed():
// your code logic
After adding element, you can remove the last element from the list using this:
lst.popLast() or lst.removeLast()
Try this for the above code:
for element in self.arr_Offline.reversed() {
self.arr_OfflineTemp.add(element)
break
}
self.arr_Offline.popLast()
Is this something you are looking for?

what to do when two elements have same resource id in appium?

what to do when the resource-id of two elements in list view in UIAutomator of appium is same??
here in the images below:-
both the elements have same resource id:-net.one97.paytm:id/smart_list_root
Get the text using xpath:
String text = driver.findElement(By.xpath("//android.widget.RelativeLayout")).getText();
Compare the text and select the correct UIElement to perform desired action.
if(text.equals("Mobile Prepaid")){
......
}
Take it with multiple elements for xpath for textview as
"//android.widget.TextView[#text='Mobile Prepaid']"
Hope it will work
In this case, you can use xpath or name like below:
Way 1:
driver.findElement(By.xpath("//android.widget.TextView[#text='Mobile Prepaid']"));
driver.findElement(By.xpath("//android.widget.TextView[#text='Mobile Postpaid']"));
Way 2:
driver.findElement(By.name("Mobile Prepaid"));
driver.findElement(By.name("Mobile Postpaid"));
You can use By.name like,
driver.findElement(By.name("Mobile Prepaid"));
driver.findElement(By.name("Mobile Postpaid"));
String ac = driver.findElement(By.xpath("(//*[#resource-id = 'account-balance-amount'])[1]")).getText();
String ac = driver.findElement(By.xpath("(//*[#resource-id = 'account-balance-amount'])[2]")).getText();

How to replace DomRepeatModel.item?

I have the following code snippet that listen on button click event for item on a list created by dom-repeat (Polymer 1.0.0-rc.17). According to polymer.dart change.log, DomRepeatModel.item is now deprecated, although it will properly use the as attribute for now. The [] operator has been added in its place. Anyone knows how to apply it to the code to get the same result?
#reflectable
handlePurchase(event, [_]) {
print('Purchase item');
var model = new DomRepeatModel.fromEvent(event);
ShopItem item = model.item;
print(item.name);
print(item.price);
}
Found the answer, it is simply model['item'].

Assigning a function to published attribute [duplicate]

This question already has an answer here:
how to implement a main function in polymer apps
(1 answer)
Closed 7 years ago.
I have a custom polymer element that is a form and goes something like this.
Dart script:
#CustomTag('my-form')
class MyForm extends PolymerElement {
#published Function submitFunction;
validateAndSubmit() {
// validate
submitFunction();
}
}
HTML:
<polymer-element name="my-form">
<template>
<button id="submitButton" on-click="{{ validateAndSubmit }}">Submit</button>
</template>
</polymer-element
When the submit button is clicked, the submit function will be called, but as you can see it needs to be set to something first. I am using this element multiple times in one page, and for each form I need it to do something different.
In my main I have this:
#CustomTag('my-form')
class MyCustomForm extends MyForm {
// The below commented out line would work if I only had one form.
// var submitFunction = submitForm1;
submitForm1() {
// do stuff with form 1
}
submitForm2() {
// do stuff with form 2
}
}
And in the HTML:
<my-form id="form1" submitFunction="{{ submitForm1 }}"></my-form>
<my-form id="form2" submitFunction="{{ submitForm2 }}"></my-form>
But this doesn't work. The submitForm functions don't run at all. Any suggestions?
To initialize submitFunction programmatically, (for Polymer < 0.17.0), add the below.
#whenPolymerReady
onReady() {
MyForm form1 = (querySelector("#form1") as MyForm);
form1.submitTo = methodToCallOnSubmit();
// same for form 2.
}
For Polymer you need to add a dash in the event name on-click instead of onclick.
Depending on the Polymer version you are using you need to annotate the functions with
#enventHandler // Polymer <= 1.0.0-rc.1
#reflectable // Polymer >= 1.0.0-rc.2
Polymer 1.0 is quite restrictive what is possible/allowed in binding expressions. The spaces might cause troubles too
"{{ submitForm1 }}"
try
"{{submitForm1}}" instead

how to retrieve item from an unordered list in polymer dart

I'm using template repeat to generate a list of item.
Simple question here how can I retrive the 'item' I click on in my 'addme' method
I can see my print in the console
Here is my code
<template repeat="{{item in items}}">
<div on-click="{{addme}}" layout horizontal justified>
<div>{{item.name}}</div>
<core-icon icon="settings"></core-icon>
</div>
</template>
addme(event, details,node){
print(event);
print(details);
print(node.selec);
selectedExercises.add(ex);
}
Cheers
From this answer:
use the template-value attribute in your template:
<template repeat="{{item in items}}">
<div on-click="{{addme}}" layout horizontal justified template-value="{{item}}">
<div>{{item.name}}</div>
<core-icon icon="settings"></core-icon>
</div>
</template>
use nodeBind in your event handler:
import 'package:template_binding/template_binding.dart' as tb;
addme(event){
tb.TemplateInstance ti = tb.nodeBind(e.target).templateInstance; // get access to the TemplateInstance of the element
// TemplateInstance provides access to the model and the actual value
var ex = ti.model.value;
selectedExercises.add(ex);
}
There are lots of ways! Depends on what kind of data you really need. For instance, if you can track down your item instance using the name (or other identifying info), you could do something like this:
<template repeat="{{item in items}}">
<div on-click="{{addme}}" data-item-name="{{item.name}}" layout horizontal justified>
<div>{{item.name}}</div>
<core-icon icon="settings"></core-icon>
</div>
</template>
Then in the event handler:
addme(event, details, target){
String name = target.dataset['item-name'];
// then find your item instance using "name"
}
Or you could create a custom element for your items, maybe <item-view>, and repeat those.
<template repeat="{{item in items}}">
<item-view item="{{item}}"></item-view>
</template>
That makes it even easier and cleaner to get at the item instance you want, because target will have a public property containing the reference. Let me know if you'd like to see a more thorough example of that approach.
And you can even do it with enumeration, which would allow you to get the index within the repeat, and that same index could be used to look up the item instance in the original List (assuming it's a List you're repeating over). That looks like this:
<template repeat="{{item in items | enumerate}}">
<div on-click="{{addme}}" data-index="{{item.index}}" layout horizontal justified>
<div>{{item.value.name}}</div>
<core-icon icon="settings"></core-icon>
</div>
</template>
You can get the index inside addme() like:
int index = int.parse(target.dataset['index']);
Confused yet? Always so many ways to do things, eh?
Polymer >= 1.0.0
#reflectable
void someClickHandler(dom.Event event, [_]) {
// for native events (like on-click)
var model = new DomRepeatModel.fromEvent(event);
// or for custom events (like on-tap, works also for native events)
var model = new DomRepeatModel.fromEvent(convertToJs(event));
var value = model.jsElement['items'];
// or
var value = model.jsElement[$['mylist'].attributes['as']];
// if you used the `as="somename"`
// in your <core-list> or <template is="dom-repeat">
}
There is an open issue related to custom events: https://github.com/dart-lang/polymer-dart/issues/624

Resources