I have an angular mat-table where I show a calendar with data and I want to show all the days of the month or only one of the 2 fortnights, so I have one variables to set the type of vision of my calendar (vistaCalendario) and another one to set the fortnight (quincenaurl).
The type of vision is selected from these icons
But this condition is no respected
the column M1 should only be shown when vista Calendario is "mes" or "quincena" but quincena en la Url is 1 and here that condition is not met and even so it is shown
Any idea, please?
Thanks
Its better to use switchabe div
<div *ngIf="vistaCalendario == 'mes'; else elseTemplate" >
--Your code----
</div>
<div #elseTemplate *ngIf="vistaCalendario == 'quincena' && quincenaurl == 1" >
----Your code----
</div>
Related
I have a list of items that I iterate over as cards w/ thymeleaf:
<div th:each="show,iter : ${shows}" class="col-sm-6 col-xl-4 mb-5">
<div class="card">
...
</div
</div>
I want after every nth card to show an ad instead of the regular card but NOT skip the item in the list. I can't find a way to add the ad code as its own card without it skipping one of the items OR just messing up the UI.
My best thought is to add "dummy" items to the list itself, but that feels wrong.
Any ideas?
The main answer to this is that you want to do the manipulation on the server-side, NOT on the view. Then you can unit-test, cache, and simply display the results without a UI designer caring about any complicated code. All you're really doing is inserting the ad at every nth position and then displaying the full list, one-by-one.
If that is somehow not an option, you can do something like the following. Let's say you have:
List<String> shows = new ArrayList<>(Arrays.asList("Game of Thrones",
"Daniel Tiger's Neighborhood",
"The Mandalorian",
"Breaking Bad",
"RugRats",
"Big Bang Theory",
"Knight Rider",
"Quantum Leap",
"Friends",
"Gilligan's Island"));
model.addAttribute("shows", shows);
model.addAttribute("ad", "StackOverflow");
model.addAttribute("cardsToDisplay", new ArrayList<>()); //ignore a capacity for simplicity for now
Then you can do:
<th:block th:with="cardsToDisplay = ${cardsToDisplay}">
<th:block th:each="show : ${shows}">
<!-- add the first show and every 3 thereafter, add the ad -->
<th:block th:if="${showStat.index % 2 == 0 && showStat.index != 0}">
<th:block th:text="${cardsToDisplay.add(ad)}" th:remove="all"></th:block><!-- or however you are getting your ad -->
</th:block>
<th:block th:text="${cardsToDisplay.add(show)}" th:remove="all"></th:block>
</th:block>
<!-- display the manipulated list -->
<div th:each="theCard : ${cardsToDisplay}" class="col-sm-6 col-xl-4 mb-5">
<div th:text="${theCard}" class="card"></div>
</div>
</th:block>
Then your output would be:
Game of Thrones
Daniel Tiger's Neighborhood
StackOverflow
The Mandalorian
Breaking Bad
StackOverflow
RugRats
Big Bang Theory
StackOverflow
Knight Rider
Quantum Leap
StackOverflow
Friends
Gilligan's Island
Thymeleaf implicitly gives you this construct of showStat because we declare a variable called show. You need th:remove="all" to hide the output of the add operation.
Change the number 2 as needed to represent n.
You can alternatively do this work in Javascript, but doing so introduces another skill that someone on your team would maintain.
I'm trying to use jqueryui_widgets combined with page-object-gem to test a datepicker, but I am failing on the first step.
on(HasADatepickerPage).the_datepicker = date
I get this error:
Watir::Exception::ObjectReadOnlyException: object is read only {:id=>"datepicker", :tag_name=>"input or textarea", :type=>"(any text type)"}
./features/step_definitions/datepicker_steps.rb:8:in `/^I enter the date "([^\"]*)"$/'
./features/has_a_datepicker.feature:8:in `When I enter the date "10/05/2015"'
has_a_date_picker_page.rb ( jqueryui_widgets example datepicker_page.rb )
class HasADatepickerPage
include PageObject
jqueryui_datepicker(:the_datepicker, :id => 'datepicker')
end
Questions:
What do I need to do prior to on(HasADatepickerPage).the_datepicker = date ?
What do I need to do prior to on(HasADatepickerPage).the_datepicker_select_day day ?
I cloned the jqueryui_widgets project, ran datepicker feature test, works fine. I modelled my solution as closely as I could to it.
I included snipets from my html page and the rest of the glory details I could think of below.
Thanks,
Tim
The Gory Details
my site html vs ( jqueryui_widgets example datepicker.html )
<div class="forms">
<div class="ajaxformitem" rel="Please select the number of passengers traveling">
<div class="ajaxformitem" rel="Please Enter the Date of Travel" style="background: transparent none repeat scroll 0% 0%;">
<div class="ajaxformitemleft">
<div class="ajaxformitemright">
<input id="datepicker" class="corner required hasDatepicker" type="text" placeholder="Pick Up Date" value="" readonly="true" name="PickUpTime[Date]"/>
<select id="hour" class="corner required" name="PickUpTime_Hour">
<select id="minute" class="corner required" name="PickUpTime[Mnute]">
</div>
</div>
ui-datepicker-div:
<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="position: absolute; top: 199px; left: 635.5px; z-index: 12; display: block;">
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
<a class="ui-datepicker-prev ui-corner-all" title="Prev" onclick="DP_jQuery_1440799766008.datepicker._adjustDate('#datepicker', -1, 'M');">
<a class="ui-datepicker-next ui-corner-all" title="Next" onclick="DP_jQuery_1440799766008.datepicker._adjustDate('#datepicker', +1, 'M');">
<div class="ui-datepicker-title">
</div>
<table class="ui-datepicker-calendar">
<thead>
<tbody>
</table>
</div>
has_a_datepicker.feature - same as example
Feature: Using the JQueryUI Datepicker widget
Background:
Given I am on the has datepicker page
Scenario: Testing datepicker jqueryui_widgets
When I enter the date "10/05/2015"
And I select day "25"
Then the date should be "10/25/2015"
datepicker_steps.rb - the_datepicker vs (datepicker_one and datepicker_two)
Given(/^I am on the has datepicker page$/) do
visit(HomePage)
on(HomePage).select_radio_for 'From'
on(HomePage).select_service 'Airport'
end
When(/^I enter the date "([^\"]*)"$/) do |date|
on(HasADatepickerPage).the_datepicker = date
end
And(/^I select day "(\d+)"$/) do |day|
on(HasADatepickerPage).the_datepicker_select_day day
end
Then(/^the date should be "([^\"]*)"$/) do |day|
#on(DatepickerPage).datepicker_one.should == day
expect(on(HasADatepickerPage).the_datepicker).to eql day
end
Selecting a Date
If you look at the datepicker methods, all of the interactions with the calendar assume that the calendar is already displayed. If you look at the gem's test (features), you will see they always inputted the text field first, which opens the calendar. Only after that do the tests try to interact with the calendar.
However, since your text field is read-only, you cannot input the text field to trigger the popup. As a result, you need to click the text field. The datepicker accessor creates a {name}_element method for accessing the text field. Therefore, you can do:
page.the_datepicker_element.click
page.the_datepicker_select_day('15')
Setting a Date
The {name}= method for directly setting the date will not work for your control. The method simply types into the text field, which being read-only is not valid.
You seem to have 2 options:
Click the Next/Previous Month controls until you get the right month and then select the day.
Use JavaScript to input the text field directly.
Unless there are events the application excepts to be raised when inputting the date, I would suggest going with option 2. It is quicker and less error prone. While it does not mimic the user, testing the interactions within a jQuery widget should not be your responsibility.
date = '08/13/2015'
page.execute_script("arguments[0].value='#{date}';", page.the_datepicker_element)
If you really want to input the value like a user:
# These libraries are added to help with doing date comparisons
require 'date'
require 'active_support/time'
# The date you want to set
date = '12/13/2015'
# Open the calender
page.the_datepicker_element.click
# Determine if we need to navigate to a prior or future month
final_date = Date.strptime(date, '%m/%d/%Y')
current_date = Date.strptime(
"#{page.the_datepicker_month} #{page.the_datepicker_year}",
'%B %Y'
)
difference = (final_date.year * 12 + final_date.month) - (current_date.year * 12 + current_date.month)
# Navigate to the required month/year
if difference < 0
difference.abs.times { page.the_datepicker_previous_month }
else
difference.abs.times { page.the_datepicker_next_month }
end
# Select the day
page.the_datepicker_select_day(final_date.day.to_s)
As you can see, having to click the next/previous controls adds a lot of complexity.
Your ui-datepicker-div has: <input id="datepicker" readonly="true">
Watir won't let you send text to an element that is set to be readonly. Remove that attribute and this should work.
I have dropdown list with some universities and in case the user is in a university that isn't in the list he can add it with an input box. My issue is that after the user clicks the submit button I can't get the value from the dropdown.
My code in the view is:
echo "University:";
?>
<div id="university2" style="display:block;">
<?php
echo form_dropdown('university2',$this->session->userdata('user'));
echo " ";
echo "<a href= javascript:ShowContentuni('university')>Other</a>";
?>
</div>
<div id="university" style="display:none;">
<?php
echo form_input('university',$this->input->post('university'));?>
</div>
And my code in the controller is:
if(isset($_POST['university']))$university= $this->input->post['university'];
else if(isset($_POST['university2']))$university=$this->input->post('university2');
Any ideas what I'm doing wrong??
It looks like there are two problems:
always overriding the value of $university with the post value of 'university2', even if it is empty
the form has two inputs called university, only the second one is being referred to
A quick fix would be to first delete the second 'university' form element, i.e. delete this:
echo form_input('university',$this->input->post('university'));
Then check that the user if the user has manually entered a university name, and use that if so. If the user did not enter a university name, use whatever the dropdown value is. The code would look like this:
$universityFromDropdown = $this->input->post('university');
$universityFromManualInput = $this->input->post('university2');
$university = is_string($universityFromManualInput)
&& strlen($universityFromManualInput) > 1
? $universityFromManualInput : $universityFromDropdown;
So I have a dropdown and I am using angular to build it. Minutes is an array of numbers [0,1,2....59]. The filter is a simple filter that displays the digits from 0-9 as 00, 01... etc.
<select ng-model="addObj.StartMinute"
ng-options="m as m | pad2Digit for m in Minutes"
required
name="startMinute">
<option value="">-- select --</option>
</select>
My problem is that this ALWAYS reports being valid. I have removed the option in there that lets me customize the option used when no match is found, and that doesn't change it. I have tried setting StartMinute to null, -1 and undefined and still the select ALWAYS says it is valid.
I have found so far that the problem has to do with my using simple numbers rather than binding to objects. In cases where I am doing a dropdown with more a collection of objects, required validation is correctly detecting that nothing is chosen. I would have thought that setting the initial value on the above dropdown to null would work, but it isn't. So does anyone know how to use required validation on a dropdown that is bound to an array of numbers?
There must be something else on the project where it wasn't working making this not work because the raw jsfiddle I threw together to try to demo the problem works properly. If the initial value is null, then the validation does fail like I would expect.
HTML
<div ng-app="app">
<div ng-controller="ctrlDropdown">
<form name="testForm">
<select ng-model="number1"
ng-options="num for num in numbers"
required
name="ddl1">
<option value="">- select - </option>
</select>
<br/>failsValidation: {{testForm.ddl1.$error.required}}
</form>
</div>
</div>
JS
var app = angular.module("app",[]);
app.controller("ctrlDropdown",function($scope){
$scope.test = "wee";
$scope.number1 = null;
$scope.numbers=[1,2,3,4,5,6];
});
http://jsfiddle.net/NBhTT/
I am using Watir to write some tests for a web application. I need to get the text 'Bishop' from the HTML below but can't figure out how to do it.
<div id="dnn_ctr353_Main_ctl00_ctl00_ctl00_ctl07_Field_048b9dfa-bc64-42e4-8bd5-b45385e5f45b_view" style="display: block;">
<div class="workprolabel wpFieldLabel">
<span title="Please select a courtesy title from the list.">Title</span> <span class="validationIndicator wpValidationText"></span>
</div>
<span class="wpFieldViewContent" id="dnn_ctr353_Main_ctl00_ctl00_ctl00_ctl07_Field_048b9dfa-bc64-42e4-8bd5-b45385e5f45b_view_value"><p class="wpFieldValue ">Bishop</p></span>
</div>
Firebug tells me the xpath is:
html/body/form/div[5]/div[6]/div[2]/div[2]/div/div/span/span/div[2]/div[4]/div[1]/span[1]/div[2]/span/p/text()
but I cant format the element_by_xpath to pick it up.
You should be able to access the paragraph right away if it's unique:
my_p = browser.p(:class, "wpFieldValue ")
my_text = my_p.text
See HTML Elements Supported by Watir
Try
//span[#id='dnn_ctr353_Main_ctl00_ctl00_ctl00_ctl07_Field_048b9dfa-bc64-42e4-8bd5b45385e5f45b_view_value']//text()
EDIT:
Maybe this will work
path = "//span[#id='dnn_ctr353_Main_ctl00_ctl00_ctl00_ctl07_Field_048b9dfa-bc64-42e4-8bd5b45385e5f45b_view_value']/p";
ie.element_by_xpath(path).text
And check if the span's id is constant
Maybe you have an extra space in the end of the name?
<p class="wpFieldValue ">
Try one of these (worked for me, please notice trailing space after wpFieldValue in the first example):
browser.p(:class => "wpFieldValue ").text
#=> "Bishop"
browser.span(:id => "dnn_ctr353_Main_ctl00_ctl00_ctl00_ctl07_Field_048b9dfa-bc64-42e4-8bd5-b45385e5f45b_view_value").text
#=> "Bishop"
It seems in run time THE DIV style changing NONE to BLOCK.
So in this case we need to collect the text (Entire source or DIV Source) and will collect the value from the text
For Example :
text=ie.text
particular_div=text.scan(%r{div id="dnn_ctr353_Main_ctl00_ctl00_ctl00_ctl07_Field_048b9dfa-bc64-42e4-8bd5-b45385e5f45b_view" style="display: block;(.*)</span></div>}im).flatten.to_s
particular_div.scan(%r{ <p class="wpFieldValue ">(.*)</p> }im).flatten.to_s
The above code is the sample one will solve your problem.