PUG with javascript - html

If I have the following piece of code
script.
function getProductParams(params) {
return JSON.parse(localStorage.getItem(params));
}
each product in products
-var getVariable = getProductParams("ids");
This piece of code doesn't work, I'm guessing that - is on server side, while script. is on clients?
How can I access a variable from localStorage in pug and use it for comparison with variables received from server.
I want to make something like this
script.
function getProductParams(params) {
return JSON.parse(localStorage.getItem(params));
}
each product in products
-var getVariable = getProductParams("ids");
-if (getVariable.includes(#{product._id}) {
// create the element in html
-} else {
- // call next product and compare if we have it
-}

The simple answer is that you can't do this. LocalStorage is exactly that - local. Your server can't directly access it unless you explicitly pass it back using some other format/method.
What your server can access easily is the cookie. If you store the data in the cookie and use cookie-parser then you can handle this list quickly. This use case is exactly why cookies exist.
Another option would be to pass the data to the server in the body of a POST request, but your question doesn't provide a lot of information as to what exactly you're doing and if this is an option or not.
It would also be much easier for you to accomplish all of the sorting and filtering in your route instead of the pug template. That way you have full request to the cookie, request body, etc. directly and you don't have to pass that down to the template too.
Then, when your template gets the list it's a really simple matter to render it:
each product in products
//create the element in html

Related

How can I get window.location.href in VuePress V2

I'm trying to display a dynamic link to a Quiz from inside my VuePress V2 documentation. Since that game will be hosted on several IP's, i need to dynamically generate that URL.
Game and documentation will always run on the same IP, but different port.
I am looking for something like this in my markup file:
# Quiz
[Click here to start the quiz](<script>document.write(window.location.href.replace('3000','8080')</script>)
I know I can't use script, but i am hoping for one of the following:
Like i can keep the protocol by calling //example.com and keeping the URL by calling /subfolder, maybe there is a way to call :8080// or sth...
I can make use of the fact that Vue Syntax is allowed. There is a way I can implement logic into .md files by writing
I have { 1+1 } hands.
That will convert to
I have 2 hands.
I can write a custom Vue component and in there reference window.location.href.

What's the lightest way to add the smallest amount of dynamics to a static HTML site?

I have a personal website that's all static html.
It works perfectly for my needs, except for one tiny thing.
I want to dynamically change a single word on a single page: the name of the current map for a game server I'm running.
I can easily run a cron job to dump the name of the map into a file in the site's html directory, call it mapname.txt. This file contains a single line of text, the name of the map.
How would I update, say, game.html to include this map name?
I would very strongly prefer to not pull in some massive framework, or something like php or javascript to accomplish this.
I want the lightest weight solution possible. Using sed is an option, although definitely a hacky one. What's the tiniest step up from static html?
If you say "dynamically", do you mean:
If the information changes ...
A) the user should see it after they have re-loaded the page?
B) the page should update without the need to reload?
For A, you can use PHP (or any other language your server supports) to read the data from the file and print it into the web page. This will happen on server side.
For B, you can use JS that queries the file and updates the HTML. This will happen on client side.
To change text there are a few way though only two appropriate methods.
First is using textContent:
document.getElementById('example').textContent = 'some example text';
Secondly is the older nodeValue however it's a bit more tricky since you have to specify the exact textNode (e.g. .firstChild):
document.getElementById('example').firstChild.nodevalue = 'some example text';
You're 100% on the mark about not using frameworks or libraries, almost everything exists without the suck.
I'm not going to test this though this is a very stripped down version of my ajax function from my web platform. Some people might scream about the Fetch API however the syntax is an absolute mess. I recommend figuring out how to standardize this function so you can use it for everything instead of making copies of the code for every instance. Mine supports both GET and POST requests.
function ajax(method, url, param_id_container_pos, id_container)
{
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.timeout = 8000;
xhr.open(method,url,true);
xhr.send(null);
xhr.onreadystatechange = function()
{
if (xhr.readyState == 4)
{
if (xhr.getResponseHeader('content-type'))
{
var type = xhr.getResponseHeader('content-type').split('/')[1];
if (type.indexOf(';') >- 1) {type = type.split(';')[0];}
}
else {var type = 'xml';}//Best guess for now.
console.log(type,xhr);
console.log(xhr.responseText);
//console.log(type,xhr.responseXML);
//document.getElementById('example').textContent = xhr.responseText;
}
}
}
You're also going to have to ensure that the url is set to an absolute path. I use path variable in my platform (see my profile for the link, wildly clean and organized code).
There are plenty of ways to make this function reusable and I highly recommend doing that. For now use the last non-curley-bracket line to update your line of text.

Changing html on a view based on if get parameter is set on Codeigniter

Before I used Codeigniter I had a page show certain html as long as the url had no get parameters and then have some of the html be replaced by another as soon as something like this is set in the url:
localhost/signup.php?success
Now my question is, what is the best way to do this in Codeigniter? Would I have to use one of those parameters on the controller's function (which I still can't get my head around)? And if so, how? Or if I just had php logic in the view like I used to do in plain PHP, what would I check for if not a get parameter? Thanks.
Too many ways to achieve this certain thing.
routes.php
extending controller and using constructor so you apply rules for every extended controller
flashdata
Before you start please read up on frameworks watch some video tutorials on how to make simple blog system etc. I myself wouldn't just jump in to concept, study up.
I mentioned flashdata and that is how you do things done (success, alert, warning bars).
By default, GET parameters are not enabled or useful in codeigniter, but URI segments work the same way. So...
If you had a controller called, signup.php and a function inside it called success, you could link to that with:
localhost/signup/success
then if you loaded the URL helper, which I always do in config/autoload.php or just with:
$this->load->helper('url');
You could say:
if($this->uri->segment(2) == 'success') {
//Show success message or load a view for it...
}else {
//The second URI segment is NOT 'success' so do something else...
}
But... codeigniter is just a framework for PHP. If it's possible in PHP, it's possible in codeigniter. You can simply go into the config/config.php file and enable query strings, but I would strongly suggest using URI segments and reading up on them as well as the URL helper.

Perl table Extract or other method for multi page table

I'm trying to extract elements from a table, I have successfully used get and HTML:TableExtract to get elements of the table. The problem is the table is multi page and navigated with an arrow button to show additional pages. How would i extract these other pages as they are not new links but I think generated with JS or such?
Specifically I am trying to extract the table under Data for this Data Range at:
http://ycharts.com/companies/GOOG/pe_ratio#series=type:company,id:GOOG,calc:pe_ratio,,id:AAPL,type:company,calc:pe_ratio,,id:AMZN,type:company,calc:pe_ratio&zoom=3&startDate=&endDate=&format=real&recessions=false
See how there is the Viewing x of 45 and the First, Previous, Next, Last button.
The rest of the table elements can be viewed with next, how would i extract these in perl?
Update::
Hi Simbabque, Thanks for the response.
So I see if you click on next it calls:
ng-click="getHistoricalData(historicalData.currentPage+1)"
Is there a way I can call this method? I tried to use click,but it is not bound a name. (JS?)
I was trying to use Mechanize::Firefox now but I feel like their must be an easy way to use regular Mech and call the function and re-read the page?
The website builds up the tables using AJAX requests. Those are a little harder to parse. You can use WWW::Mechanize to fetch the initial page and then hit the AJAX calls for the table. It helps you keep track of cookies and stuff automatically.
use strict; use warnings;
use WWW::Mechanize;
my $mech = WWW::Mechanize->new;
$mech->get('http://ycharts.com/companies/GOOG/pe_ratio#series=type:company,id:GOOG,calc:pe_ratio,,id:AAPL,type:company,calc:pe_ratio,,id:AMZN,type:company,calc:pe_ratio&zoom=3&startDate=&endDate=&format=real&recessions=false');
my $response = $mech->post(
'http://ycharts.com/companies/GOOG/pe_ratio/data_ajax',
{
startDate => '1/1/1962',
endDate => '12/3/2013',
pageNum => 4,
}
);
if ( $response->is_success ) {
print $response->decoded_content; # or whatever
} else {
die $response->status_line;
}
This is just a basic example and will not work. It gives a 403 Forbidden. Probably there is more data required. Use Firebug or a similar tool to inspect what is happening. For example, there's another call to http://ping.chartbeat.net/ping?h=ycharts.com&p=%2Fcompanies%2FGOOG%2Fpe_ratio&u=o3m6snxteynby1b8&d=ycharts.com&g=20054&n=1&f=00001&c=10.81&x=200&y=1812&o=1663&w=658&j=30&R=0&W=1&I=0&E=109&e=6&b=1903&t=usmc0fjfd1j0h87g&V=16&_ happening automatically every now and again, with varying parameters. That is most likely required to keep the session going.
This page is pretty sophisticated. This might not be the best approach.
You could also try to use WWW::Mechanize::Firefox or even Selenium to remote-operate a browser. That will be better suited as it takes care of all the AJAX stuff that is happening.
Or you could look for a public API that just hands over that data voluntarily. I bet there is one around... or just pay for a ycharts pro account and hit the download button. ;-)

symfon 1.4 load different routing.yml based on url parameter inside a plugin

I have a plugin and i need to load a different routing.yml file based on a variable in the query string.
Example:
if($request->getParameter('page'){
// use routingPage.yml
}
else{
// use another routing.yml
}
So, If the page parameter in url the url_for('#route1'), will return one url, else the same url_for('#route1') would return other url.
How can override the rouing.yml loading mechanism to do what I want?
Every application can have only one routing.yml (of course it can be overrided by other plugins).
The reason for this is quite simple: If you want to use multiple routing files (say routing1.yml and routing2.yml), and they both have a route called route1, which redirects to controller1/action and controller2/action respectively.
Maybe you would be able to switch it in the view, and go to controller1/action in the one case and controller2/action in the other. But then: when a new request arrives, and the front controller is determining which controller / action to execute: how does it now which routing.yml to use?
So I don't know exactly what you're trying to achieve, but I would go for two routes in your routing.yml, and select the route based on your view parameters.