Orchard cms Custom choice list field with url Alternate - orchardcms

I am using Choice List Field from orchard gallery. So far so good..
Next I did a few changes in the code
Modules.Contrib.ChoiceList.views.EditorTemplate.Flieds.Contrib.ChoiceList.cshtml.
The objective was to put a table around radio button and it is working – no problem.
With the following code:
#model Contrib.ChoiceList.ViewModels.ChoiceListFieldViewModel
#using Orchard.Utility.Extensions;
#{ var i = 0; }
<fieldset class="FieldSoubedenos">
<legend>#Model.Name</legend>
<table class="data-table-Soubedenos">
<tbody>
<tr >
#if( Model.ListMode == "radio" )
{
foreach (var option in Model.Options.Split(';'))
{
if( string.IsNullOrWhiteSpace(option) )
{
<td>
<label>#Html.RadioButton("SelectedValue", "", string.IsNullOrWhiteSpace(Model.SelectedValue))<i>unset</i></label>
</td>
}
else
{
<td>
<label>#Html.RadioButton("SelectedValue", option, (option == Model.SelectedValue))#option</label>
</td>
}
++i;
if (i % 2 == 0)
{
#:</tr><tr>
}
}
}
else
{
#Html.DropDownListFor(m=>m.SelectedValue, new SelectList(Model.Options.Split(';'), Model.SelectedValue))
#Html.ValidationMessageFor(m=>m.SelectedValue)
}
<tr >
<tbody>
</table>
</fieldset>
The next stage was to use an url alternate and i did create one -
~/Themes/XXXXXXXXX/Views/EditorTemplate-Dform-url-homepage.cshtml
and copy pass the above code in the alternate file.
Refreshing the browser got me the following error:
Server Error in '/' Application.
The model item passed into the dictionary is of type
'IShapeProxy82be9d7cba51459e888e92b32898011b', but this dictionary requires a model item of type 'Contrib.ChoiceList.ViewModels.ChoiceListFieldViewModel'.
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.
Exception Details: System.InvalidOperationException: The model item passed into the dictionary is of type 'IShapeProxy82be9d7cba51459e888e92b32898011b', but this dictionary requires a model item of type 'Contrib.ChoiceList.ViewModels.ChoiceListFieldViewModel'.
Source Error:
Line 3: #if (Model.Content != null) {
Line 4: <div class="edit-item-content">
Line 5: #Display(Model.Content)
Line 6: </div>
Line 7: }
Source File: c:\00\01 projectos\xxxx\yyyyyyyy\NewWebSite.Orchard.Web\0\Orchard.Web.1.6\Orchard 0\Core\Contents\Views\Content.Edit.cshtml Line: 5
Any suggestions ?

You can try remove the #model declaration at the top of the view as it is the dynamic shape template assigned to the Model, not the ViewModel you are expecting - see http://orchard.codeplex.com/workitem/18195
You can access the view model through Model.Model e.g.
#{
var myViewModel =
(Contrib.ChoiceList.ViewModels.ChoiceListFieldViewModel)Model.Model;
}
or access the dynamic fields directly
#Model.Model.Name

Related

Laravel Livewire wire:click() deleting component property?

Hi fellow stackoverflowers,
I am running repeatedly into following issue while digging myself into Laravel8 Livewire capabilities. In my Livewire component called Ticker I am reading a series of dates data from a calendar table into a component property $days.
In my view I am displaying a div element for each element of $days with a wire:click, which should wire to the component's tick() method.
The view renders and mounts fine, but each time an element is clicked, a "Trying to get property 'id' of non-object $day->id" error appears - as if the $days property had been deleted or emptied by the method call. Can anyone help me in understanding this behaviour?
Component Ticker.php:
class Counter extends Component
{
public $days;
public function mount()
{
$this->days = \DB::table("caldays")->WhereBetween("id", [320, 326])->get();
}
public function render()
{
return view('livewire.ticker');
}
public function tick($id)
{
/* do stuff with selected $id */
}
}
View ticker.blade.php:
...
#foreach($days as $day)
<div class="border border-light-blue-500 border-opacity-75 p-6 text-center"
wire:click="tick({{ $day->id }})"
>
#endforeach
...
Many thx in advance & happy year & stay healthy!
You have to notice that. After delete your respective day this will not update your collection anyway. So after deletion you have to re query the days.Or Simply remove the respective day from your collection.
Try This:
#forelse($days as $day)
<div class="border border-light-blue-500 border-opacity-75 p-6 text-center"
wire:click="tick({{ $day->id }})"
>
#empty
<p>No day found</p>
#endforelse
Another solution is:
#if(count($days>0)
#foreach($days as $day)
<div class="border border-light-blue-500 border-opacity-75 p-6 text-center"
wire:click="tick({{ $day->id }})"
>
#endforeach
#endif
In php file:
public function tick($dayId){
$day = \DB::table("caldays")->Where("id", $dayId)->get();
$day->delete();
if(in_array($dayId,$this->days)) {
$key = array_search($dayId, $this->days);
array_splice($this->days, $key, 1);
}
}

Scrape and iterate over html table without classes

I'm building a webscraper with nodejs and pupeteer.
Everthing works fine, but now im stuck on how to get structured data from a table without classes. Here's an example:
I don't know how to iterate thru the table and extract the data in json format which should like this:
<table class="tableclass">
<tbody>
<tr>
<td>
<b>
<strong>
<span>A</span></strong> & B <strong><span>C</span></strong>Name</b>
</td>
<td >
Street No<br>
Zip City
</td>
<td >
Map | Website
</td>
</tr>
<tr>
<td>
<b>
<strong>
<span>A</span></strong> & B <strong><span>C</span></strong>Name</b>
</td>
<td >
Street No<br>
Zip City
</td>
<td >
Map | Website
</td>
</tr>
</table>
Obj ={
"content":[
{
"name":"A&B C Name",
"adress":[
"Street No",
"Zip",
"City"
],
"link":"http://www.websiteB.de"
},
]
}
Does the table have a consistent structure in each case? If so, you just need to figure out how to get to each element from the root of of table. For instance, to get the name, assuming that the above table structure is the same for all tables:
const table = document.querySelector('.tableclass')
Obj ={
"content":[
{
"name": table.querySelectorAll('tr')[0].querySelectorAll('td')[0].innerText;
....
]
}
Here, I get the table element I am interested in using document.querySelector('.tableclass') - which will return the first instance of .tableclass on the page. If you have multiple, you will have to use document.querySelectorAll and perform these operations on each table in a for-loop.
Then, I use the querySelector but limited to this table, and I grab the first element, because that's where the name is. (table.querySelectorAll('tr')[0]). Here I could have just used (table.querySelector('tr')) as I wanted the first element, but this is just to show you how you can access any of the s by their index. Finally, following the same logic, I need to select the first element as that is the element that contains all the 'name' text, then I just use its .innerText attribute to extract the text.
innerText will be your friend here - just traverse the DOM nodes using node.querySelector until you get to one that contains all the text you want and no more, then get the .innerText attribute on that node. If the table has consistent structure, you should just be able to figure this out for one table and it should work on all of them.
let data = await page.evaluate(() => {
var i = 0;
for (var i = 0; i < 5; i++) {
const table = document.querySelector('#tableclass');
let dealer = table.querySelectorAll('tr')[i].querySelectorAll('td')[0].innerText;
let adress = table.querySelectorAll('tr')[i].querySelectorAll('td')[1].innerText;
let link = table.querySelectorAll('tr')[i].querySelectorAll('td')[2].querySelectorAll('a')[1].getAttribute("href");
return {
dealer,
adress,
link
}
}
I want to loop thru the table/ each row in it. I know this is wrong, but I don't know how to loop in this case. Thanks for help!

Cheerio cannot scrape table with no ID or className, but paths are being accessed correctly

The item I am trying to access in the following HTML is "GMV DLL VERSION2"
<div class="container content">
<main>
<h2 id="rpcs--gmv-dll-version">RPCs → GMV DLL VERSION</h2>
<h3 id="vista-file-8994">VISTA File 8994</h3>
<table>
<thead>
<tr>
<th>property</th>
<th>value</th>
</tr>
</thead>
<tbody>
<tr>
<td>label</td>
<td>GMV DLL VERSION2</td>
I am trying to scrape this website (http://vistadataproject.info/artifacts/vistaRPC%20documentation/GMV%20DLL%20VERSION)
and output it into a text file. I successfully did a test run with reddit.com. However I cannot seem to get this page to get even a single element off of it. To test it, even before tackling the table I've been trying to scrape some elements that come quite early (in top area) of the page.
The lack of classNames and Id in the tables is tricky enough, but not being able to get even the title text is really making me wonder what is going on. Any input will be appreciated.
request(http://vistadataproject.info/artifacts/vistaRPC%20documentation/GMV%20DLL%20VERSION, (err, res, body) => {
if (err) {
console.log('Error: ' + err);
}
console.log('Status: ' + res.statusCode);
const $ = cheerio.load(body);
$('header.masthead > div.container').each(( index, tr ) => {
// var children = $(this).children();
const tableData = $(this).find('a.logo').text();
console.log("Table Contents: " + tableData);
fs.appendFileSync('test.txt', tableData + '\n' + 'Captured');
});
The problem is that 'masthead' is a class name, not an id. Same deal with 'container' and 'logo'. So you need to adjust your selector accordingly:
$('header.masthead > div.container').each(( index, tr ) => {
However, that only gets you the header information, which does not include the tables containing the 'property => value' data. For that information you just need to look for child tables under the '<main>' tag.

How to get a DatePicker value in razor?

Here my problem:
I have an input text and behind a date picker ui: and I would like to get the datepicker's value in razor:
Index.cshtml
<input id="datePickerCalendar" type= "text"/>
<script type="text/javascript">
$(document).ready(function () {
$('#datePickerCalendar').datepicker({
altFormat: "dd-mm-yy",
dayNamesMin: ["Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa"],
monthNames: ["Janvier", "Fevrier", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
changeMonth: true,
onSelect: function () {
/*('#datePickerCalendar').change(loadCalendar());*/
}
});
});
</script>
<table border="1" class="tableCalendar" id="calendar">
<caption> Veuillez sélectionner l'horaire souhaité </caption>
<th id="court"></th>
#foreach(var item in Model) {
foreach(var court in item.TennisCourts){
if (court.Outside == true)
{
<td id="court" class="court">Court n°#court.Number (Extérieur)</td>
}
else
{
<td id="court" class="court">Court n°#court.Number (Intérieur)</td>
}
}
}
#foreach (var item in Model)
{
var chooseDate = $('#datePickerCalendar').value; // here ! This instruction is not correct...
}
I'm Building a dynamic calendar that allow the user to make a reservation for a tennis court...
So, my questions are:
1)How to get the value from the datepicker in razor ?
2)How can I get the value every time when the user change the date ?
Thanks in advance
You need to post your value to a action method on the controller, surround the field with a form
#using (Html.BeginForm("Controller", "Action", FormMethod.Post))
{
}
Then change your field into a server side rendered one (So the model binder can capture the new value)
#Html.TextBoxFor(m => m.MyDate)
The action method needs to take the model as argument and it needs to have the DateTime property named MyDate
edit:
If you will be sending values from the server you need to be sure the client datepicker and the serer uses the same date format. This is a bit tricky, but I did this with the globalize jquery plugin, you have to choose if you want to hardcode the ui culture, or if the sever will use the client culture. This is done in web.config
Hardcoded
<globalization culture="se-SE" uiCulture="se-SE" enableClientBasedCulture="false" />
Client chooses
<globalization enableClientBasedCulture="true" />
edit2
Sorry for all my edits :D
A good way for sending server settings like datetime and such is to create a settings razor view and change its mime type to javascript, also be sure to have caching otherwise the client will load it every time
#{
Layout = null;
Response.Expires = 120;
Response.CacheControl = "public";
Response.ContentType = "text/javascript";
}
MyAppName = {};
MyAppName.settings = {
culture: "#Thread.CurrentThread.CurrentCulture.Name",
timeFormat: "#Thread.CurrentThread.CurrentCulture.DateTimeFormat.ShortTimePattern.ToLower()",
dateFormat: "#Thread.CurrentThread.CurrentCulture.DateTimeFormat.ShortDatePattern.ToLower().Replace("yyyy", "yy")",
}

In YUI determine if an element exists that has a specific value

I'm fairly familiar with jQuery, but I'm working on a project in YUI, which I am totally new to, and am not sure how to accomplish this.
In essence, I need to display a js popup if a span element exists that has the text "Inactive" in it and is several steps down the tree from a div with a class of "list_subpanel_cases".
This is a rough example, but the point is, this is dynamically built, so my only definite selectors are the div with the class and the descendant span with a text value of "Inactive".
<div class="list_subpanel_cases">
<table>
<tbody>
<tr>
<td>
<span>Active</span>
</td>
</tr>
<tr>
<td>
<span>Inactive</span>
And I need to find out if any spans exist with the text "Inactive".
Hope this isn't too confusing!
It appears that CSS3 selectors can't examine content (only attributes) so you'd have to use a selector for the candidate span tags and then use code to look at the content for a match. Here's one way to do that:
function findInactive() {
var found = null;
Y.all(".list_subpanel_cases span").some(function(node, index, nodeList) {
if (node.getContent() == "Inactive") {
found = node;
return(true); // stop looking for more matches
}
return(false); // keep looking for more matches
});
return(found);
}
if (findInactive()) {
// execute code here when the Inactive span exists
}
You can see it work here: http://jsfiddle.net/jfriend00/BVzqL/.

Resources