Jquery load() and Manually bootstrapping AngularJS - javascript

I have a website full of exercises. I'm using jQuery load() to load parts of pages when a link on my website is clicked.
This takes the relevant part of the wanted page (the exercise itself) and puts it in a div for the user to interact with. While this works wonderfully for most of the website, since the vast majority is written in php, I'm trying to get it to work with the parts that use AngularJS as well.
I used this question as a starting point: AngularJS + JQuery : How to get dynamic content working in angularjs
It worked fairly well but only for one exercise. I think that manually bootstrapping angularJS could fix my problem but so far have had issues. How can I manually bootstrap my angular app upon jQuery load?
Here's some of what I've tried so far but it doesn't work:
irscript.js (ir is the name of the exercise) relevant code:
var ir = angular.module("ir", []);
ir.controller('MainCtrl', function($scope) {
//application logic.
});
angular.element(document).ready(function() {
angular.bootstrap(document, ['ir']);
});
index.html relavent code:
<script>
$("#content").load(String(url + " #exercise"), function(){
$.getScript("irscript.js")});
</script>
<div id="content"></div>
The hope is that irscript.js can be replaced by a function that returns the proper script for the loaded exercise at some point but just getting the above to work would be amazing.

Related

Javascript code in main body is not working with angular template

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!

Run Javascript file on link click - MVC

I am converting a website to MVC and cannot get this link to work properly in MVC. In the original site, this link runs a .js file that creates a game for users to destroy the site for fun. My question is, how do I get the onclick of this link to function properly in MVC? I have spent a lot of time looking in Stack and Google for a solution, with no luck.
<a id="destroy" href="javascript:var%20i,s,ss=['~/Content/bundles/dd.js'];for(i=0;i!=ss.length;i++){s=document.createElement('script');s.src=ss[i];document.body.appendChild(s);}void(0);" title="JavaScript Game">
This may not work with IE
You should use JQuery to add Click Event, remove the Code from tag.
and do the following:
<script>
$(document).ready(function(){
$("#distroy").click(function()
{
//Your Code Here
})
})
</script>

jQuery dynamic page loading - Other javascript is broken and how should i import page specific js?

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

jQuery thumbnail grid in AngularJS

I'm attempting to use a thumbnail grid in my AngularJS application. I've set up a directive for the HTML template part, but am having trouble initializing the jQuery part that expands a tile on click.
I know this is a typical issue when attempting to use jQuery in Angular apps. The jQuery script is very simple, I just don't know how to make it work in Angular. The script:
<script>
$(function() {
Grid.init();
});
</script>
Thanks for any advice/help!
Edit:
Page is here: tinyurl.com/jgbrpd6. As you can see, if you click on one of the elements, nothing happens because the jQuery script is located in the HTML of the templateUrl file.
templateUrl file is here: tinyurl.com/zr9ylqf. As you can see, if you click on one of the elements, it behaves as expected, becuase it is now outside of the AngularJS app.

how to run Jquery Click function on ng-click in Angularjs

I am working on a mobile app where I am using MDL for app UI and Angualr js
I bought the theme from themeforest named "FAB".
I am using angular js to show the data from server using API's where I am displaying all the products which is coming from server.I want to run Add to Cart section on the page which has some in-built jquery applied to it. if I dont write Angualr js then my Jquery is working fine.
here is the link of my Page without Angular js
Link without Angular js ,
link with angualr js
I am new to angular js .. so it is something which is blocking jquery click event
While I'm creating plunker for the answer, I ran into the same problem.
But, It was solved by inserting app.js before </body> tag. I think it might be related with angular's inside operation.
Here are different plunkers(app.js in head, app.js in body)

Categories

Resources