I have some trouble. I am using this plugin "angular-masonry" (it's on Github) to dynamically build the grid on the page. When the page loads I get this:
http://joxi.ru/YBQPVP3JTJCwfIgLgbc
Here is my code:
<div class="container" style="width:80%">
<h1 style="text-align: center; margin-bottom: 40px">
Category: {{category.text}}
</h1>
<div>(masonry='' load-images="false")
<div class="masonry-brick" ng-repeat="portal in category.claim_portals" style='width:50%;float:left'>
<div>
<h3>(style='margin-left:30px')
Portal: {{portal.text}}
</h3>
<div class="category-list" ng-repeat="claim in portal.portal_claim" style="margin-bottom:2px">
<div class="claim_sections">
<claimforlist claim="claim"></claimforlist>
</div>
</div>
</div>
</div>
</div>
</div>
But after resizing browser window, everything becomes normal and looks like this:
http://joxi.ru/iBQPVP3JTJCUfLnoqQQ
I think that view loads earlier than JSON data arrives.
Can anyone help and tell me how can I load view after the data has arrived? Or if you know another reason of such an issue, please reply.
Thanks in advance.
You can add a scope boolean variable with value set to false, and change the value to true on your http promise success.
Code sample:
function myController($scope, YourDataServer) {
$scope.dataLoadedSuccessfully = false;
yourDataServer
.query()
.$promise
.then(
function(result) {
$scope.dataLoaded = true; // set the value to true
});
}
HTML would look like:
<div id="loadingBar" ng-show="!dataLoadedSuccessfully">Loading data...</div>
<div id="dataWrapper" ng-show="dataLoadedSuccessfully">
<!-- data goes here -->
</div>
Related
I'm trying to find out a way to modify the HTML code to replace every Bootstrap col class name (col, col-xs-x, col-x etc.) by col-12 after the page is loaded.
I could do that with .removeClass('name') and then .addClass('name') but I need to use some RegEx because I want to modify Bootstrap col class names.
From something like this :
<body>
<div class="col-xs-6 col-sm-4 col-2"> Content 1 </div>
<div class="col"> Content 2 </div>
</body>
I want to modify to something like this :
<body>
<div class="col-12"> Content 1 </div> <!--can even be class="col-12 col-12 col-12"-->
<div class="col-12"> Content 2 </div>
</body>
I found here someone who did that with html().replace in jQuery so I tried to do the same but it doesn't work.
Way like this:
$(document).ready(function () { // my RegEx works well, verified it on regex101
let col_let_num = $('body').html().replace(/\bcol\b(\-[a-z]{0,2})?(\-)?([0-9]{0,2})?/i, 'col-12')
$('body').html(col_let_num)
})
So my question is, do you have any solution to change HTML content after the page is loaded ?
You forgot to add ')' to your Javascript.
but i really cant realize what you are trying to do here.
any way
$(document).ready(function () { // my RegEx works well, verified it on regex101
let col_let_num = $('body').html().replace(/\bcol\b(\-[a-z]{0,2})?(\-)?([0-9]{0,2})?/i, 'col-12')
$('body').html(col_let_num)
})
Edited
here you go
$('[class*="col"]').each((i, e) => {
let classes = $(e).attr('class').split(/\s+/);
classes.forEach(v => {
let col_let_num = v.replace(/\bcol\b(\-[a-z]{0,2})?(\-)?([0-9]{0,2})?/i, 'col-12')
$(e).attr('class', col_let_num)
})
})
this should work.
I have a screen login in my aplication and to get the form data in framework i need to use formtoData but it wasnt working, so i decided to create another project and copy paste framework docs script but still isnt working.
Index.html(the test project)
<div class="pages navbar-through toolbar-through">
<!-- Page, "data-page" contains page name -->
<div data-page="index" class="page">
<!-- Scrollable page content -->
<div class="page-content">
<form id="my-form" class="list-block">
<ul>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">Name</div>
<div class="item-input">
<input type="text" name="name" placeholder="Your name">
</div>
</div>
</div>
</li>
</ul>
</form>
<div class="content-block">
Get Form Data
</div>
</div>
</div>
</div>
js (test project)
// Initialize app
var myApp = new Framework7();
// If we need to use custom DOM library, let's save it to $$ variable:
var $$ = Dom7;
$$('.form-to-data').on('click', function(){
alert("dwdq");
var formData = myApp.formToData('#my-form');
alert(formData);
});
Does anyone know why is it not working? thx in advance.
They changed the function, instead of formToData now is formToJSON
You can use booth:
formtoData or formToJson will return the same value: [object Object]
Just use JSON.stringify() to get the desired result.
$$('.form-to-data').on('click', function(){
var formData = myApp.formToData('#my-form');
var formJSON = myApp.formToJSON("#my-form");
console.log(JSON.stringify(formData));
console.log(JSON.stringify(formJSON));
});
{"name":"Alexandre"}
{"name":"Alexandre"}
Or you can even serialize the form like that:
$$('.form-to-data').on('click', function(){
var formData = $$.serializeObject(myApp.formToJSON($$("#my-form")));
console.log(formData);
});
name=Alexandre
Edit: Framework7 got updated to v4, and now it works this way:
Single Line:
var dados = JSON.stringify(myApp.form.convertToData('#my-form'));
They changed the function again, at least in V2. The new function that works for me is:
var formData = myApp.form.convertToData("#form-id");
var formString = JSON.stringify(formData);
Framework 7 convertToData is ignoring input type text array: for example:
<input type="text" name="no_invoice[]" />
Removing [] doesn't work either.
F7 only take as array checkbox/radio fields, this bug must be solved.
I solved using javascript:
new FormData(your_form);
I would like to iterate over a Mongo query for the user's collections using the each block.
I have the following html template that should load in different pieces of data from the profile object in the users collection.
To clarify, the users Collection has a services, status and profile object
{{#each profile}}
<div class="profileUser oneDiv">
<div class="profileUserLeft">
<div class="profileUserImage">
<div class="spin"> {{> spinner}} </div>
<img src="{{profile.picturelrg}}" class="profileUserImg">
</div>
<div class="profileUserGraph">
<label for="myChart"><b>Meetup Graph</b>
<br>
<span class="profileMonth"> {{profile.month}} </span>
<br>
<canvas id="myChart"></canvas>
</label>
</div>
</div>
<div class="profileUserRight">
<div class="profileUserName">
<ul>
<li><h1>{{profile.name}}</h1></li>
<li>
<div class="circle" style="background-color: {{online.color}}"></div>
</li>
</ul>
</div>
</div>
</div>
{{/each}}
Here is my helper that sets the query
profile: function() {
return Meteor.users.find({
_id: id
});
}
Currently the page loads in no data.
When I statically query for a property however it works. This is done like so.
profimg: function() {
return Meteor.users.find({
_id: id
}).fetch()[0].profile.picturelrg;
}
How can I be more efficient and use the each block instead of statically searching for each different property utilizing the fetch() method?
each of Blaze takes an array as parameter to loop while find method return a Cursor of MongoDB. What you need to do is fetch the Cursor to return the array
profile: function() {
return Meteor.users.find({
_id: id
}).fetch();
}
However, your logic is not correct. You are finding the profile that matches with the input id, thus the function should be
profile: function() {
return Meteor.users.findOne({
_id: id
});
}
and then you can access the property without the each loop
I'm new to AngularJS but I love the framework.
What I have right now, is a (stub) single page that loads json data.
JS
var merlinoApp = angular.module('merlino', []);
merlinoApp.controller('mainController', function ($scope, $http) {
...
$http.get('#Url.Action( "consoledatapull", "ConsoleElaborazioni")')
.then(function (res) {
$scope.jobs = res.data.jsonjobs;
$scope.clienti = res.data.jsonclienti;
$scope.console = res.data.jsonconsole;
});
...
});
HTML
<div ng-repeat="roll in jobs | orderBy:sortType:sortReverse | filter:searchJob | filter:searchCliente | filter:searchStato" class="console-row my-row">
...
<div class="console-cell-id console-cell console-cell-padding console-cell-no-border-sx">{{ roll.id }}</div>
...
<div ng-click="collapsed=!collapsed" ng-class="{'console-cell-esito-selected' : collapsed}" class="console-cell-esito console-cell console-cell-no-border-sx">SHORT DESC</div>
<div ng-show="collapsed" class="console-cell-esito-long console-cell console-cell-no-border-sx">{{ roll.esito }}</divng-show></div>
</div>
This populates ng-repeat, and the ng-click shows/hides the `ng-show div.
So far so good(?).
What Ì'm trying to achieve, is to load json data into
<div ng-show="collapsed" class="console-cell-esito-long...
if
<div ng-click="collapsed=!collapsed" ng-class="{'console-cell...
is clicked.
That is each div of ng-repeat, can be loaded with specific data:
<ul>
<li ng-repeat="logelem in jsonlog">
{{ logelem.log }}
</li>
</ul>
I thought about using a function:
<div ng-click="function(id)...
and then load json into a div identified by an id, so i used $index...
The result was, being able to load same data into all divs at once :/
Help would be appreciated.
My suggestion woudl be to add the information to the jobs elements itself.
So for example, the ng-click would become:
<div ng-click="loadData(id, roll)">CLICK ME</div>
and then the loadData would be something like:
$scope.loadData = function(id, roll){
// Do something
roll.result = result;
}
and then you can use the result from that object in the view like you would do in other places. You can then for example hide the object where you want the final result until the variable result is defined.
I think this will be the easiest solution.
Update from comments
Why not change the collapsed value in the method? Or you could use a $watch to listen to changes on the collapsed variable.
I'm currently having problems outputing data in angularJS from a JSON.
I'm pulling JSON from SoundCloud to show song titles. Here is my app:
(function() {
// define the app
var app = angular.module('PartyPlayer', []);
// create the song lister controller
app.controller('SongListCtrl',
function ($scope, $http) {
$http.get("http://api.soundcloud.com/tracks/13158665.json?client_id=MY_CLIENT_ID").success(function(data) {
$scope.songs = data;
});
});
})();
and I'm trying to add the data here:
<div class="row" ng-controller="SongListCtrl as songList">
<div class="small-12 columns">
<div class="list">
<ul>
<li>{{songList.songs.title}}</li>
</ul>
</div>
But nothing shows up. When I console.log(data.title) I get the correct result, but not when I go to add it to my controller in the html. Anyone know the reason why this is happening? Any help would be gratefully appreciated! Thanks!
You have set a scope variable as songs and referring it in the html markup with songsList.songs
Your actual HTML Markup should be
<div class="row" ng-controller="SongListCtrl as songList">
<div class="small-12 columns">
<div class="list">
<ul>
<li>{{songs.title}}</li>
</ul>
</div>