I am trying to embed a timeline on a web site and I have the following problem:
The TimelineJS doesn't seem to work when the containing div is nested in another div. To avoid this problem I have created an iframe and put the entire timeline into another .html file which works fine for displaying the timeline. Now, I want to filter in and out some timeline content based on category selection made by the user. If the external html containing the timeline calls timeline.js to load the content, and the category selection event handling is done in a index.js file called by the index.html (which contains the iframe and other elements) how can I call the reload function in timeline.js if the events are being handled in the index.js? In other words, how can my index.js know anything about timeline.js, call a method defined in that file and still have the changes applied to the content of the timeline.html?
I am pretty new to javascript and I seem to miss quite a bit of information required to solve the problem.
I had the same issue and didn't find a solution.
I finally tried another approach :
1°) Put the timeline directive (my project uses AngularJS) into a view 'views/timeline.html'
<div id="my-timeline" timeline-js data="timelineData" height="height"></div>
2°) Include this view in the main view
<div ng-include="url"></div>
3°) Reload the include each time you need in the controller, and change the url to 'forget' the old data
var newUrl = function() {
$scope.url = null;
var ran = Math.random();
$scope.url = 'views/timeline.html?r='+ran;
};
I'm aware it's far to be perfect in terms of memory, but it's all I found
Related
I don't know much javascript so I'm pretty much copy-pasting. I'm making a website and there is a navigation sidebar. I have this script to toggle a class the sets display to none.
$(document).ready(function () {
$("#sidebar-toggle").on("click", function () {
$("aside.navigation").toggleClass("no-sidebar");
});
});
I know the code works because it functions perfectly on a select few pages - views that happen to be defined in a specific Flask blueprint. Not on any other page.
I've checked that the structure doesn't change between pages (maybe I made a jinja template mistake) and it doesn't - all referenced elements exist and have the correct ids and classes. The javascript file containing the script above is loaded on every page and viewing it through the browser shows the correct code.
I'm hoping this can be resolved by a misunderstanding in how js files work and/or the syntax above. If anything other info would help, lmk.
Okay the non-functioning pages were throwing a type error that referenced some code for modals (that was also in main.js) above the sidebar code. The problem was solved by moving the sidebar code above the problematic code.
Now I need to figure out why a11y dialogs are throwing an error on some pages and not others...
Edit: Solved that too.
In my case base.js contained the following code:
var cast_crew_modal = document.getElementById('cast-crew-dialog')
var cast_crew_dialog = new A11yDialog(cast_crew_modal)
cast_crew_dialog.on('show', function (cast_crew_modal, cast_crew_trigger) {
console.log(cast_crew_modal)
console.log(cast_crew_trigger)
})
Great except the cast_crew_modal only exists in Flask views defined in the Production blueprint. On all other pages, that first variable gets set as none/null because it can't find #cast-crew-dialog. Hence why the original sidebar code only worked on production pages.
I have designed an htm page which has javascript and all has worked well,
but when I tried to put some of the div sections of the page inside a template which would be read by
angularjs application all the element which require javascript to display properly were not working
properly or displaying the element properly.
I later discorvered that angular has its own jquery etc. But the problem is that I am using some
elements which are not custom made and making changes to the code may make the whole program fail.
What can I do to get all the sections to work properly?
This is the angular section
var app = angular.module("app",[]);
app.controller("controls",["$scope", function($scope){
}]);
app.directive("myTemplate", function(){
return{
templateUrl: "template_file_with_div_section.htm"
};
});
HTM SECTION
<div ng-controller="controls">
<div my-template></div>
</div>
Some of the sections are using datatable etc
some the scripts i am using are
<script src="angular/angular.js"></script>
1. jquery.min.js
2. tables/jquery-datatable.js
3. jquery-datatable/jquery.dataTables.js
4. jquery-datatable/skin/bootstrap/js/dataTables.bootstrap.js
5. jquery-datatable/extensions/export/dataTables.buttons.min.js
there are over fifty different jquery scripts
UPDATE
When i enter the template's url through http://url/#template_name
The template shows up in the web page so it shows that it works fine but there are sections within the template which would perform some operations (e.g. sorting etc) this sections relies on javascript which are in the main page.
These are the sections which are not working at all.
When I put the angular script after the table script. The template did not show up,
But when I put the angular script after the table script as shown above, the template showed up but the script where not working at all
It is little hard to guess what is exactly happening.
But, here are some things that you might want to consider:
Make sure you have defined ng-app in your HTML.
Also, the other part of the application (like you are saying sections) should come under your ng-app.
Make sure that all your scripts are added and loaded properly.
Each page has binding to certain controller or directive with appropriate template URL.
Hope that helps!
I am trying to automatically download a plugin on my wordpress site by implementing phantomJs. For some reason, I cannot seem access the download button (shown below)
This is the HTML code to the image (with domain sensitive information blurred out for security purposes)
So far, I have tried accessing this element by using the following code:
function() {
page.evaluate(function() {
let mainLink = document.querySelector('a[data-slug="better-wp-security"]')
mainLink.click()
})
}
Some things to mention:
This function, as it is part of a larger file, will NOT execute until the page has finished loading.
PhantomJS is executing correctly, there are no problems with permissions
The script before-hand is properly accessing the install plugins page, which I verified by capturing screenshots before trying to click.
I have defined click earlier int he file, it works perfectly.
Any ideas how I can accomplish this? Thanks all!
ADDED INFORMATION:
It seems as if the path from the main div element is as follows:
#the-list .plugin-card plugin-card-better-wp-security .plugin-card-top .action-links .plugin-action-buttons .install-now button
I imagine the solution to this question has something to do with this sequence.
I was able to accomplish this by now going after the data-slug attribute, but rather going after the href element itself. Although I can't generate my own wponce value without the use of the Rest API, I was able to search the document to find an href that contained certain parts of the url. This is the final code below:
document.querySelector('a[href*="action=install-plugin&plugin=better-wp-security"]').click()
That's it! Simple and easy!
I tried to find solution for the past 3 days but no luck.
My requirement is to load highcharts which has some data for analysis. I have to load 50 such charts with each chart holding a million points. To get rid of the browser collapse, I decided to load 10 charts at once and give a show more button at the bottom of the page which onclick should load another 10 charts on the same page below the existing 10.
Issue:
No idea on how to append a jade file to a div on a button click
to the existing jade file.
What i did:
I have two jade file named jade1to10.jade and jade11to20.jade with
there respective .js(angular) files for charts configurations.
I can load them individually on different tabs.
I tried Include option in jade but that loads on the compile
time and want the second page to load/append to the parent jade after
the button click.
I am using angular controllers in the jade to load charts.
Please give your inputs to find a fix.
Thanks in advance.
OK, I think I got it.
Actually you need to use ajax. When the user clicks the button, then send a ajax request to the server and return the charts in html form to you. Finally just insert them into your div.
To compile the file from jade form into html form, See the following example.
var jade = require('jade')
var file = fs.... //onefile, must be a string.
var template = jade.compile(file)
var result = template(locals) //the locals is a object which contains the variables you want to pass to the template.
....
app('/',function(req,res){
res.send(result)
)
You can also just pass the data to the client, and transform them into which you want then insert into the div. That can reduce the network consumption.
Hope it will be helpful.
I am using backbone.js and building a single page application, inspired by trello.com ..
I want to know how you show many pages on top of the original page. As in how you architect it.
How do you use Backbone routers to achieve this?
For example in trello
Basepage
And then now on top of the base page you have dynamic content
like a cards detail
like a boards details
How could i architecture something like this?
I've done a couple of approaches so far in projects with 50+ pages and they both scaled well. I did not use backbone.js but the approaches are straight forward and do not require a framework to learn other than I used jQuery for selectors.
Both of them have in common creating a single overlay window that you can pull in content into the window. I wrote mine from scratch but you could easily use jQuery UI dialog. The two approaches only differ in how the content is pulled. Also, using the information on the link is all you should need to pull in the "module" or overlay content as your rule. Do not need tons of scripts loaded in to start your app. Have the modules pull in the behavior for you.
Option 1) Use the jQuery load method to pull content from stand-alone web pages by using a placeholder variable like so:
var $ph = $('<div />');
$ph.load(URL); // loads gui of remote URL + executes any script that URL has
The $ph var now contains all the GUI loaded in from the external URL so you can use selector on it to extract the particular HTML and place it into your DOM or overlay as you need.
Here is an example of the stand-alone HTML output:
<div class="module">
<a class="link">click me</a>
</div>
<script>
(function(){
// put any private vars here
$('.module .link').click(function(){
// do something
});
})();
</script>
If you remove() or destroy the dom inside the overlay through jQuery, it will automatically remove all the events directly assigned aka "bind" and "unbind" them but using "live" or "delegate" you will need to worry about "die" and "undelegate" etc. just doing die('.namespace').live('click.namespace') will ensure is cleaned.
Here is an example of this on one of my websites -> http://www.kitgui.com/docs
But the better example is within the customer section as the docs is fairly simple using hash history.
2) Using an iframe inside your overlay and assigning it a URL.
This is the easiest option but is a little slower because each page called has to have a full standalone behavior and dependencies with the iframe. Also you must worry about sizing the frame etc. unless you have a fixed overlay window.
You must have a loader overlay your iframe while its loading then have the iframe talk the parent to tell it its done loading and hide the loader.
I did this for several sites but one of them is a site in development you can see here to get the code ->
http://dev.zipstory.com (sign in and go to my zipstory and click "group" settings etc to see this, just view source to see how I did this as its all there)
The thing about iframes is you should write some code on the parent that accepts standard messages from the iframe that you agree on as a typical set of behavior such as notifying its done loading or passing messages to update something on the parent etc. This can be added on the fly and refactored as you need as long as your aim is KISS approach.
Each of the 'dynamic content' pages should be a template (underscore.js gives you _.template()) rendered by a backbone view. The main page needs to have events that initialize new views and render the templates. Look at the todos app (http://documentcloud.github.com/backbone/docs/todos.html) to get a basic idea about the flow of a backbone app.