We Keep Coding

NETTE-LATTE: Include on click

I have a question. Can somebody explain me, how can I include another .latte file and send dynamic data with it?
I am creating api function, where you should be able to get information about company just by writing it's name. When I click to search, I can see in console that my request is getting through and sending back response, with correct data, but it won't refresh already loaded data.
Some examples of my code:
Javascript:
btn.onclick = function() {
modal.style.display = "block";
var firma = $("#firmaName").val();
console.log( "var is " + firma );
$.ajax('data', {
data: { 'firma' : firma}
});
}
.latte
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
{include 'data.latte'}
</div>
</div>

best way to approach this is by snippets and $.netteAjax().
viz: https://doc.nette.org/en/application/ajax
also, include tag can accept parameters, which are then used within loaded template, like here: https://latte.nette.org/cs/tags#toc-include
I also would recomend, insted of using include of antoher latte file, I would create component for your modal, viz. https://doc.nette.org/en/application/components

AngularJS: Dynamically loading HTML with a controller

I'm new to AngularJS and I'm working on a small project to get the hang of how things work.
Basically I want to have a single-page app where I can dynamically change part of the page to include html from some other file. This other file has a controller and such. I would like the url to stay the same. I need the page to be loaded dynamically with a variable name.
Right now, I can get the HTML to load from the imported template, but a lot of HTML is excluded and all of the "ng" tags are gone. I take this to mean that this new page can't find the controller or a lot of the stuff is getting compiled out or something. Maybe I'm not importing things in the correct order? I have no idea. Here's my basic layout:
app.js
var app = angular.module('myApp', []);
app.controller('Main', function($scope) {
$scope.htmlContent = 'somepage.html';
$scope.externalPage = 'otherpage';
$scope.changePage = function(page) {
$scope[page]();
}
$scope.otherpage = function() {
$scope.htmlContent = 'otherpage.html';
}
});
app.controller('InternalPage', function($scope) {
alert('hello world');
$scope.content = "This is not showing";
});
index.html
<div ng-controller="Main">
<!-- This all works. Clicking "Change Page" changes the
HTML referenced by the <div> tag -->
<a ng-click="changePage(externalPage)">Change Page</a>
<div ng-bind-html="htmlContent"></div>
</div>
otherpage.html
<div ng-controller="InternalPage">
<p>{{content}}</p>
</div>
I have tried including the javascript in the html file itself to no avail. I also could not get the ng-include thing to work either.

Try looking into ng-include instead of ng-bind-html:
https://www.w3schools.com/angular/angular_includes.asp

How to use JS in Framework7?

I create an application with framework7. Now I try to execute a javascript in my page-content, but it doesn't execute.
<div class="pages">
<div class="page close-panel" data-page="item">
<div class="page-content">
<div class="content-block-title">Title</div>
<script type="text/javascript">
alert("testoutput"); // no alert
console.log("TEST"); // no log
</script>
</div>
</div>
How can I run this javascript code ?
UPDATE
The page is loaded from an other HTML-Page.

Use Callbacks (onPageInit) to execute code

I had never heard of Framework7 before this, but after taking a look at the docs, I don't believe you are going to be able to use Javascript this way.
It would appear that for JS events, you have to scope the event inside a Framework7 constructor:
var myApp = new Framework7();
var $$ = Dom7;
$$('.alert-text').on('click', function () {
myApp.alert('Here goes alert text');
});
Of course the above example is taken directly from the F7 documentation, and is dependent on a click event, but you may be able to try out the alert event as a method of myApp and see if that works for you.

var myApp = new Framework7();
//Add callback function that will be executed when Page with data-page="about" attribute will be initialized
myApp.onPageInit('dashboard', function (page) {
console.log('dashboard page initialized');
console.log(page);
});
// Option 2. Using live 'page:init' event handlers for each page (not recommended)
$$(document).on('page:init', '.page[data-page="dashboard"]', function (e) {
console.log('dashboard loaded with page:init');
createGraph();
});
Above worked me well.. although following didnt work.
myApp.onPageInit('dashboard', function (page) {
console.log('dashboard page initialized');
console.log(page);
});

If you written any javascript code inside index.html file, Put that code in
<head>
<script>
alert("testoutput"); // no alert
console.log("TEST"); // no log
</script>
</head> like this, which is defined in index.html file
Or ,if you want write JS code for some particular html file ,
Do like this
<div class="page close-panel" data-page="item">
<div class="page-content">
<div class="content-block-title">Title</div>
</div>
<script>
alert("testoutput"); // no alert
console.log("TEST"); // no log
</script>
</div>

Display alert message after page reload

I have to call $route.reload(); in controller 2 addData API call so that I can get the added data in my UI. But then the text 'Data added successfully' goes away due to page refresh.
controller 1:
$rootScope.$on('reloaded', function(event, data) {
$scope.$parent.alerts.length=0;
$scope.$parent.alerts.push({type: 'success',msg: 'Data added successfully'});
});
controller 2:
$scope.add = function() {
someAPIService.addData(JSON.stringify($scope.rows)).success(function(response) {
ngDialog.close('ngdialog1');
$route.reload();
$rootScope.$emit('reloaded', "true");
});
}
HTML Part:
<section>
<div ng-controller="controller3">
<alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</alert>
</div>
<div class="row form-inline" ng-controller="controller2 as vm">
<!-- Table data with text fields-->
</div>
<script type="text/ng-template" id="addDataDialog">
<div id="frm" ng-controller="controller1" class="col-xm-6">
<div class="form-group">
<!-- Labels with text fields-->
</div>
<button class="ngdialog-button" ng-click="add()">Save</button>
</div>
</script>
</section>
NOTE: Both controllers are in the same JS file and they are used for the same HTML file.

As you want to only load the latest record list which is on server side. Then there is not need to use $route.reload(); after making post call. You need to only make ajax call to get the latest records list that will solve your problem. For making ajax you need to refer $http
$route.reload() is getting used only when you need to load
controller again with specified template in your $routeProvider when
condition

just a simple hint of an answer:
add a (specific) cookie (with javascript) before calling reload (use e.g Cookies lib),
read it on reload,
and then delete it
Also you may use local storage if it is available instead of a cookie using same steps:
add a specific entry in local storage, before calling reload
read it on reload
and then delete it
Another option to maintain state client-side is to use url parameters but these will not do for page reload

AngularJs: <object> tag usage in angularjs partial

I need to use <\object> tag or <\iframe> inside one of my partial html and use that html in another html page with ng-include. This is my try,
<div class="container">
<!-- This part is not showing anything in the page -->
<object ng-attr-data='"templates/widget_1.html"' type="text/html"></object>
<!-- This part is showing page in view -->
<div ng-include src='"templates/widget_2.html"'></div>
</div>
OR
If I want to use <\iframe> within this page how can I use that?

to achieve this, you need to write a directive and load the template by yourself
app.directive("object", function ($templateCache, $http, $compile)
{
return {
restrict:"E",
link: function ($scope, $element)
{
//load the external partial with http and cache into the $templateCache
$http.get($element.attr("ng-attr-data"), {cache: $templateCache}).then(function (response)
{
//Fill the loaded html into the element
$element.html(response.data);
//compile the scope on it, to enable bindings.
$compile($element.contents())($scope);
});
}
}
});