I have developed web app using ReactJS when i navigate one page to another page the header text should be changed based url (i created header component and i did import in all pages) how to achieve this
if you are using client-side use javascript to handle it:
componentDidUpdate(){
var path= window.location.pathname; // lets imaging that url is "/home/x"
var pathArray = path.split( '/' );
var loc= pathArray[2];//number of part of url that is changing, here it rerurns x
if(loc === "product"){ // if x be "product" it returns true
//do somting
}
}
if using server-side rendering instead of using "var path= window.location.pathname;" it's better to save URL path in store and use it in your component.
Related
I can't figure out how to programatically add a view into a layout or page.
I need to add views at runtime without using static xml declaration since i need to fetch them from an http requested object... . I didn't find useful informations in the docs.
Anyone knows how to do?
I think you meant to dynamically add some view / controls to the page rather than to navigate into another page.
If so, you just need to add some controls into one of the layouts in your page (only containers [=layouts] can have multiple children.
so, your code (viewmodel/page controller) would look something like:
var layout = page.getViewById("Mycontainer");
// create dynamic content
var label = new Label();
label.text = "dynamic";
// connect to live view
layout.addChild(label)
In addition to having a page included inside your app (normal); you download the xml, css, & js to another directory and then navigate to it by then doing something like page.navigate('downloaded/page-name');
you can also do
var factoryFunc = function () {
var label = new labelModule.Label();
label.text = "Hello, world!";
var page = new pagesModule.Page();
page.content = label;
return page;
};
topmost.navigate(factoryFunc);
https://docs.nativescript.org/navigation#navigate-with-factory-function
You should check out this thread on the {N} forum.
The question is about dynamically loading a page and module from a remote server. The (possible) solution is given in this thread.
I am trying to create a fire-bug like extension for firefox which is actually dev-tool extension. I have registered httpRequestObserver to observe http-on-examine-response event. I have a listener with below method implemented.
onDataAvailable: function(request, context, inputStream, offset, count) {
//I get the request URL using request.name
var responseData = getResponseData(); // gets data from inputStream
// Now I need to render this responseData into panel's iframe
}
I have created the above script as a module and included it in main.js. I could not find out how the data from this script could be sent to the script included in panel's HTML.
I read about Content Script and port.emit & port.on but I think Content Script won't come into picture since I don't want to touch the actual page's DOM. Want I want to do is intercept the HTTP response and log it into devtool panel.
Thanks in advance.
Take the response string received and make a data url out of it. Then with your content script do a document.write(dataurl) or do window.location = dataurl.
How to make dataurl:
var responseData = getResponseData();
var dataurl = 'data:text/html,' + encodeURIComponent(responseData);
I hear that widgets in sdk have a content option where you can specify this data url:
'content' option in panel, which would enable you to specify HTML content directly, as you can with a widget, as a result of which I've raised bug 692675.
Can also be done like this:
var HTML = '<html><p>Hi there</p></html>';
var panel = require('panel').Panel({
contentURL: "data:text/html, " + encodeURIComponent(HTML)
});
panel.show();
I have SAPUI5 application where I am using Shell. I have different views in my Shell and I am able to navigate from one view to another. The problem is that I don't know how can I create or change URL adress to each view. I need to set URL adresses to be able to use "back" button in a browser. I want to add unique URL adress to each view inside my Shell to use "back" and "forward" buttons.
Thanks!
Take a look at this simple sap.ui.core.routing.Router example it shows how to easily set up and use routes and a hash changer with an app Shell container.
sap.ui.core.routing is a javascript routes utilty, it handles URL changes and dispatches control based on pattern logic to views and event handlers, part of routing is HashChanger and History functionality.
if you are using the desktop shell this routing example with sap.ui.ux3.Shell
A lot of examples use jQuery.sap.history.js IMO it doesn't properly support bookmarks and has limited features which means you have to use it with other techniques
Unfortunately, History API presents in modern browsers only. For IE6+ I recommend you to use "hashchange" event of window:
function router(){
var sViewName = window.location.hash.slice(1),
oView = sap.ui.getCore().byId(sViewName) || new sap.ui.view.XMLView({id : sViewName, viewName : sViewName});
sap.ui.getCore().byId("uxShell").setContent(oView);
return false;
}
if("onhashchange" in window){
if(window.attachEvent){ //IE8
attachEvent('onhashchange', router);
} else if(window.addEventListener){ //IE9+, Chrome, Opera, Firefox
addEventListener('hashchange', router);
}
} else { //IE6-7
var oldHref = window.location.hash;
setInterval(function(){
var newHref = window.location.hash;
if(oldHref !== newHref){
oldHref = newHref;
router();
}
}, 100);
}
But to make it work you need to set href property to navigation items like this: #catalog.viewName
I use ajax to render a content page with a Facebook Like Button plugin in it.
The problem is that when the user clics Like, Facebook will extract meta info but I don't know how to assign the meta with ajax.
I tried using append to head int FB.init but it seems to not work and the update isn't reflected when users like the page on Facebook
$('head').append("<meta property="og:title" content="The Rock"/>');
The problem is that facebook like will extract meta info but I don't know how to assign the meta with ajax.
I tried use append to head int FB.init but it seems not work.
Of course this does not work, because Facebook’s scraper requests your URLs from your server – and does not care about what the DOM might currently look like in any user’s browser.
You can not add Open Graph meta data client-side.
Actually you can use such script:
/// Append Meta tags
function setMT(metaName, name, value) {
var t = 'meta['+metaName+'='+name+']';
var mt = $(t);
if (mt.length === 0) {
t = '<meta '+metaName+'="'+name+'" />';
mt = $(t).appendTo('head');
}
mt.attr('content', value);
}
and call this function from body:
setMT('property', 'og:title', 'Title for Facebook');
I have similar on the News Site at http://www.livepage.info
be careful with using '.append()'.
According to the JQuery Docs, this method has a move effect (reads from source, copies to destination and removes the source).
A theoretical way is something like this:
headObj = $("head");
keywordObj = $(headObj).find("meta[name='keywords']");
newKeywords = $(keywordObj).attr("content");
newKeywords += myKeywords;
$(keywordObj).attr("content", newKeywords);
Download and install the plugin FireBug for browser FireFox, so you can check the changes at runtime.
I have a static route for
/public/slides/lecture1.html#!3
which displays the third div element (other div HTMLelements will have display:none;) of lecture1.html.
I use Express app.use(express.static(WEBROOT)); and everything works fine. But I want to be able to make that slide AJAX Crawable so I want to react on request which looks like this:
/public/slides/lecture1.html?_escaped_fragment_=3
and return single page with only that one div element - so that Google would index texts from slide 3 in lecture1.html properly.
How do I do that using Express?
Is it possible to add GET request handler on link which is already served by express.static?
Thanks
Check out https://github.com/OptimalBits/Crawlme. It is an express middleware that handles this automatically. Just do this and you're ajax-crawlable:
var
express = require('express'),
http = require('http'),
crawlme = require('crawlme');
var app = express()
.use(crawlme())
.use(express.static(__dirname + '/webroot'));
http.createServer(app).listen(80);
As we talked on IRC, this wouldn't be in the "static route" category (I mean you won't be serving this with express.static).
What you would do is create an Express route and render that file based on your query variables:
app.get('/lecture1.html', function (req, res) {
if (req.query._escaped_fragment_ == 3) {
// .. do something..
} else {
// render lecture1.html here
// you can just rename the file lecture1.ejs
// move it to the views directory
// and then render it like res.render('lecture1.ejs');
}
});
you can use the req.query property to access the query string in an express request.