I want to modify the CSS file using data that I get from the database. So, after the login, I am getting all the necessary data from DB and update styleSheet using insertRule/deleteRule methods then, redirect to the main page.
Login -> Theme engine page (modify css) -> home page
Theme engine page (theme.html) is an empty HTML page with one JS file (themeEngine.js) which modifies CSS file.
I checked the stylesheet in theme.html it is same as the expected result but, when it redirects to home page the CSS file goes back to its default version. The methods insertRule/deleteRule is not altering an actual file!
I tried importing themeEngine.js to every existing HTML file but in that case, default style appears (for a little amount of time, depending on the internet speed) before the theme engine starts to work and importing js file to every page is quite inconvenient.
I would like to know how can I solve this problem: having a custom style for every user. Is it possible to edit an actual CSS file using JavaScript?
Browsers can't change data on a server without explicit support from it by the server. (Imagine how long the Google homepage would survive otherwise!)
Typically you would need to pick a server-side programming language, use it to write an API, and then interact with it using Ajax.
Related
This question is a bit of an odd one, but simply refers to a Single Page Application POV - Where one page is loaded then other pages are loaded from click events, refreshing, and other events as such.
And recently I got the idea to simply pack all pages besides / (root directory) as JSON, so when pulling data from another page it can be decoded in JSON using JSON.parse(page) (JS) then put onto the page, and if there's any problem simply send a 404 message back as an example.
This was a new idea I got while building my SPA, and was curious as to if it was worth all the effort to setting up and managing.
Example from localhost/home
{
"html" : "<h1>This is the home page</h1>"
}
Example from localhost/
// add libraries like jQuery, js files
// use php to load the content div that the new data will be placed
// add stylesheets
// etc...
Which would be retrieved from JS using a GET request, then parsed, look in the JSON array for html then place it in the correct content box.
I currently am working on a Django project that allows a user to upload a file (i.e. a .dat, .json, or .tar.gz), which then gets converted into the appropriate database objects with their various relations. The file can be uploaded either by using the interface on the web browser or via curl to the appropriate REST API endpoint. The site is currently a single-page sort of site that utilizes Bootstrap.js. The URL in the browser does not change whether the user is on the home page (which displays the most recent uploads) or clicks on one of the "blackboxes" uploaded ("blackbox" being the primary database object formed from the uploaded file). Clicking on a blackbox takes the user to a page of the list of "datapoints" that are inside the blackbox.
What I now need is for each blackbox page to have its own URL that can be returned in a response when a user or script uses curl to upload a blackbox. This is the pattern I was thinking of using in the URLconf:
r'^bb/(?P<bb_id>[0-9]+)/$'
where bb is short for "blackbox". How can I systematically make each blackbox page have its own URL following this pattern, when right now each blackbox page and the home page all have the same root URL (in development, localhost:8000)?
I have made some attempts (most likely very misguided) at something like this. One thing I tried was making a separate template for a blackbox page, using the extends template tag. The frontend Javascript has a function display_points that takes in a blackbox id and renders the list of datapoints, so I tried various hacky ways to call that function (which was in a file home.html) from within the blackbox page template, but nothing was successful. One thing that I hoped would work was using jQuery $.getScript for something like this:
$.getScript('blackboxes.js', function() { //blackboxes.js is the Javascript from home.html that I copied and pasted--hacky, I know
display_points({{ bb_id }});
})
but I keep getting 404 errors from trying to use $.getScript like this despite trying different paths for the Javascript file.
Also, just in case this is an important detail for this question, the front end utilizes Clusterize.js to help load the datapoints, since the blackboxes usually have at least several thousand datapoints.
One of the key things to making something like this work was the use of the right template tags in our home.html which we renamed to base.html to be more descriptive of what the template is for. urls.py was also modified so that two different URL patterns would map to the same base view in views.py; the two patterns were a "blank" pattern (i.e. r'^$') for the default home page and a pattern to view a particular blackbox (r'^blackbox/(?P<bb_id>[0-9]+)/$'). Different views would be rendered based on whether a bb_id (blackbox id) was in the URL pattern. If none, the default home view of the recent uploads would be rendered; otherwise, the datapoints of that particular bb_id would be rendered instead. In the base.html template, the if template tag was used to see if a bb_id existed; if so, the JavaScript function display_bb would be called, which takes in the bb_id to know which datapoints to display. Otherwise, the function display_10_recent_blackboxes would be called instead.
Another issue was sending a response that contained info that could be used to find and view the blackbox that was just uploaded. Originally, the main database insertion function insertBlackboxIntoDatabase would create the Blackbox model instance first and then fill it with datapoints created from the file uploaded. However, since the response is sent before that function is called, it was necessary to refactor the upload and insertion code such that the blackbox instance would be created first so that its ID could be part of the response. The ID would then be passed to the different upload functions (based on the filetype) that each end up calling insertBlackboxIntoDatabase, which now locates the Blackbox instance based on the ID passed to it and then proceeds to create and insert the datapoints.
I have a website and want to have links to a page which has a filter function. I would like to create a link in such a way that when followed I do not simply get the destination page, but rather the page with a filter already applied.
To be more specific I am looking at the website for NetCDF CF standard names. From my page I would like to have link that would already filter e.g. for 'longitude' on the destination page.
The destination page is using javascript to apply the filter function.
Any ideas how to achieve that?
It's impossible to control a JS on a site from an external URL.
But you can do a something else: Download the data from the external site to your server via a server-side script (like php), and recreate the filters on your site in JS. But this way you should care about copyrights and you have to maintain your script if they changed the table structure they used.
This is for a new application, there's going to be several servers handling different parts (one for htmls, one as a proxy to handle https requests, and a full java backend with a database). The view server is supposed to be as simple as possible (an apache server delivering the htmls and that's it)
The idea is to use the pure htmls (with JS) that the UI designed created. Now, I thought of making the entire application using Jquery, by pulling all the dynamic data and append js files with logic on how to handle the ajax response.
My problem comes when I want to reuse htmls (the header, the footer and the menu are exactly the same for all pages). I can call, for example, /contact.html, and through ajax, call header.html, footer.html and menu.html. But that would mean 4 GET requests only for the main page (plus, rendering could be really off until all requests are finished).
I also don't want to have single full pages, because if I want to change the menu, I have to make that change in every html.
Is there some other alternative I'm missing ? If not, what is the best approach here (performance AND maintenance are equally important here)
Try http://mixer2.org/ .
Mixer2 can load html templates and convert them to java bean instance.
All the html tag and org.mixer2.xhtml.* java class are mapped one by one automatically.
So, You can load several templates such as "header.html", "footer.html", and re-use the tag snippet copy.
I have a javascript file that other people use on their site. It creates a button and loads a css file that is hosted on our server:
style.setAttribute('href', 'http://mysite.com/assets/some.css');
The user can call it in their site like so:
<script type="text/javascript" src="http://mysite.com/global.js"></script>
I want to give the user the ability to upload their own CSS file on my web app that will replace the one that I am setting in global.js.
Currently, I added a custom_css:binary column in the Users table that will hold the CSS file, but this requires the user to stay signed in on the site. I'm not sure if this is the right way to approach this or if there is a better way to do it. Also, what are some security risks to this approach?
I'm using RoR for the backend.
Any help would be great!
UPDATE 1
I'm able to store the uploaded JS file and load the custom CSS, but it's currently checking the current_user - this means the stylesheet will not be rendered for the users. How can I work around this?
I was able to find the solution myself.
There are several ways to approach this:
Add a query string to the JS src
Scrape the page for a certain element that gets generated by your script
I opted for option 1. When I detect a dynamically generated query string, I send that over to the controller in the params hash and load the css file accordingly.