Angular Function that is always loading (automatically) - angular1.6

I have a function that loads referring data and images and another that loads the image itself from a folder.
Is there a way to always have the function that loads images, always working? That is, if you upload an image, this function will be automatically executed and will upload that image.
At the moment I am executing the function using (click), but what I want is that it is always being executed automatically.
HTML
<div class="container-fluid first">
<div class="row tab-pane Galeria">
<div *ngFor="let product of products" (click)="ImageInfo($event,product.id)" class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div class="image-item">
<a class="d-block image-block h-100" >
<img [src]="Imagenss" class="Images img-fluid" alt="">
<div class="ImageText"> {{product.name}}</div>
</a>
</div>
</div>
</div>
</div>
Component.ts
ImageInfo(e, id) {
if (e != null) {
this.ID = id;
}
var self = this;
self.homeService.getImage(self.ID).then(function (resultado) {
if (resultado) {
self.Imagenss = resultado;
}
}).catch();
}

Your question is very unclear so I am not sure that this is exactly what you want to do, but you can use the function setInterval to run your function that uploads the images automatically every X milliseconds.
Two side notes regarding your code:
You should use let instead of var, the scope isn't the same and you can get unwanted results if you use var: What's the difference between using "let" and "var"?
You don't need to use self = this, if you use an anonymous function as callback then you can use this directly:
ImageInfo(e, id) {
if (e != null) {
this.ID = id;
}
this.homeService.getImage(this.ID).then(resultado => {
if (resultado) {
this.Imagenss = resultado;
}
}).catch();
}

Related

Sitecore not pulling through field values

Instead of the field value coming through I get 'No text in the field'. This is for all views that reference a field and isn't hard coded seemingly.
The content is there in the content editor, but not pulling through to the experience editor or the live web view. I've tried rebuilding the link databases, as well as using the GUID in the view to reference the field but no luck fixing this.
For example:
Local
Experience Editor on local
Content editor on local
Live
Experience Editor on live
#using Sitecore.Mvc
#using Sitecore.Data.Items
#using Sitecore.Mvc.Presentation
#model RenderingModel
#{
int counter = 0;
int maxvisible = 6;
// Count can be set in the control properties so the editors can vary the amount of cards showing
if (Html.Sitecore().CurrentRendering.Parameters["Count"] != null)
{
maxvisible = int.Parse(Html.Sitecore().CurrentRendering.Parameters["Count"]);
}
var UniqueName = "";
if (Html.Sitecore().CurrentRendering.Parameters["UniqueName"] != null)
{
UniqueName = Html.Sitecore().CurrentRendering.Parameters["UniqueName"];
}
var cardpanel = "cardpanel" + UniqueName;
UniqueName = "expandbutton" + UniqueName;
Item firstChild = Model.Item.Children[0];
}
<!--Adaptive code (as opposed to Responsive)-->
<!--html code for desktop version-->
<div class="container visible-lg visible-md visible-sm">
<div class="row row-eq-height">
#foreach (Item child in Model.Item.Children)
{
if (#Html.Sitecore().Field("ExcludeFromPage", child).ToString() != "1")
{
if (counter >= maxvisible)
{
if (counter == maxvisible)
{
#:<div class="#cardpanel" style="display: none;">
#:<div class="row-eq-height">
}
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 CardHeightMargin flexbox">
<div class="rcorners1">
<div class="col-xs-12 img-padding cardmobile top">
<div class="#Html.Sitecore().Field("{C63983F3-6ECD-45EA-A1D5-DFB37B366EDD}", child) scale-08"></div>
</div>
<div class="col-xs-12 CardHeight cardmobile bottom">
<h3>#Html.Sitecore().Field("{5787E6DD-A0F2-454F-AC4C-50921D4BBCB3}", child)</h3>
<p>#Html.Sitecore().Field("{1E900F2F-6F68-46B4-A98A-7BDF3CE06C5E}", child)</p>
</div>
</div>
</div>
}
else
{
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 CardHeightMargin flexbox">
<div class="rcorners1">
<div class="col-xs-12 img-padding cardmobile top">
<div class="#Html.Sitecore().Field("{C63983F3-6ECD-45EA-A1D5-DFB37B366EDD}", child) scale-08"></div>
</div>
<div class="col-xs-12 CardHeight cardmobile bottom">
<h3>#Html.Sitecore().Field("{5787E6DD-A0F2-454F-AC4C-50921D4BBCB3}", child)</h3>
<p>#Html.Sitecore().Field("{1E900F2F-6F68-46B4-A98A-7BDF3CE06C5E}", child)</p>
</div>
</div>
</div>
}
counter++;
}
}
#if (counter != 0 && counter > maxvisible)
{
#:</div>
#:</div>
<div class="center-block #UniqueName">
#Html.Sitecore().Field("Expand")
</div>
}
</div>
</div>
<!--html code for mobile version - Carousel-->
<div class="container visible-xs">
<div id=#Model.Item.Children[0].ID.Guid.ToString("N") class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="##Model.Item.Children[0].ID.Guid.ToString("N")" data-slide-to="0" class="active"></li>
#for (int itemcount = 1; itemcount < Model.Item.Children.Count; itemcount++)
{
<li data-target="##Model.Item.Children[0].ID.Guid.ToString("N")" data-slide-to=#itemcount></li>
}
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner m-y-1" role="listbox">
<div class="item mobilecardheight active">
<div class="col-xs-12 img-padding img-div-height">
<div class="#Html.Sitecore().Field("{C63983F3-6ECD-45EA-A1D5-DFB37B366EDD}", firstChild) scale-08"></div>
</div>
<div class="col-xs-12 CardHeight ">
<h3>#Html.Sitecore().Field("{5787E6DD-A0F2-454F-AC4C-50921D4BBCB3}", firstChild)</h3>
<div class="col-xs-12">
<p>#Html.Sitecore().Field("{1E900F2F-6F68-46B4-A98A-7BDF3CE06C5E}", firstChild)</p>
</div>
</div>
</div>
#foreach (Item child in Model.Item.Children)
{
if (child.ID != firstChild.ID)
{
if (#Html.Sitecore().Field("ExcludeFromPage", child).ToString() != "1")
{
<div class="item mobilecardheight">
<div class="col-xs-12 img-padding img-div-height">
<div class="#Html.Sitecore().Field("{C63983F3-6ECD-45EA-A1D5-DFB37B366EDD}", child) scale-08"></div>
</div>
<div class="col-xs-12 CardHeight">
<h3>#Html.Sitecore().Field("{5787E6DD-A0F2-454F-AC4C-50921D4BBCB3}", child)</h3>
<div class="col-xs-12">
<p>#Html.Sitecore().Field("{1E900F2F-6F68-46B4-A98A-7BDF3CE06C5E}", child)</p>
</div>
</div>
</div>
}
}
}
<!-- Left and right controls -->
<a class="left carousel-control" href="##Model.Item.Children[0].ID.Guid.ToString("N")" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="##Model.Item.Children[0].ID.Guid.ToString("N")" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!--More button javascript used on the desktop screens-->
#if (counter != 0 && counter > maxvisible)
{
<script>
var acc = document.getElementsByClassName("#UniqueName");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
var panel = this.previousElementSibling;
if (panel != null) {
if (panel.style.display === "block") {
panel.style.display = "none";
this.innerHTML = "<a href='#policies' class='more_link'>Show more</a>";
} else {
panel.style.display = "block";
this.innerHTML = "<a href='#policies' class='more_link'>Show less</a>";
}
}
});
}
</script>
}
This was all working as expected on my local, but I must've changed something elsewhere that caused this. Any ideas?
Can you please add some more Screen shot? am not getting what content you exactly added in content editor.
Your field references look strange to me...
#Html.Sitecore().Field("{5787E6DD-A0F2-454F-AC4C-50921D4BBCB3}", child)
The parameters for #Html.Sitecore().Field() are:
string FieldName
string FieldName, Item item
string FieldName, object parameters
string FieldName, Item item, object parameters
Are your fields literally called "{5787E6DD-A0F2-454F-AC4C-50921D4BBCB3}" or is that just their ID? Your editor screenshot has the fields "CardText", "CardTitle", "CardIcon" and that's what I'd expect to see used instead of the GUIDs:
#Html.Sitecore().Field("CardTitle", child)
No idea why it'd be working on live though if what you showed is also what's deployed.

Spreadjs references from iframe

We use an iframe in the parent page, that is dynamically replaced with other pages.
Spread is loaded in the parent. Is there some type of plugin that will allow me to access the spread core that is loaded in the parent from the iframe pages without including spread(language="JavaScript" src="http://cdn.wijmo.com/spreadjs/gcspread.sheets.all.8.40.20151.0.min.js") in the multiple child (iframe) pages? Jquery is loaded fine.
Home page iframe with references
<iframe name="mainWindow" src="includes/View.asp frameborder="0" />
<link href="http://cdn.wijmo.com/spreadjs/gcspread.sheets.8.40.20151.0.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://cdn.wijmo.com/spreadjs/gcspread.sheets.all.8.40.20151.0.min.js"></script>
We just replace the iframe source at run time.
I use following code but spread is not initialized any suggestions ?
<script type="text/javascript">
var parentWindow = window.parent;// This refers to parent's window object
if (parentWindow && parentWindow.jQuery) { // Check to see if parentWindow and parentWindow.jQuery is truly
window.jQuery = parentWindow.jQuery;
window.$ = parentWindow.jQuery;
}
else {
var jScript = document.createElement('script');
jScript.setAttribute("type", "text/javascript");
jScript.setAttribute("src", "http://code.jquery.com/jquery-1.8.2.min.js"); // load jQuery here
}
if (parentWindow && parentWindow.wijmo && parentWindow.GcSpread) { // Check to see if parentWindow and parentWindow.wijmo and parentWindow.GcSpread is truly
window.GcSpread = parentWindow.GcSpread;
window.wijmo = parentWindow.wijmo;
}
else {
var jScript = document.createElement('script');
jScript.setAttribute("type", "text/javascript");
jScript.setAttribute("src", "http://cdn.wijmo.com/spreadjs/gcspread.sheets.all.8.40.20151.0.min.js"); // load gcspread here
}
$(document).ready(function () {
var test = window;
alert("JQuery loaded");
var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"));
var spreadNS = GcSpread.Sheets;
spread.setSheetCount(3);
spread.bind(spreadNS.Events.ActiveSheetChanged, function (e, args) {
$("#activeSheetIndex").val(spread.getActiveSheetIndex());
});
$("#btnAddSheet").click(function () {
spread.addSheet(spread.getSheetCount());
});
$("#btnRemoveSheet").click(function () {
var activeIndex = spread.getActiveSheetIndex();
if (activeIndex >= 0) {
spread.removeSheet(activeIndex);
}
});
$("#btnClearSheets").click(function () {
spread.clearSheets();
});
$("#btnSetActiveSheetIndex").click(function () {
var index = $("#activeSheetIndex").val();
if (!isNaN(index)) {
index = parseInt(index);
if (0 <= index && index < spread.getSheetCount()) {
spread.setActiveSheetIndex(index);
}
}
});
});
</script>
<div class="sample-turtorial">
<div id="ss" style="width:100%; height:580px;border: 1px solid gray;"></div>
<div class="demo-options">
<div class="option-row">
<input type="button" style="width: 100px" value="Add Sheet" id="btnAddSheet" />
<input type="button" style="width: 100px" value="Remove Sheet" id="btnRemoveSheet" />
<input type="button" style="width: 100px" value="Clear Sheets" id="btnClearSheets" />
</div>
<div class="option-row">
<label>ActiveSheetIndex:</label>
<input type="text" id="activeSheetIndex" value="0" />
<input type="button" id="btnSetActiveSheetIndex" value="Set" />
</div>
</div>
</div>
I don't think what you're attempting work, how would the code execute without having a reference to the library (SpreadJS).
Can you please explain what your use case might be, may be we can help you find a different way of accomplishing what you need.

Autocomplate like facebook - list always appear

I download example of autocomplate search list
The Problem is the list of people always appear even i
click outside of list area, i must delete the data from input field to disappear.
What i want when i click any where this list hide or disappear when i
click or enter any data appear again inside input field .
About source code
index.php
js.js (java)
db.php (Database)
index code is :
<body bgcolor="#F1f1f1">
<div id='val'>
<div>
<form>
<input type="text" id ="test" name="n" onblur="message()" onclick="showHint(this.value)" onkeyup="showHint(this.value)" placeholder="Search here" autocomplete="off" autocorrect="off" autocapitalize="off" />
<img src="Black_Search.png" class="search" width="20" height="20">
</form>
</div>
</div>
<div id='val2'>
<div id="result"></div>
<div id='more'> <a href='#' class='search_profile'>see more result</a></div>
</div>
java js.js Code is:
function showHint(str)
{
if (str.length==0)
{
document.getElementById("result").innerHTML="";
document.getElementById("val2").style.display = "none";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("result").innerHTML=xmlhttp.responseText;
document.getElementById("val2").style.display="block";
}
}
xmlhttp.open("GET","db.php?n="+str,true);
xmlhttp.send();
}
Database db.php code :
if(#mysql_real_escape_string(strip_tags($_GET['n']))){
$_dblocal='localhost';
$_dbrott='root';
$_dbpassword='';
$_dbname='search';
#mysql_connect($_dblocal,$_dbrott,$_dbpassword) or die (mysql_error());
#mysql_select_db($_dbname) or die (mysql_error());
$sele="SELECT * FROM `users` WHERE name LIKE '" .$_GET['n']. "%' ORDER BY id DESC LIMIT 5";
$que=#mysql_query($sele);
while($rows=mysql_fetch_assoc($que)){
$id= $rows['id'];
$name= $rows['name'];
$images = $rows['image'];
$desc= $rows['desc'];
echo "<a href='profile.php?id=$id' class='search_profile' >
<div class='comment'>
<img src='images/$images' width='40' height='40' align='top' class='Square' >
<b>$name</b>
<div class='dec'>$desc</div>
</div> </a>";
}
}else{
echo "Enter Name";
}

AngularJS with list

I'm doing an employees list that is loaded from SQLite database. I don't know why my list is empty, but I can see via JSON.stringify that data is comming.
I'm using AngularJS and Cordova Framework. Debugging with Ripple.
listEmployees.html
<div data-role="page" apply-jq-mobile>
<div data-theme="a" data-role="header">
<h3>
Header
</h3>
</div>
<div data-role="content">
<div class="ui-grid-a">
<div class="ui-block-a">
</div>
<div class="ui-block-b">
<a data-role="button" href="#/new" data-icon="plus" data-iconpos="left">
New
</a>
</div>
</div>
<input type="text" ng-model="search" class="search-query" placeholder="Search">
<ul data-role="listview" data-divider-theme="b" data-inset="true">
<li data-role="list-divider" role="heading">
Employees
</li>
<li data-theme="c" ng-repeat="employee in employees">
{{employee.name}}
</li>
</ul>
</div>
</div>
EmployeeCtrl
function EmployeeCtrl($scope, Employee){
$scope.employees = Employee.getAllEmployees();
$scope.saveEmployee = function(id) {
if(id){
//TODO
} else {
Employee.addEmployee($scope.employee);
}
}
}
Employee
app.factory('Employee', function() {
var data = {};
data.addEmployee = function(_employee, callback) {
var employee = new Employee();
employee = _employee;
DbService.db.employees.add(employee);
DbService.db.saveChanges(callback);
}
data.getAllEmployees = function() {
DbService.db.employees.toArray(function(employees) {
console.log(JSON.stringify(employees));
return employees;
});
};
return data;
});
I think you need to use promises. Your call to db is asynchronous and therefore view is getting rendered before your data arrives.
data.getAllEmployees = function() {
var $d = $q.defer();
DbService.db.employees.toArray(function(employees) {
console.log(JSON.stringify(employees));
$d.resolve(employees);
});
return $d.promise;
};
Angular templating system wait for all the promises to get resolved before rendering. So I think this will solve your problem.
So, I solved it.
function EmployeeCtrl($scope, Employee){
Employee.getAllEmployees(function(employees){
$scope.employees = employees;
$scope.$apply();
});
}
.
app.factory('Employee', function() {
var data = {};
data.getAllEmployees = function(callback) {
DbService.db.employees.toArray(function(employees) {
callback(employees);
});
};
return data;
});
Thank you all!

{{bindAttr }} {{action}} [Object] Has no method replace

when ember.js tries to render my template containing the following bindAttr. the following exception is thrown in handlebars.js
Uncaught TypeError: Object [object Object] has no method 'replace' handlebars.js:848
bind attr tag:
<div class="postWrapper" {{bindAttr style="display:none"}}>
Update
this also happens when i use the action helper
<div {{action Toggle}} class="btn pull-right">
<i class="postToggler icon-chevron-down " ></i>
</div>
Update Full Code
Template
<script type="text/x-handlebars" data-template-name="Composer">
<div class="postWrapper">
<div class="postContentWrapper" {{bindAttr style="controller.display"}}>
<div class="row-fluid">
<div class="pull-left span10">
To :
<input id="test2" type="text" style="margin-top: 7px;width:90%" />
</div>
<div {{action Toggle}} class="btn pull-right">
<i class="postToggler icon-chevron-down " ></i>
</div>
</div>
<div class="row-fluid" style="height:100%" >
<div id="wmd-button-bar" style="width:48%;display:inline-block" ></div>
<div class="pull-right">
<a>Hide preview</a>
</div>
<div class="wmdWrapper" style="height:80%">
<div class="wmd-panel" style="vertical-align: top;">
<textarea class="wmd-input" id="wmd-input" style="height: 100%;"></textarea>
</div>
<div id="wmd-preview" class="wmd-preview pull-right"></div>
</div>
<br />
</div>
<div class="row-fluid">
<div class="span6 ">
<p>
Tags :
<input id="test" type="text" style="width:80%"/>
</p>
</div>
<div class="span2 pull-right">
<button id="btnSubmitPost" class="btn btn-success pull-right">{{controller.buttonText}}</button>
<button id="btnCanelPost" class="btn btn-warning pull-right">Cancel</button>
</div>
</div>
<div class="row-fluid">
</div>
</div>
</div>
</script>
View and render
/*
MODES
NEW
REPLY
*/
Thoughts.ComposerController = Ember.Object.extend({
mode: 2,
visible: false,
messageContent: "",
buttonText: function () {
switch (this.get("mode")) {
case 1: return "Post";
case 2: return "Reply";
}
}.property(),
display: function () {
if (this.get("visible")) {
return 'display:block';
} else
return 'display:none';
}.property(),
Toggle: function(){
console.log('Helllo');
}
});
Thoughts.ComposerController = Thoughts.ComposerController.create();
Error Information
object dump
string: "data-ember-action="1""
__proto__: Object
constructor: function (string) {
toString: function () {
__proto__: Object
Crashes on the replace method, because the method replace is undefined
Handlebars.Utils = {
escapeExpression: function (string) {
// don't escape SafeStrings, since they're already safe
if (string instanceof Handlebars.SafeString) {
return string.toString();
} else if (string == null || string === false) {
return "";
}
if (!possible.test(string)) { return string; }
----> return string.replace(badChars, escapeChar);
},
So first of all you need to define only need to define the controller. You don't have to create an instance. Ember will do it for you when application initialize.
If you define a property that is observing another in other words its value depends on another, you need this to specify as parameter to property helper.
Thoughts.ComposerController = Ember.Controller.extend({
mode: 2,
visible: false,
messageContent: "",
buttonText: function () {
switch (this.get("mode")) {
case 1: return "Post";
case 2: return "Reply";
}
}.property('mode'),
display: function () {
return 'display:' + this.get('visible') ? 'block' : 'none';
}.property('visible'),
Toggle: function () {
this.toggleProperty('visible');
this.set('mode', this.get('mode') == 2 ? 1 : 2);
}
});
Template itself seems valid.
You can get this working by creating a composer route like this:
this.route('composer');
or by rendering it in another template like this:
{{render 'composer'}}
That should be answer to your question. BUT
Wouldn't be better to use {{if}} helper for showing some content inside of template based on a condition?
i finally found some time to work on this again.
all i did was replace the ember and handlebars js files, and the code is working fine now thanks