const blocks = convertToRaw(editorState.getCurrentContent()).blocks;
I have noticed that my content is not coming in the blocks in mobile. I want to know the reason.
const blocks = convertToRaw(editorState.getCurrentContent()).blocks;
I have tried that in onChange function. But not bale to get the content but it working fine on web.
Related
I am facing an odd problem. I im trying to parse the following html:
The problem is that when I do
response.xpath('//div//section//div[#id="hiring-candidate-app"]')[0].extract()
I only get
'<div id="hiring-candidate-app"></div>'
instead of all the content under hiring-candidate-app.
I would like to get, for instance, inside-content, but it looks like I am not even getting that in the response. This webpage requires to be logged in, which I am.
Thanks in advance!
It looks like your Xpath is grabbing the right thing. But your issue might have to do with the '[0]' part of the call. I would remove that to get the full content of the div.
It looks like the elements in question sit on an <iframe>, and therefore live in a different context. You need to activate or switch to the context of the iframe, eg. using JavaScript to interact with an iframe and the document inside of it, e.g.
//Note: Assigning document.domain is forbidden for sandboxed iframes, i.e. on stacksnippets
//document.domain = "https://stacksnippets.net";
var ifrm = document.getElementById("myFrame");
// reference to iframe's window
//var win = ifrm.contentWindow;
// reference to document in iframe
var doc = ifrm.contentDocument ? ifrm.contentDocument : ifrm.contentWindow.document;
// reference an element via css selector in iframe
//var form = doc.getElementById('body > div > div.message');
// reference an element via xpat in iframe
var xpathResult = doc.evaluate("/html/body/div/div[1]", doc, null, XPathResult.ANY_TYPE, null);
<iframe id="myFrame" src="https://stacksnippets.net" style="height:380px;width:100%"></iframe>
However, as you can see when you run the snipped, cross-document interactions are only possible if the documents have the same origin. There are other, more involved methods like the postMessage method that provide the means of interacting cross-domain.
Here is my scenario: On my main view I am loading a list of items. Each item has an imageURL property. I am binding an Image component to the ImageURL property. Everything works well, but the image takes an extra second or two to load during which time the Image component is collapsed. Once the image is loaded, the Image component is displayed properly. This creates an undesirable shift on the page as the image is rendered.
The same images are going to be rendered on 2 other views.
What is the best practice to handle this scenario? I tried loading the base 64 string instead of the image url, which worked, but it slowed down the loading of the initial view significantly.
How can I pre-fetch the images and reuse them as I navigate between the views? I was looking at the image-cache module which seems to be addressing the exact scenario, but the documentation is very vague and the only example I found (https://github.com/telerik/nativescript-sample-cuteness/blob/master/nativescript-sample-cuteness/app/reddit-app-view-model.js) did not really address the same scenario. If I understood the code correctly, this is more about the virtual scrolling. In my case, I will have only 2-3 items, so the scrolling is not really a concern.
I would appreciate any advise.
Thank you.
Have you tried this?
https://github.com/VideoSpike/nativescript-web-image-cache
You will likely want to use a community plugin for this. You can also take a look at this:
https://docs.nativescript.org/cookbook/ui/image-cache
So after some research I came up with a solution that works for me. Here is what I did:
When the app start I created a global variable that contained a list of observable objects
then I made the http call to get all the objects and load them into the global variable
In the view I displayed the image as (the image is part of a Repeater item template):
<Image loaded="imageLoaded" />
in the js file I handled the imageLoaded events as:
var imageSource = require("image-source");
function imageLoaded(args) {
var img = args.object;
var bc = img.bindingContext;
if (bc.Loaded) {
img.imageSource = bc.ImageSource;
} else {
imageSource.fromUrl(bc.ImageURL).then(function (iSource) {
img.imageSource = iSource;
bc.set('ImageSource', iSource);
bc.set('Loaded', true);
});
}
}
So, after the initial load I am saving the imageSource as part of the global variable and on every other page I am getting it from there with the fallback of loading it from the URL is the image source is not available for this item.
I know this may raise some concerns about the amount of memory I am using to store the images, but since in my case, I am talking about no more than 2-3 images, I thought that this approach would not cause any memory issues.
I would love to hear any feedback on how to make this approach more efficient or if there is a better approach altogether.
You could use the nativescript-fresco plugin-in. It is an {N} plugin that is wrapping the popular Fresco library for managing images on Android. The plugin exposes functionality like: setting fade-in length, placehdler images, error images (when download is unsuccessful), corner rounding, dinamic sizing via aspect ration etc. for the full list of the advanced attributes you can refer this section of the readme. Also the plugin exposes some useful events that you can use to add custom logic when images are being retrieved from remote source.
In order to use the plugin simply initialize it in the onLaunch event of the application and call the .initialize() function:
var application = require("application");
var fresco = require("nativescript-fresco");
if (application.android) {
application.onLaunch = function (intent) {
fresco.initialize();
};
}
after that simply place the FrescoDrawee somewhere in your page and set its imageUri:
<Page
xmlns="http://www.nativescript.org/tns.xsd"
xmlns:nativescript-fresco="nativescript-fresco">
<nativescript-fresco:FrescoDrawee width="250" height="250"
imageUri="<uri-to-a-photo-from-the-web-or-a-local-resource>"/>
</Page>
Ok, this idea might seem quite a bit crazy and it kindo' is (at least for me at my level).
I have a fairly standarad rails app (some content pages, a blog, a news block, some authentication). And I want to make it into a single page app.
What I want to accomplish is:
All the pages are fetched through AJAX like when using turbolinks, except that the AJAX returns only the view part (the yield part in the layout) withought the layout itself, which stays the same (less data in the responces, quicker render and load time).
The pages are mostly just static html with AngularJS markup so not much to process.
All the actual data is loaded separately through JSON and populated in the view.
Also the url and the page title get changed accordingly.
I've been thinking about this concept for quite a while and I just can't seem to come up with a solution. At this point I've got to some ideas on how this actualy might be done along with some problems I can't pass. Any ideas or solutions are greatly appreciated. Or might be I've just gone crazy and 3 small requests to load a page are worse then I big that needs all the rendering done on server side.
So, here's my idea and known problems.
When user first visits the app, the view template with angular markup is rendered regularly and the second request comes from the Angular Resource.
Then on ngClick on any link that adress is sent to ngInclude of the content wrapper.
How do I bind that onClick on any link and how can I exclude certain links from that bind (e.g. links to external authentication services)?
How do I tell the server not to render the layout if the request is comming from Angular? I though about adding a parameter to the request, but there might be a better idea.
When ngInclude gets the requested template, it fires the ngInit functions of the controllers (usually a single one) in that template and gets the data from the server as JSON (along with the proper page title).
Angular populates the template with the received data, sets the browser url to the url of the link and sets the page title to what it just got.
How do I change the page title and the page url? The title can be changed using jQuery, but is there a way through Angular itself?
Again, I keep thinking about some kind of animation to make this change more fancy.
Profit!
So. What do you guys think?
OK, in case enyone ever finds this idea worth thinking about.
The key can be solved as follows.
Server-side decision of whether to render the view or not.
Use a param in the ngInclude and set the layout: false in the controller if that param is present.
Have not found an easier way.
Client-side binding all links except those that have a particular class no-ajax
Here's a directive that does it.
App.directive('allClicks', function($parse) {
return {
restrict: 'A',
transclude: true,
replace: true,
link: function(scope, element, attrs) {
var $a = element.find('a').not($('a.no-ajax')),
fn = $parse(attrs['allLinks']);
$a.on('click', function(event) {
event.preventDefault();
scope.$apply(function() {
var $this = angular.element(event.target);
fn(scope, {
$event: event,
$href: $this.attr('href'),
$link: $this
});
});
});
}
};
})
And then use it on some wrapper div or body tag like <body ng-controller="WrapperCtrl" all-links="ajaxLink($href)"> and then in your content div do <div id="content" ng-include="current_page_template">
In your angular controller set the current_page template to the document.URL and implement that ajaxLink function.
$scope.ajaxLink = function(path) {
$scope.current_page_template = path+"?nolayout=true";
}
And then when you get your JSON with your data from the server don't forget to use history.pushState to set the url line and document.title = to setr the title.
I'm working on a website where the homepage has a rotating banner. When the page is loaded, an AJAX request is performed to retrieve the rest of the banners (each of which has a 960-pixel wide image). I toyed with the idea of loading the page normally with all the banner HTML loaded, but the target audience of the website are not always guaranteed to be on a blazing connection, and I wanted the homepage to load quickly. Plus, I didn't want conflicting H1 tags. The page in question is the landing page at http://www.gosihanoukville.com/
If you're on a slowish connection, the banners will load and start moving (rotating) before the background images are finished loading. I'm wondering if there is a way to detect if an image has fully downloaded before I have the script start moving the banners.
I'm not including code here, as it is best seen on the website mentioned above. The JS file used is 'landing.js'
Thanks for any help - this is driving me crazy.
I would normally do this:
var imagesToLoad = [];
var imagesLoaded = 0;
// Register this handler using whatever framework you like
var whenImageLoaded = function(){
if (++imagesLoaded == imagesToLoad.length){
// Start moving the banners.
}
}
Good day,
I was wondering if there is a way to make Ajax move on to the next code segment only when all the elements included in the server-side code page are fully loaded. When the retrieved data is text-only there’s no problem, but sometimes there are photos included.
This is part of the code I have been using:
xajx.onreadystatechange = function(){
if(xajx.readyState==4){
document.all.div1.innerHTML = xajx.responseText;
document.all.div1.style.display = “”;
}
}
The thing is that when the response is retrieved (readyState set to 4) and div1 is displayed, the Photo has not been completely loaded yet, so actually the user can see the process of the picture slowly appearing, as he would in any other “normal” case. What I want to do is making div1 available for display only once all the components are fully loaded while meanwhile the system does its stuff in the background. Before Ajax I used hidden iframes like everybody, so I could enclose an onload event handler within the iframe tag (or in an external script), so div1 would appear only after the iframe has fully loaded, photos included.
Any idea?
You can use the 'onload' event on images themselves. You'll need to work out how to attach that event when you are downloading the code dynamically as in your case.