Hi there I am new to cypress and learning,
My data is dynamic and changes every second. Imagine a table with Column city and city incharge. The city incharge is dynamic and changes every minute.
This is clickable and holds a link. This particular part changes more frequently and I want to check if the href holds correct value.
<a href="/City/incharge/Mr.A" data-toggle="tooltip" title="" data-original-title="Mr.A">
</a>
I tried to store the value in a variable but then not sure how to add it to the url to see if it is correct.
For example I tried code in cypress like this,
it('Check click function on Transactionhash', () => {
cy.get('td').eq(1).then(($incharge) => {
var name = $incharge.text(); // Storing the dynamic value to a variable
cy.get('td').eq(1).click()
cy.url().should('eq','https://worldmap.com/city/'name')
});
This 'name' part on the above url should have the dynamic value. In our case Mr.A which might change in future to anything.
Can somebody please help?
Thanks.
Looking at your sample it should be something like this:
it('Check click function on Transactionhash', () => {
let name = ''
cy.get('td').eq(1)
.then(incharge => {
name = incharge.text()
cy.get('td')
.eq(1)
.click()
cy.url()
.should('eq',`https://worldmap.com/city/${name}`)
})
})
Note the usage of backticks (`) in the should() function
Related
I am trying to obtain the ID of some element in Cypress. Because it's ID randomly changes (yes it is strange but it is angular).
E.g. I have a <button id="dropdown-1" class="someclass"><span>Click here</button>
As I can't rely on that ID, because after I do some actions on the page it becomes to dropdown-2 etc., I want to know, what is the current ID name.
I tried something like:
cy.get('button > span').contains('Click here').find("id");
but seems that is not the correct way.
I also tried:
cy.get('button > span').contains('Click here')
.invoke('attr', 'id')
this works not as well.
You can use a combination of text and a selector which has the non-changing part of your id value. Something like:
cy.contains('button[id*="dropdown-"]', 'Click here').invoke('attr', 'id')
Now you can use use the id value in two ways.
Directly after extraction:
cy.contains('button[id*="dropdown-"]', 'Click here')
.invoke('attr', 'id')
.then((id) => {
cy.log(id) //prints id
})
Save it in alias .as and use it later:
cy.contains('button[id*="dropdown-"]', 'Click here')
.invoke('attr', 'id')
.as('idValue')
cy.get('#idValue').then((idValue) => {
cy.log(idvalue) //prints id
})
I am using following code to display data from server in a Kendo Grid.
Working fine.
I want to put two hyperlinks in last cell of each row, but can do with only one.
I want EDIT and DELETE link in same cell.
How can I achieve this?
CODE
#(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(u => u.USERNAME);
columns.Bound(u => u.PASSWORD);
columns.Bound(u => u.ROLE);
columns.Bound(u => u.STATUS);
columns.Template(c => Html.ActionLink("Edit", "Edit", new { id = c.ID }));
}
)
.Pageable()
)
There are a couple of ways to do this.
First you could use the inbuilt edit/delete options from within the grid config
like so:
columns.Command(command =>
{
command.Edit();
command.Destroy();
});
Then just wire up the edit config and destroy delete commands appropriately.
Alternatively you can template these out using one of two methods:
First inline template:
columns.Bound(c => c.ID).ClientTemplate("<a href='Edit/#=data.ID#'>Edit Link #=data.ID#</a>
<a href='Delete/#=data.ID#'>Delete Link #=data.ID#</a>")
So this is just bound to a column and the template is added as per your requirements using standard html and javascript if required. This is fine for simple things but can get very clunky fast if you have more complex templates which then leads to the second method creating a template and calling that like this:
columns.Bound(c => c.ID).ClientTemplate("#=getButtonTemplate(data,'buttonsTemplate')#")
then create your template like so:
<script id="buttonsTemplate" type="text/x-kendo-template">
<div class='btn-group'>
<a class="btn btn-primary" href='#Url.Action("{edit action}", "controller")/#=ID#'>Edit Link #=ID#</a>
<a class="btn btn-danger" href='#Url.Action("{delete action}", "controller")/#=ID#'>Delete Link #=ID#</a>
<div>
</script>
then the getButtonTemplate function:
function getButtonTemplate(data, templateName) {
var templateObj = $("#" + templateName).html();
var template = kendo.template(templateObj);
return template(data);
}
So let me explain what is going on here with this second method.
Instead of templating the html in the column we extract it out into two components for want of a better word.
We use the getButtonTemplate function to pass 2 params in the data item and the template's id. This function simply loads the passed data object into the template and the kendo magic renders the html and injects the values in as required. Check the kendo demo site for more info on this subject.
The template element can be a mix of html and javascript so if you needed to apply some logic in the template this can be done in here. Again refer to the kendo site for more info on this subject.
I personally prefer the second method of doing this client templating as it is easier to manage and make changes without rogue hash's or brackets breaking code.
If you need any more info let me know and I will update the answer for you.
i'm in the nth hour of trying the following: i'd like to add text/html snippets before the title of an event as displayed in the fullcalendar (i.e. inside of <div class="fc-event-title">). These snippets would be one of the following:
<span class="info">registration needed</span>
<span class="cancelled">course cancelled</span>
<span class="ok">held as planned</span>
blank value/no additional text
I tried to copy wp-fullcalendar.php into my theme's directory hoping to be able to edit the function but couldn't accomplish to overwrite the original file - anyplace i tried to put it.
I then tried working in the source file, for a test i did (line 199 in original wp-fullcalendar.php):
$title = 'LLL' . $post->post_title; which did nothing to the output in the calendar.
After a while i completely removed the function 'function ajax()' from wp-fullcalendar.php and the calendar still displays just fine. Seems to be the wrong place (which it is anyway as it's a source file, i know).
I was hoping to find a quick way to accomplish my task but as you can see i'm stuck.
Any help on the matter would be highly appreciated. Thank you,
Frank
Update:
i added a custom attribute 'Kurstyp' to each Event.
possible values for it are: empty string (ie no extra span), 'please register', 'event cancelled', 'held as planned'
i would like all non empty values to appear within <div class="fc-event-title">
best each wrapped in a span with an individual class for styling purposes
this is what i added to wp-fullcalendar.php:
add_action('wp_ajax_wpfc_custominfo',array('WP_FullCalendar','custominfo') );
add_action('wp_ajax_nopriv_wpfc_custominfo', array('WP_FullCalendar','custominfo') );
// and further down
function custominfo() {
if( !empty($_REQUEST['post_id']) ){
$return = get_post_meta($_REQUEST['post_id'], 'Kurstyp', true);
}
echo apply_filters('wpfc_custominfo', $return);
die();
}
// then, inside the event.render part within fullcalendar_args
if(event.post_id > 0) {
alert('event.title (1st): ' + event.title);
var custominfo = {action: 'wpfc_custominfo', post_id: event.post_id};
var extra = $.ajax({
url: WPFC.ajaxurl,
type: "POST",
data: custominfo
});
extra.done(function(addtxt) {
event.title = addtxt + event.title;
alert('event.title (2nd): ' + event.title);
});
}
alert('event.title (3rd): ' + event.title);
addtxt delivers the correct value but my 3rd alert fires before the 2nd one, so event.title remains unchanged
all of this takes place in the original source, i'd want to change this even if it worked
also, even if it worked: how to style the different messages accordingly?
might the attribute className of the Event Object be helpful and if so, how?
The Texts used would be german, tried to use english here for better reading.
Thanks for your help, Frank
I've been googling for hours but surprisingly I didn't find any topic on that subject.
I have the following Form
class propertyType extends AbstractType
{
public function buildForm(FormBuilder $builder, array $options)
{
$builder
->add('city')
->add('district', 'entity', array('class'=>'FlatShanghaidefaultBundle:district',
'property'=>'name',
'query_builder' => function ($repository) {
$qb = $repository->createQueryBuilder('district');
$qb->add('where', 'city = :city');
$qb->setParameter('city', 1);
return $qb;
}
public function getName()
{
return 'property';
}
}
When the user choose a City in the form, I want the options of district to be dynamically updated and limited to that city. With Ajax or JS?
What would be the best practice? Do you know a tutorial on that topic?
If someone can put me on the right tracks, that would help a lot..
Thanks!
The query builder will not solve your problem, you can remove it altogether.
That query is run when the form gets built, once you have it on your browser you need to use javascript to populate the options.
You can have the options stored in a javascript variable, or pull them from the server as needed with ajax (you will need a controller to handle these ajax requests).
You will probably want to use some jquery plugin to handle the cascading logic between the select elements, there are a couple available:
I use this one, but it seems to be offline: http://devlicio.us/blogs/mike_nichols/archive/2008/05/25/jquery-cascade-cascading-values-from-forms.aspx
And there is this one, which I never used really: http://code.google.com/p/jquery-cascade/
There is also at least this Bundle I know of: https://github.com/genemu/GenemuFormBundle, which has ajax field types available for several jquery plugins. This may save you writing the ajax part to handle the data, as it comes built in (it's probably easier to implement the controller your self anyway). I haven't tried this one, and I don't know if it has cascading support.
Jbm is right about the query builder. And his approach is perfecly valid.
Another option could be to dispense the cascade select in favor of an autocomplete field.
Assuming that you save the countries, cities and districts as entities and have a relation between them, you do not even need to save what city/country has been selected because you can just call:
$district->getCity()->getCountry();
I have implemented a similar thing for country/city selection and will link here to the the main involved files.
First, create a custom form type to encapsulate all form stuff, it contains a hidden field to store the selected id and a text field to serve as input for the autocomplete logic:
https://github.com/roomthirteen/Room13GeoBundle/blob/master/Form/LocationFieldType.php
Then theme the form type:
https://github.com/roomthirteen/Room13GeoBundle/blob/master/Resources/views/Form/fields.html.twig
The url of the autocomplete source is passed as data attribute so no JS will be smutching the html code.
Last but not least, the JS functions have to be implemented:
https://github.com/roomthirteen/Room13GeoBundle/blob/master/Resources/public/jquery.ui.location-autocomplete.js
The result can be seen in the image below, see that for clarity the country name will be displayed in braces behind the city name:
--
I favor this solution much more that using cascade selects because the actual value can be selected in one step.
cheers
I'm doing this myself on a form.
I change a field (a product) and the units in which the quantity can be measured are updated.
I am using a macro with parameters to adapt it more easily.
The macro :
{% macro javascript_filter_unit(event, selector) %}
<script>
$(function(){
$('#usersection')
.on('{{ event }}', '{{ selector }}', function(e){
e.preventDefault();
if (!$(this).val()) return;
$.ajax({
$parent: $(this).closest('.child_collection'),
url: $(this).attr('data-url'),
type: "get",
dataType: "json",
data: {'id' : $(this).val(), 'repo': $(this).attr('data-repo'), parameter: $(this).attr('data-parameter')},
success: function (result) {
if (result['success'])
{
var units = result['units'];
this.$parent.find('.unit').eq(0).html(units);
}
}
});
})
});
</script>
{% endmacro %}
The ajax returns an array : array('success' => $value, 'units' => $html). You use the $html code and put it in place of the select you want to change.
Of course the javascript code of the ajax call need to be modfied to match your fields.
You call the macro like you would normally do:
{% import ':Model/Macros:_macros.html.twig' as macros %}
{{ macros.javascript_filter_unit('change', '.unitTrigger') }}
So I have two arguments : the event, often a change of a select. and a selector, the one whose change triggers the ajax call.
I hope that helps.
Using CakePHP's Ajax based observefield, I would like to update multiple fields, into my form, any idea how can i achieve this?
If i try with 'update' => array('NoncompetitorEventId','NoncompetitorEventId') it doesn't work even. It works for single field update, but not for multiple ones.
Kindly let me know if some patch is there. I'm using CakePHP 1.2 version.
Thanks !
You can do it with little tweak using the prototype along with observe field:
Like:
Step 1: Call your function using observe field and call protype function on complete as follow:
echo $ajax->observeField('TransportorderContactId',array('url'=>'functionname','indicator' => 'loading_message','complete' => 'updateDetails(request,json)'));`
Step 2: Set the required fields in json variable in your called function:
echo json_encode(array('field1' => value1,'field2' => value2); //here keep your field name as id of the field you want to update.
Step 3: Now you will get the above fields in your updateDetails function which is in add.ctp
<script language="javascript">
function updateDetails(request,json){
var data = request.responseText.evalJSON();
$H(data).each(function(pair){
$(pair.key).setValue(pair.value);
});
}
</script>
And like this you can update more than one field using observe field.