I'm using a external JavaScript library called Masonry (Cascading grid layout library) https://masonry.desandro.com/.
I have created a demo page using this library and everything seems to work fine, However once i incorporate this library in a React app it doesn't work.
Scripts
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout#4/dist/masonry.pkgd.min.js"></script>
<!-- <script src="../src/assets/js/JQuery/masonry.js"></script> -->
<script>
$(window).on('load', function(){
var $content = $('.content-container').masonry({
// options
itemSelector: '.masonry',
percentPosition: true,
singleMode: true
});
$content.imagesLoaded().progress( function() {
$content.masonry('layout');
});
console.log('Works!')
});
</script>
</html>
I have tried two methods, adding an external JavaScript file masonry.js and adding the code in a script tag within the index.html page. whenever i use the external JavaScript file it doesn't work at all (the console.log('Works!') doesn't even show in the console). But if i use the code within the Script tag in the index.html page the masonry works occasionally if i do a few page refreshes and the console.log('Works!') shows up in the console every time.
I'm not sure if its because Reactjs has a different way in adding external JavaScript libraries / files, but i have searched online what is the correct way to set up external JavaScript files in a react app and it came up with multiple methods so i'm kind of confused to witch is the correct / best.
Also i have checked the Network in the browser developer tools and the external library / JS file imports seems to be loading in fine.
Just a note: the .content-container child elements change on button clicks in the Reactjs but not in the demo page.
Related
We created a widget as an Angular app, which our customers should be able to easily load and integrate into their own website.
The most straightforward way (which works) to do this is simply to tell them to include the default HTML tags from the index.html on their website:
<base href="/">
<app-root></app-root>
<script src="https://ourdomain.com/widget/runtime.js" type="module"></script><script src="https://ourdomain.com/widget/polyfills.js" type="module"></script><script src="https://ourdomain.com/widget/main.js" type="module"></script>
However, we would like to minimize the above code and provide them a one-liner which includes a JavaScript that loads the code dynamically into the DOM, e.g. <div id="widget"></div><script src="https://ourdomain.com/widget/start.js"></script>. The script would simply consist of:
<script>
document.getElementById('widget').innerHTML = '<base href="/"><app-root></app-root>...';
</script>
The tags are loaded correctly into the DOM but the Angular app i.e. the scripts which are dynamically included into the DOM don't load.
How can this problem be solved? Is there a method in main.js which needs to be called additionally to bootstrap the Angular app?
The Angular app is deployed and hosted on our server, e.g. on https://ourdomain.com/widget. The goal is that anyone can load and plug the app into their own website using the above approach.
It turned out to work just like that:
<script>
document.write('<base href="/"><app-root></app-root>...');
</script>
Okay, so this one is gonna be a doozy!
NOTE: This will be for a windows desktop application running sqlite and mongoose, so loading times are not as important (to me, for now) and there will be no connection to a non-local server.
I have searched all over and couldn't find anything that is specific to my situation, most seem to load into an iframe or use that framework provided by css-tricks.com
I am using my own (sorta) framework. The libraries i am using are bootstrap 3, jquery 2.1.4, jqueryui 1.12.1, and Bootstrap-select v1.12.1
index.php will have all content dynamically loaded into a div#wrapper and will act as the head of all page loading. This is the skeleton of my index.php. In sidebar.html the links have the attribute 'pagetoload', jquery catches the click event and loads the data into div#wrapper
<body>
<?php require_once("res/sidebar.html"); ?>
<div class="container-fluid" id="body-container">
<div id="wrapper" style="border:1px black solid;">
<!-- dynamic page content will be loaded here-->
</div>
</div>
<script src="res/js/jquery.js"></script>
<script src="res/js/jquery-ui.js"></script>
<script src="res/js/bootstrap.js"></script>
<script src="res/js/bootstrap-select.js"></script>
<script src="res/js/menu-handling.js"></script>
<script>
//index.php js
$(document).ready(function () {
$.get("home.php", function (data) {
$("div#wrapper").html(data);
});
$("a.loader").click(function (e) {
e.preventDefault();
$.get($(this).attr("pagetoload"), function (data) {
$("div#wrapper").html(data);
});
});
//dateFormat 10/dd/yy to constrain input only to october
//get current month number and constrain to prevent additions to wrong month
$("#date-input").datepicker({
dateFormat: "12/dd/yy"
, constrainInput: true
});
$("#date-input").focus(function () {
$(this).datepicker("show");
});
});
</script>
</body>
Each page that will be dynamically loaded will ideally contain minimal php and only contain the necessary html/css/js for that page. My issue is for example, after loading one page such as my dbviewer.php (which contains js and gives me the asynchronous loading warning) and reloading home.php into the container, javascript no longer works. The javascript for each page are inline tags.
I have tried piling all the javascript for every dynamic page into index.php so that it's all loaded on startup, but the issue arises that it still won't work. What is the best method make this dynamic loading work while having each page modular. I have tried to researching this but only stuff like using the hashTag thing comes up.
If you need more code from my files please post, i think i explained it enough for you to understand as there is nothing too wild going on outside of index.php Just scripts inside each dynamic page that basically interacts with dom elements using jquery.
I'm leaving this answer because it helped you, and also can be usefull as a general rule of thumb for any developer out there that can find himself in similar situation.
So when developing the app you have to separate all javascript, css assets in master file to host them on first pageload. (maybe it's event better for performance)
All other server generated files (php, node.js etc) files you have do structure to only be data source for pages that users click or land to .. or at least try to..
after that you have to trigger
$.ajax().callback
function on frontend to do job on each page. Such as page effects, data manipulation and etc .. Callback is very important because that's when data was actually loaded!
cheers, k
I'm currently having a weird problem.
I'm using JqueryUI tabs, and am loading php pages with each tabs. This works well for me, but what I am trying to do, is loading another php page from within one of those tabs with the html "a" tag. For some reason, it doesn't work when I place the click function in a already linked javascript file, but works when I place the code in a script tag directly in the html file.
Here is the function:
$(function(){
$('a.commandsRecep').on('click',function(e){
e.preventDefault();
window.open(this.href,'','width=700,height=700');
});
})
I know that loading pages from within a tab is done by Ajax and am wondering if that's what causing me problems.
The link is inside a table :
<td><a class="commandsRecep" href="./Ben_test/page_principale.php">Réception des commandes</a></td>
What is the order of includes?
Make sure that jquery is included before javascript file.
The order should be like :
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="yourScript.js"></script>
Found it!
After a while, I got to the same type of error.
What I had to do was separate my script in two parts, one that required jqueryUI and one that didn't.
That way, in the html files where I don't import jqueryUI, I only import the one that doesn't require it.
Looks like having jquery that required jqueryUI without having imported jqueryUI was stopping the script from executing.
I have a html page (inicio.html) which loads some js scripts. Then from a js script there is a navigation to another page in a different html file (test.html) and a different set of js files.
The problem is that when I do the changePage ($.mobile.changePage("test.html");) and the new page is loaded the new js files are kept in files like
http://localhost:8080/cdmWEB/resources/scripts/jquery/2.0.3/jquery-2.0.3.min.js/eval/seq/2
The js functions are being executed because the console.log messages in them are shown. But the changes the js scripts should do in the page are not rendered and the js cannot be debuged (using firebug).
I am loading the js scripts with the tag in the html file, but I have also tried the $.getScript function with the same result.
I am using jQuery 2.0.3 and jQuery-mobile 1.3.1.
From what I saw the reason why the js files are kept like that is because they are retrieved using ajax. Is there a way to prevent this and retrieve the file "normally"? or is there something I am missing (probably)?
Have a look here:
Jquery Mobile - $.mobile.changepage not loading external .JS files
You should consider loading the needed JS in the main page, and not in the page your changing to.
I ended up using window.open('test.html','_self','',true); to make the transition. This loads the new scripts when the transition is made and the jquery appends keep working fine.
I am trying to work with jQuery UI tabs in WordPress but I keep getting the "jQuery("#").tabs is not a function" error.
I thought the tabs file might not be loading but looking in firebug it shows it is loading. I am also using modernizr so I thought there might be a conflict with that but using jQuery.noConflict(); did not solve the problem either. At first I used to load jQuery but for some reason it wouldn't work. Now I just linking directly to the files and they are loading.
If it helps, I am trying to get tabs working for this tutorial. The website I working on is lbk.newcoastmedia.com/wordpress
Thanks for any help!
I see the following scripts being loaded on your page:
modernizr-1.6.min.js
l10n.js
jquery.js
galleria.js
and
<script type="text/javascript">
jQuery(document).ready(function($){
$("#photo-rotator").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 4000);
});
</script>
$.tabs is an extension of jQuery UI, and I don't see jQuery UI or the tabs extension loaded on your page. Look at the very bottom of the source at your link and you'll see the following two scripts, which I believe are what you're missing.
ui.core.js
ui.tabs.js
Your debugger is alerting you that $.tabs is not a method because it really hasn't been defined yet.
Just had this problem on Drupal and resolved it by downloading a custom build of the jQuery UI library WITH Tabs selected. Apparently the default jQuery UI library that shipped with Drupal didn't have this module, so perhaps this is also the case with WP.