When i use goog.dom.createDom('input', 'class': 'xyz') in my js file, the style applied to my class is not applied when run in firefox while it works in chrome.Here is the code:
var checkBox = goog.dom.createDom('input', {'type': 'checkbox'});
var checkBoxDiv = goog.dom.createDom('div', {'class': 'checkbox'}, checkBox);
Your CSS must be wrong. Your code will give you the following without fail, which I'm sure you can see by debugging:
<div class="checkbox"><input type="checkbox"></div>
Related
I need to call a view in a Laravel Controller, with parameters and with Anchor Tag.
I have this code in my controller:
return view('plans/editPlanView',
['plan' => $plan,
'patient' => $patient,
'aliments'=>$aliments, 'menu'=>$menu, 'tabName'=>$tabName]);
But i need to add an Anchor tag to land in a specific section of the page.
I can't use
return Redirect::to(URL::previous() . "#whatever");
proposed in other posts because i need to pass some parameters.
I think there are some base problem, trying with console this:
$('html, body').animate({
scrollTop: $('#whatever').offset().top
}, 1000);
scrolling to the desired section does not work.
it seems the page makes a small snap but always returns to the top.
Update
I have found the cause of the problem. At the bottom of the blade page I have the following code, without it the anchor tag works fine. Adding it the page makes a small scroll to return to the head. I need to use the datepicker, how can I fix the problem and get the anchor tag to work?
#push('scripts')
<script type="text/javascript">
$(document).ready(function () {
$('.date').datepicker({
firstDayOfWeek: 1,
weekDayFormat: 'narrow',
inputFormat: 'd/M/y',
outputFormat: 'd/M/y',
markup: 'bootstrap4',
theme: 'bootstrap',
modal: false
});
});
</script>
#endpush
You can create the method showPage() in your contoller for example TestController
public function showPage(Request $request)
{
$plan = $request->plan;
...
return view('plans/editPlanView', [
'plan' => $plan,
'patient' => $patient,
'aliments'=>$aliments, 'menu'=>$menu, 'tabName'=>$tabName
]);
}
Then create a route for rendering that view
Route::get('/someurl', 'TestController#showPage')->name('show-page');
And then in your methods you can use something like that:
$url = URL::route('show-page', ['#whatever']);
return Redirect::to($url)
I found a workaround, I added the disable attribute to the date input, in doing so, when the datepicker is initialized, the page does not scroll up. Then, as a last javascript statement I re-enabled the fields:
$('.date').prop("disabled", false);
I have the following div
<div data-dmid="product-detail-page" itemscope="" itemtype="http://schema.org/Product" itemid="3600542198158">
from which I would like to extract the itemid -> 3600542198158
I was using the following Xpath which does however not return any value:
//div[#data-dmid='product-detail-page']/#itemid
Could please someone advise how to built the Xpath correctly for it
#
Unfortunately I have to renew my question.
I was looking for the code with Firefox inspection tool.
Looking at the html source code which is different to the output with the inspection tool I have the following part which will be interesting:
<div class="onCanvas content-with-footer">
<div id="container-main" class="content-main">
<div data-dmid="uvp-banner-container" style="height: 54px; width: 100%"></div>
<script>
document.addEventListener("DOMContentLoaded", function() {
var props = {};
ReactInit.initReactComponent("contentViewService", "UvpBannerContainer", props, document.querySelector("[data-dmid='uvp-banner-container']"));
});
</script>
<div id="react-product-detail-page"></div>
<script>
var props = {
gtin: 3600542198158,
locale: dmSettings.localeLanguage
};
ReactInit.initReactComponent("product-detail-page", "ProductDetailPage", props, document.getElementById("react-product-detail-page"));
$(document).ready(function () {
var props = {
locale: dmSettings.localeLanguage
};
ReactInit.initReactComponent("product-detail-page", "PriceLegend", props, document.getElementById("react-price-legend"));
});
</script>
I would need to get the gtin (plain number) of the second script.
I would like to use the xpath in a scraping tool why only plain xpath code will work for me.
Thank you again and please excuse my previous not fully correct question.
I am assuming that you don't mind JavaScript and jQuery since you didn't specify:
var itemId = $("div[data-dmid]").attr("itemid");
console.log(itemId);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-dmid="product-detail-page" itemscope="" itemtype="http://schema.org/Product" itemid="3600542198158">
I got the answer with help of another post on Stackoverflow.
Reading a javascript variable's value
The correct code for my updated question is
substring-before(substring-after(//div[#class='onCanvas content-with-footer']//script[2][contains(.,'gtin')]/text(), "gtin: "), ",")
Thank you for any help.
I try to include an HTML-View in a XML-View which actually shouldn't be a problem. Unfortunately the content of the HTML-View is not added to the site. An error is not thrown.
In the XML-View I have a placeholder for the HTML-View:
<html:div
id="helptext">
</html:div>
In the controller of the XML-View I instantiate the HTML-View and add it to the placeholder:
var oController = sap.ui.controller("dividendgrowthtools.view.textviews.dividendcomparehelpDE");
var oTextView = sap.ui.view({
viewName: "dividendgrowthtools.view.textviews.dividendcomparehelpDE",
controller: oController,
type: sap.ui.core.mvc.ViewType.HTML
});
var oHelpText = this.getView().byId("helptext");
oTextView.placeAt(oHelpTextDiv.sId);
That's the content of the HTML-View:
<template data-controller-name="dividendgrowthtools.view.textviews.dividendcomparehelpDE">
<p>This is a test.</p>
</template>
Does anybody have an idea what the problem could be?
you need to be aware of the functionality of this.getView().byId();
SAPUI5 generates another ID then the one you specified in the XML-View("helptext") see:
So you need to pass the right ID. You need to be aware that these ID could possibily change, when you refactor the XML structure.
I would recommend you, not to use HTML elements in SAPUI5.
Some helpful links:
https://scn.sap.com/thread/3551589
https://plnkr.co/edit/wDBpQuxIWd0WGOoyulN0?p=preview (made by me)PLnkr Link
In previous versions(3.5) of CKEditor I was able to enter:
<br style="page-break-after: always;" />
However, after upgrading to 4.4.5, I noticed that the RTE no longer shows this HTML source, from the Database column, and so if one resaves the form with this RTE on it, then NULL is saved back to the database. It seems that CKEditor is stripping this HTML out for some reason.
How can I prevent this?
Many thanks.
EDIT 1
Discovered this to be added to config.js:
config.allowedContent = 'br {page-break-after}';
But does not work, although it should do....
EDIT 2
Link for above config setting
EDIT 3
I can try to enter the above HTML, in HTML Source View, but if I toggle the HTML Source button, and go back to Source View, it is now gone. So CKEditor is stripping this HTML out for some reason.
EDIT 4
Removed as now irrelevant
EDIT 5
Looking at the Browser source I see:
<textarea class="RuleRTE" cols="20" id="myCk" rows="2"><br style="page-break-after: always;" /> </textarea>
So clearly the data is there and being retrieved, but being converted which prevents me seeing it in the HTML Source view.
I have now found this is irrelevant as <p>test</p> test fine and it gets converted as well, I guess to prevent it being rendered like normal HTML in the page. So it seems the CKEditor does not like the tag ???
EDIT 6:
Removed as now irrelevant to question.
EDIT 7:
Debug JS:
<script type="text/javascript" language="javascript">
var editor = CKEDITOR.replace('Content', {
allowedContent: 'br[*]'
});
editor.on('instanceReady', function () {
console.log(editor.filter.allowedContent);
});
Results seem to show allowedContent is working fine, but BR element still invisible.
[Object, Object]
0: Object attributes: true
classes: null
elements: Object br: true
I suspect that there's a syntax or usage error with the way you're attempting to modify the allowedContent setting. Try doing something more simple along these lines: (do it in code rather than the config file)
var your_ck_editor = CKEDITOR.replace( 'your_ck_element_id', {
allowedContent: 'br[*]'
} );
The br[*] setting should allow any <br /> element with any attribute.
For troubleshooting purposes try this:
console.log( your_ck_editor.filter.allowedContent );
If this code does not work for you please post all the code that you use to set up your CKEditor as well as the output of your console.log call.
In my application I have an item called block which can contain and be contained by other block items. To keep things simple, lets say these blocks can be infinitely nested.
I want to know if I can create recursive views corresponding to the blocks that are also nested. Each view will be rendered as a DIV containing its children and residing inside its parent DIV?
While the views are similar in terms of what they can contain, their actual content that will be obtained from the server can be different. Here is an example data:
App.blocks.set('content',[
Em.Object.create({title:"One", id:"1", is_inside:"0"}),
Em.Object.create({title:"Two", id:"2", is_inside:"1"}),
Em.Object.create({title:"Three", id:"3", is_inside:"0"}),
Em.Object.create({title:"Four", id:"4", is_inside:"3"}),
Em.Object.create({title:"Five", id:"5", is_inside:"4"})
])
In this example, block one would be rendered as root (assume 0 is root which means not inside any other block). Block two would be rendered inside block one and so on.
I noticed a similar question has been asked a while ago, but I am not satisfied with the answer there. I feel there must be an elegant way to achieve this in Ember.
Can you point me to an example of how this can be done in Ember? If not, any advice that could help me make progress and refine my question would also be very appreciated.
Edit: Here is a jsFiddle that I made with some initial data that we could use as starting point. With your help hopefully I can make those DIVs nested based on their is_inside relation. I have updated the post to use this simpler example.
Take this as a hint, I think the layout property of Ember.Viewcomes in rescue...It works this way
App.myView = Ember.View.extend({
layoutName: "parent",
templateName: "child"
})
<script type="text/handlebars" data-template-name="parent">
Who's your Daddy ??<br> {{yield}} <br> ######
</script>
<script type="text/handlebars" data-template-name="child">
I'm your son !
</script>
Will result in the following html
<div id="ember1" class="ember-view">
Who's your Daddy?
<div id="ember-2" class="ember-view">
I'm your son !
</div>
######
</div>
Model your data first, then use for or while loops in js to create views, I don't think using handlebar helpers for recursion is a good idea.
Edited Section
There can be a better way than this...but check this out, and here you are not limiting the nesting to one level, right ?
App.MainView = Ember.View.extend({
templateName: "main"
})
App.View1 = Ember.View.extend({
id: 1,
templateName: "view1",
parentId: "main"
})
App.View2 = Ember.View.extend({
id: 2,
templateName: "view2",
parentId: 1
})
App.View3 = Ember.View.extend({
id: 3,
templateName: "view3",
parentId: 1
})
App.View4 = Ember.View.extend({
id: 4,
templateName: "view4",
parentId: 3
})
App.View5 = Ember.View.extend({
id: 5,
templateName: "view5",
parentId: "main"
})
App.viewArray = [App.View1, App.View2, App.View3, App.View4, App.View5];
App.viewArray.forEach(view, function(){
parentView = App.viewArray.findProperty("id", view.get('parentId'))
view.set("layoutName", parentView.get('templateName'))
})