I'm having some difficulties with scraping the image source of an image. I tried the following:
_pjs.getText('div#customerInfo table tr:nth-child(1) td:nth-child(7) img.attributes.src')
as well as
_pjs.getText('div#customerInfo table tr:nth-child(1) td:nth-child(7) img[src]')
but nothing seems to be working. Is there a way to do this using getPattern or maybe another way?
My code is below:
pjs.config({
// options: 'stdout', 'file' (set in config.logFile) or 'none'
log: 'stdout',
// options: 'json' or 'csv'
format: 'json',
// options: 'stdout' or 'file' (set in config.outFile)
//writer: 'stdout',
writer: 'file',
outFile: 'C:\\pjscrape\\pjscrape_out.txt'
});
pjs.addSuite({
url: 'http://localhost:8080/multivu.portal.htm',
scraper: function() {
return [
_pjs.getText('div#customerInfo table tr:nth-child(1) td:nth-child(2)'),
_pjs.getText('div#customerInfo table tr:nth-child(1) td:nth-child(4)'),
_pjs.getText('div#customerInfo table tr:nth-child(1) td:nth-child(7) img.attributes.src')
];
}
});
I used jQuery and it seems to be working! I am using this: $("div#customerInfo table tr:nth-child(1) td:nth-child(7) img").attr("src")
Related
I am trying to use the NPM React module for Mailchimp: https://www.npmjs.com/package/react-mailchimp-form. It works great and gives you all the forms that you may need but I am struggling to style it.
It says that you can add a personalized class for CSS styling, but how will that contain styles for all elements on the form?
Currently the form looks like this:
function MailchimpForm() {
return (
<div>
<Mailchimp
action=
fields={[
{
name: 'EMAIL',
placeholder: 'Email',
type: 'email',
required: true
},
{
name: 'COMPANY',
placeholder: 'name',
type: 'text',
required: true
}
]}
// Change predetermined language
messages={
{
sending: "Sending...",
success: "Thank you for subscribing!",
error: "An unexpected internal error has occurred.",
empty: "You must write an e-mail.",
duplicate: "Too many subscribe attempts for this email address",
button: "Subscribe!"
}
}
// Add a personalized class
className='MailchimpStyle'
/>
</div>
)
}
Where MailchimpStyle is my CSS style class. Is there a way to have multiple CSS styles in a class?
The current class looks like:
.MailchimpStyle {
clear: left;
font: 200px Helvetica, Arial, sans-serif;
}
You should be able to access the elements by specifying the elements after the className in the css sheet. Example for button:
.MailchimpStyle button {
clear: left;
color: black;
background-color: white;
margin: 2px;
}
I have the following fieldset in a form Panel in the Admin Dashboard template using ExtJS 6.2:
{
xtype: 'fieldset',
layout: 'anchor',
items: [{
xtype: 'combobox',
listeners : {
select : function() {
console.log(arguments)
console.log(arguments[1].data.birth_date)
console.log(arguments[1].data.first_name)
console.log(arguments[1].data.last_name)
console.log(arguments[1].data.sex)
}
},
bind: {
store: '{patients}'
},
reference: 'patientCombo',
publishes: 'id',
fieldLabel: 'Patient Search',
displayField: 'mrn',
//anchor: '-',
// We're forcing the query to run every time by setting minChars to 0
// (default is 4)
minChars: 2,
queryParam: '0',
queryMode: 'local',
typeAhead: true,
// https://www.sencha.com/forum/showthread.php?156505-Local-combobox-with-any-match-filter
doQuery: function(queryString, forceAll) {
this.expand();
this.store.clearFilter(!forceAll);
if (!forceAll) {
this.store.filter(this.displayField, new RegExp(Ext.String.escapeRegex(queryString), 'i'));
}
}
}, {
// https://www.sencha.com/forum/showthread.php?299301-Bind-combobox-displayField-value-to-displayfield
xtype: 'displayfield',
fieldLabel: 'Selected Patient',
bind: {
html: '<p>Name: <b>{patientCombo.selection.first_name}, ' +
'{patientCombo.selection.last_name} </b></p>' +
'<p>Sex: {patientCombo.selection.sex}</p>' +
'<p>Birthdate: {patientCombo.selection.birth_date}</p>'
}
}]
},
It is working fine, but it is rendering rather strangely, as seen in the following image (I had to mask the data being presented, but the numbers are what to be selected from the combobox):
I am assuming this is a CSS issue, but have not been able to figure out what. NB: I had to copy Admin-all.css Admin-all_1.css Admin-all_2.css and Admin-all_3.css from the build/examples/admin-dashboard/classic/resources folder to the app after I created the template in order to fix a major layout issue.
Yes, this is a CSS issue. The Admin Dashboard example and its CSS have been compiled using Sencha Cmd, so the CSS file contains only the styles required by the example. Since there is no combobox in the example, the combobox styles have not been added and the combobox you inserted does not render correctly.
The only solution would be to use Sencha Cmd to recompile from source and fix the layout issue along the way, which I guess is caused by a missing requires directive.
I'm having a challenge formatting the column headings for the following fullcalendar view.
views: {
timeline7Days: {
columnFormat: 'ddd D/M',
type: 'timelineWeek',
slotDuration: '24:00',
duration: { days: 7 },
buttonText: 'resource week',
resourceEditable: false
},
Basically, it ignores the column format of 'ddd D/M' and displays each column with the title of 'Mo 16' instead of 'Mon 1/16'. Any ideas?
click here for jsbin
Thanks, your example didn't exactly work, but it helped put me on the right track.
I ended up using the following code (replaced 'span' with 'a'.
'code'
if ((view.name == 'timeline7Days') || (view.name = 'timelineMonth'))
{
$("th[data-date]").each(function()
{
$(this).find('a').text(moment($(this).data().date).format('ddd M/D'))
});
}
There is definately something wrong with columnFormat for custom view. You could try such trick:
viewRender: function( view, element ) {
if (view.name == 'timeline7Days') {
$("th[data-date]").each(function(){
$(this).find('span').text(moment($(this).data().date).format('ddd M/D'));
});
}
}
I am using kendo grid where one of the td has tooltip but for the first row my tooltip is hiding under the kendo header, Any idea how to resolve this issue i tried to make it work with tooltip-append-to-body and also tried to target with css but its not working.
config.js
{
field: 'locationComments',
title: 'Location Comments',
width: '210px',
filterable: false,
sortable: false,
template: function () {
return '<textarea class="zIndexTooltip" '+
'data-tooltip-html-unsafe="<div>{{512 - this.dataItem.locationComments.length}} characters left</div>" '+
'tooltip-trigger="{{{true: \'focus\', false: \'never\'}[this.dataItem.locationComments.length >= 0 || this.dataItem.locationComments.length == null ]}}" '+
'tooltip-placement="top" tooltip-append-to-body="true" tooltip-class = "bluefill" '+
'maxlength="512" #=gridStatus=="NOT_EDITABLE" ? "disabled" : "" # type="text" id="locationComments" name="locationComments" ng-model="this.dataItem.locationComments" ></textarea>';
}
config.css
.k-grid tr td textarea.zIndexTooltip {
z-index:100020;
}
I added below code in my config and set the z-index using .tooltip that solves my problem.
$tooltipProvider.options({
appendToBody: true
});
I'm trying to create a code button with the Froala editor which can basicly do the same thing as here on SO by pressing CNTRL+K. Now I think I have two choices.
The first one is to edit the froala-editor.js file, because Froala already has a 'code' button which only adds the <pre> tags. If I could somehow get it to also add the <code> tag, problem solved. Unfortunately I didn't get this to work.
The second option is to create a custom button, so far I have this piece of code:
$('textarea[name="description"]').editable({
//Settings here
customButtons: {
insertCode: {
title: 'Insert code',
icon: {
type: 'font',
value: 'fa fa-code'
},
callback: function() {
this.saveSelection();
if (!this.selectionInEditor()) {
this.$element.focus(); // Focus on editor if it's not.
}
var html = '<pre><code>' + this.text() + ' </code></pre>';
this.restoreSelection();
this.insertHTML(html);
this.saveUndoStep();
}
}
}
});
It works somehow, but it's buggy and produces strange html like so:
<p><code></code>
<pre><code>asdasdasdasd
</code></pre>
</p>
Any help with getting this done for either option one or two would be greatly appreciated.
If you upgrade to version 1.2.3 that is available on Github your code should work https://github.com/froala/wysiwyg-editor. It's not necessary to save/restore selection.
LATER EDIT:
Here is a jsFiddle for it http://jsfiddle.net/9pmmg1jk/.
customButtons: {
insertCode: {
title: 'Insert code',
icon: {
type: 'font',
value: 'fa fa-code'
},
callback: function() {
if (!this.selectionInEditor()) {
this.$element.focus(); // Focus on editor if it's not.
}
var html = '<code>' + (this.text() || '') + '<span class="f-marker" data-type="false" data-id="0" data-fr-verified="true"></span><span class="f-marker" data-type="true" data-id="0" data-fr-verified="true"></span></code>';
this.insertHTML(html);
this.restoreSelectionByMarkers();
this.saveUndoStep();
}
}
}