I have an html form where you can select multiple days in the form of a button (in the code, these buttons are the one with the ID days). Then, i have a confirm button with the ID book, which should be enabled only if at least one of the days button is selected. How can I check this condition considering i have the variable in another div?
Here is the code:
<ion-card-content>
<ion-label style="display: block;" class="datepicker_middleTitle"><h3>Pick days</h3></ion-label>
<div class="datepicker_generalDaysContainer" >
<div class="datepicker_daysOfWeekContainer">
<div *ngFor="let day of componentData.days" class="datepicker_singleDayWeek">
<p>{{day.letter}}</p>
</div>
</div>
<div class="datepicker_buttonDaysContainer active">
<ion-button id="days" style="font-weight: bold;" *ngFor="let day of componentData.days" [class]="day.selected ? 'active' : day.occupied ? 'disabled' : ''" (click)="selectDay(day.number, day.occupied)">{{day.number}}</ion-button>
</div>
</div>
<ion-button id="book" expand="block" class="btn-big" [disabled]="???" (click)="bookDesk()">BOOK DESK</ion-button>
On your days buttons you have (click)="selectDay(day.number, day.occupied)">{{day.number}}
So using same method you could store the selected days somewhere, like an array for example.
this.selectedDays = [];
selectDay(number: any, occupied: any) {
this.selectedDays.push(number);
}
I don't see all of your code so be prepared to go add type checkings and refactor where necessary.
We could then check, if we have any dates selected to endable or disable the book buttons.
<ion-button id="book" expand="block" class="btn-big" [disabled]="selectedDays.length == 0" (click)="bookDesk()">BOOK DESK</ion-button>
Related
I am stuck by finding a specific button within my list of items... The button exists 3 times with exact same data-testid, but the parent is different. And I end with
error: cy.click() can only be called on a single element. Your subject contained 3 elements. Pass { multiple: true } if you want to serially click each element.
HTML:
<div data-testid="list-item">
<div>
<div>
<span data-testid="status1">
<button data-testid="details_button">click</button>
</div>
</div>
</div>
<div data-testid="list-item">
<div>
<div>
<span data-testid="status2">
<button data-testid="details_button">click</button>
</div>
</div>
</div>
How can I select the details_button of either status1 or status2?
My attempt was:
cy.get('[data-testid=status1]')
.get('[data-testid="details_button"]').click()
cy.get('[data-testid=status1]')
.parent().parent()
.get('[data-testid="details_button"]').click()
Your first attempt is almost correct, but use .find() for the second step
cy.get('[data-testid=status1]')
.find('[data-testid="details_button"]') // find works here (same as .within())
.click()
Works for this HTML
<div data-testid="list-item">
<div>
<div>
<span data-testid="status1">
<button data-testid="details_button">click</button>
<!-- span closing tag is missing -->
</div>
</div>
</div>
The reason that works is because the HTML posted is slightly invalid - the <span> has no closing tag.
Cypress thinks that the button is inside the span, so using .find() works.
However if that's a typo, you should change to your 2nd command using .parent() and also change .get() to .find()
cy.get('[data-testid=status1]')
.parent()
.find('[data-testid="details_button"]')
.click()
Works for this HTML
<div data-testid="list-item">
<div>
<div>
<span data-testid="status1"></span>
<!-- span is closed, button is outside span so use .parent() command -->
<button data-testid="details_button">click</button>
</div>
</div>
</div>
You can use the siblings() method is cypress.
cy.get('[data-testid=status1]').siblings('[data-testid="details_button]').click()
cy.get('[data-testid=status2]').siblings('[data-testid="details_button]').click()
You can also use a combination of parent() and within(), something like:
cy.get('span[data-testid=status1]')
.parent('div')
.within(() => {
cy.get('button[data-testid="details_button]').click()
})
cy.get('span[data-testid=status2]')
.parent('div')
.within(() => {
cy.get('button[data-testid="details_button]').click()
})
I am showing some dynamic value on a table. in the table each row have a delete button( Suppose Button A ). If click the delete button ( Button A ) open a modal to confirm delete and there have confirm button( Button B ). From confirm button I am calling the api to delete the entity with the entity id.
Now I have the id on Button A and I am sending the request from button B. How can I sent the id from Button A to Button B.
Button A:
<td>
<button data-toggle="modal" value = {{this.id}} data-target="#myModal">
<i class="fa fa-trash-o" aria-hidden="true"></i>
</button>
</td>
Modal With button B:
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Confirm Delete</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-header">
Are you sure you want to delete the entry?
</div>
<div class="modal-footer">
yes
</div>
</div>
</div>
</div>
I have given the {{this.id}} on the url of button B but it is always deleting the top or last element ?
add a class (example .delete) to the button,
<button data-toggle="modal" value ={{this.id}} class="delete" data-target="#myModal">
<i class="fa fa-trash-o" aria-hidden="true">delete</i>
</button>
then add a class to the confirmation link (example .yes):
yes
then get onclick event on the button and get the value of the button and insert it in the href attribut :
$(document).on("click", ".delete", function () {
var value = $(this).val();
console.log("value : ", $(this).val())
$(".modal-dialog .yes").attr("href","/admin/dashbord/category/"+value+"/delete");
});
see this codepen
Hi Fairly new to watir and came across this problem. How can I select the button in the following snippet of code
<div id="side bar" class="sidebar">
<div class="inner active" data-reactid=".1">
<a class="back side bar" data-reactid=".1.0" href="#overview">
<h2 data-reactid=".1.1">
<div class="price clearfix" data-reactid=".1.2">
<div class="values type-current-value" data-reactid=".1.3">
<div class="values date-current-value" data-reactid=".1.4">
<div class="values duration-current-value" data-reactid=".1.5">
<div class="values passengers-current-value" data-reactid=".1.6">
<div class="values yacht-current-value" data-reactid=".1.7">
<div class="values flight-current-value" data-reactid=".1.8">
<div class="share-quote" data-reactid=".1.9">
<a class="share-quote cta-button cta-button-blue = share-quote-processed" data-reactid=".1.9.0" data-modal-url="/share-quote" href="#">Share this quote</a>
</div>
I am trying the following which produces a no method error
b.links(:xpath => '//div[#class="share-quote"]/a').to_a.click
The code is trying to click an array of links, rather than an individual link. That is why you get an undefined method error.
You need to click a specific link within the collection. For example:
# Click the first link
b.links(:xpath => '//div[#class="share-quote"]/a').first.click
# Click the last link
b.links(:xpath => '//div[#class="share-quote"]/a').first.click
# Click the nth link
b.links(:xpath => '//div[#class="share-quote"]/a')[n].click
Assuming there is only one of these links on the page, it would be more Watir-like to do:
b.div(class: 'share-quote').link.click
I try to render the list action of my admin class in sonata in a modal, but I can't find the right way to do it?
Someone can help me please?
I just want the datagrid and not all the page(menu, topbar,etc...).
Actually i doing this like that :
En Cours modal
<div class="modal fade" id="basicModal1" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
{{render (controller('MonBundle:Controller:list',{'id':object.id}))}}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
But I've got this error with the render :
Error: Call to a member function getRelativePath() on null
Whole page is shown because you are including a template of the standard controller action. Sonata use conditions for app.request.isXmlHttpRequest to detect if the view is opened in modal (via AJAX) or in a standard way.
So you may solve your problem by these steps:
1) Bind JS function (which opens modal) on button click.
2) When button clicked, load URL and paste its response body into .modal-body
URL: {{ path('your-list-action-name', {'id': object.id}) }}
It will solve the problem when you add a new record to the list from your page but list will show old records (because in your snippet, list renders once, on modal first render).
Additional info could be found in Sonata's ORM Admin Bundle (if you use ORM) under Resources/views/CRUD/edit_orm_many_association_script.html.twig
I have a template like
script type: "text/template", id: "list-template", '''
<div class="display">
<div id="list-name"><%= name %></div>
<span class="list-destroy"></span>
</div>
<div>
<ul id="ul-cards">
</ul>
</div>
<div class="edit">
<input class="list-input" type="text" value="<%= name %>" />
<input id="btnEdit" type="button" value="Save" class="primary wide js-add-list" />
<input id="hdnListId" type="hidden" value="<%= listId%>" />
</div>
<form class="add-list-card js-add-list-card clearfix">
<textarea placeholder="Add card" class="new-card"></textarea>
<input type="button" value="Add" class="primary js-add-card">
<a class="app-icon close-icon dark-hover cancel js-cancel-add-card" href="#" id="closeCard"></a>
</form>
'''
in this template i have <ul id="ul-cards"> element in which i want to render another template which display list inside this ul.
this template is :
script type: "text/template", id: "card-template", '''
<div>
<span class="card-name"><%= name %></span>
</div>
'''
is it possible or i have to do it in another way?
please help me if anyone have idea.
thanks in advace.
it is worked but still i have one problem in data display in
<ul id="ul-cards"> there sholud be 2 as per records in my database but it will display only 1 . data fetch properly but display only last data.
There are two ways to do this: the DOM way and the template way.
The DOM way involves adding your views using DOM methods: you have your ListView and your CardView; the ListView invokes individual CardViews that fill in the ListView's element.
The template way requires that you remember this: backbone's views are policy frameworks, not policy templates. Render doesn't have to render into the DOM. You can use render() to return a string, for example. If your event manager is on the ListView object only (possible; I've done this), then you can have ListView invoke "the resulting array of an array of CardView renders" and insert that directly into ListView's template. This is actually faster, as you only require the browser to analyze the entire ListView HTML blob once, when it's inserted into the innerHTML of the parent DOM object.