I´m trying to add a button which sends me to another HTML File inside the for each LOOP but my problem is once i add something new into the loop it doesn´t display any of the products anymore // "customize product"+ is the code that i´m trying to add but somehow it doesn´t work
This is my code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Produkte</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/custom.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Honig GmbH</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
</div>
</div>
</nav>
<!-- Page Content -->
<div class="container">
<!-- Portfolio Item Heading -->
<h1 class="my-4">Produkte
<small>Übersicht</small>
</h1>
<a class="btn btn-primary" href="product_create.html">Neues Produkt anlegen</a>
<br/>
<!-- Content -->
<div id="ArtikelContainer" class="row">
</div>
<!-- /.container -->
<br/>
<!-- Footer -->
<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">Copyright © Honig GmbH 2018</p>
</div>
<!-- /.container -->
</footer>
<!-- Bootstrap core JavaScript -->
<script src="javascript/jquery/jquery.min.js"></script>
<script src="css/bootstrap/js/bootstrap.bundle.min.js"></script>
<script>
$( document ).ready(function() {});
console.log("Ready");
// var currentId = sessionStorage.getItem('customerId');
$.ajax({
type: "GET",
url: "http://localhost:8081/api/artikel/",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(result){
console.log("Artikel wurde übertragen");
console.log(result);
$.each(result, function(i, item){
console.log(result[i].beschreibung);
console.log(result[i].name);
$("#ArtikelContainer").append(
"<div class='col-lg-3 col-md-4 col-sm-6 portfolio-item'>"+
"<div class='card h-100'>"+
"<a href='#'><img class='card-img-top' src='"+result[i].bildpfad+"' height='200' width='140'></a>"+
"<div class='card-body'>"+
" <h4 class='card-title'>"+
"<a href='#'>"+result[i].name+"</a>"+
"</h4>"+
"<p id=artikel"+ result[i].artikelId + " class='card-text'>Artikelnummer: "+result[i].artikelId+"</p>"+
"<p class='card-text'> Beschreibung: "+result[i].beschreibung+"</p>"+
"</div>"+
// I´m trying to add this part into the loop "<a class="btn btn-primary" href="product_create.html">customize product</a>"+
" </div>"+
"</div>"
);
});
},complete: function(xhr, statusText){
//alert(xhr.status);
console.log(xhr.status + ": " + "Home - Completed!");
},error: function(xhr, errMsg) {
if(xhr.status==401){
alert(xhr.status + ": " + "Benutzername oder Passwort ist ungültig");
}
}
});
function btn_click() {
artikelId: $('#artikelId').val();
// var artikelnummer = sessionStorage.setItem("artikelId");
document.location = index.html;
alert(artikelnummer);
}
function url(){
document.location = 'http://somewhere.com/';
}
</script>
</body>
so everytime I add anything into the loop all my products disappear
I´m gladful for any help and any help is appreciated, I have been stuck a while on this now
As was mentioned, you can only use certain quotes inside of quotes. For example, if you define a String with double quotes ("), then inside, you must use single quotes (') and vice-versa.
Take a look:
$(function() {
console.log("Ready");
var result = [{
beschreibung: "Text 1",
name: "Name 1",
bildpfad: "Source 1",
artikelId: 1
}, {
beschreibung: "Text 2",
name: "Name 2",
bildpfad: "Source 2",
artikelId: 2
}, {
beschreibung: "Text 3",
name: "Name 3",
bildpfad: "Source 3",
artikelId: 3
}];
console.log("Artikel wurde übertragen");
console.log(result);
$.each(result, function(i, item) {
var content = "";
content += "<div class='col-lg-3 col-md-4 col-sm-6 portfolio-item'>";
content += "<div class='card h-100'>";
content += "<a href='#'><img class='card-img-top' src='" + result[i].bildpfad + "' height='200' width='140'></a>";
content += "<div class='card-body'>";
content += "<h4 class='card-title'><a href='#'>" + item.name + "</a></h4>";
content += "<p id='artikel" + item.artikelId + "' class='card-text'>Artikelnummer: " + item.artikelId + "</p>";
content += "<p class='card-text'> Beschreibung: " + item.beschreibung + "</p></div>";
content += "<a class='btn btn-primary' href='product_create.html'>customize product</a>";
content += "</div></div>";
$("#ArtikelContainer").append(content);
});
/*
var currentId = sessionStorage.getItem('customerId');
$.ajax({
type: "GET",
url: "http://localhost:8081/api/artikel/",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(result) {
console.log("Artikel wurde übertragen");
console.log(result);
$.each(result, function(i, item) {
console.log(result[i].beschreibung);
console.log(result[i].name);
$("#ArtikelContainer").append(
"<div class='col-lg-3 col-md-4 col-sm-6 portfolio-item'>" +
"<div class='card h-100'>" +
"<a href='#'><img class='card-img-top' src='" + result[i].bildpfad + "' height='200' width='140'></a>" +
"<div class='card-body'>" +
" <h4 class='card-title'>" +
"<a href='#'>" + result[i].name + "</a>" +
"</h4>" +
"<p id=artikel" + result[i].artikelId + " class='card-text'>Artikelnummer: " + result[i].artikelId + "</p>" +
"<p class='card-text'> Beschreibung: " + result[i].beschreibung + "</p>" +
"</div>" +
// I´m trying to add this part into the loop "<a class="btn btn-primary" href="product_create.html">customize product</a>"+
" </div>" +
"</div>"
);
});
},
complete: function(xhr, statusText) {
//alert(xhr.status);
console.log(xhr.status + ": " + "Home - Completed!");
},
error: function(xhr, errMsg) {
if (xhr.status == 401) {
alert(xhr.status + ": " + "Benutzername oder Passwort ist ungültig");
}
}
});
*/
function btn_click() {
artikelId: $('#artikelId').val();
// var artikelnummer = sessionStorage.setItem("artikelId");
document.location = index.html;
alert(artikelnummer);
}
function url() {
document.location = 'http://somewhere.com/';
}
});
<!-- Bootstrap core CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Honig GmbH</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
</div>
</div>
</nav>
<!-- Page Content -->
<div class="container">
<!-- Portfolio Item Heading -->
<h1 class="my-4">Produkte
<small>Übersicht</small>
</h1>
<a class="btn btn-primary" href="product_create.html">Neues Produkt anlegen</a>
<br/>
<!-- Content -->
<div id="ArtikelContainer" class="row">
</div>
<!-- /.container -->
<br/>
<!-- Footer -->
<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">Copyright © Honig GmbH 2018</p>
</div>
<!-- /.container -->
</footer>
Hope that helps.
Related
I've a sample JSON:
[
{
"componentid": 4,
"displayImageUrl": "https://via.placeholder.com/350x200",
"title": "theme",
"shortdesc": "to set theme for different applications"
},
{
"componentid": 7,
"displayImageUrl": "https://via.placeholder.com/350x200",
"title": "preferences",
"shortdesc": "preferences screen for apps"
}
]
I've a JavaScript code that goes through above JSON and fetches the data
function prepareTopComponentList(data) {
try {
var preparedHtml = "";
for (var count = 0; count < data.length; count++) {
preparedHtml += "<div class=\"col-lg-4\" style=\"margin-top: 20px\">\n" +
" <div class=\"card wow fadeIn\" data-wow-delay=\"0.2s\">\n" +
" <img class=\"img-fluid\" src=\"";
preparedHtml += data[count].displayImageUrl;
preparedHtml += "\" alt=\"N/A\">\n" +
" <div class=\"card-body\">\n" +
" <h4 class=\"card-title\">";
preparedHtml += data[count].title;
preparedHtml += "</h4>\n" +
" <p class=\"card-text\">";
preparedHtml += data[count].shortdesc;
preparedHtml += "</p>\n" +
" <a onclick='Redirect(this)' href='#' class=\"btn btn-info\" id=\"";
preparedHtml += "component_desc_=" + data[count].componentid;
preparedHtml += "\">Learn more</a>\n" +
" </div>\n" +
"\n" +
" </div>\n" +
" </div>";
}
$("#div_top_component").append(preparedHtml);
} catch (err) {
}
}
function Redirect(element) {
try {
window.location = "http://localhost:9090/Reusable%20Components/pages/homepage.php?" + element.id;
} catch (err) {
}
}
I also have a HTML code for displaying error:
<!--Error/Warning Modal-->
<div class="modal fade" id="modal_show_error" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="modal_error_title"></h4>
</div>
<div class="modal-body">
<p id="modal_error_description"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Okay</button>
</div>
</div>
</div>
</div>
I'm fetching componentid from JSON. But if it is NULL, then I want a bootstrap error pop up saying that componentid is NULL. Catch block of above JavaScript code is empty, I'm not getting what code I should put there to get bootstrap error pop up.
If you want no string to be appened at all if one of the items is invalid, you can use the following (I did it in es6, but you get the id)
If you want only the valid items to be appened, you can just replace the throw statement by return memo;
try {
const preparedHtml = data.reduce((memo, item) => {
if(typeof(item.componentid) === typeof(null))
throw new Error(`All items must have a componentid`);
const htmlChunk = `<div class="col-lg-4" style="margin-top: 20px">\n
<div class="col-lg-4" style="margin-top: 20px">\n
<div class="card wow fadeIn" data-wow-delay="0.2s">\n
<img class="img-fluid" src="${item.displayImageUrl} alt="N/A">\n
<div class="card-body">\n
<h4 class="card-title">${item.title}</h4>\n
<p class="card-text">${item.shortdesc}</p>\n
<a onclick='Redirect(this)'
href='#' class=\"btn btn-info\" id=\""
component_desc_="${item.componentid}">Learn more</a>\n
</div>\n\n
</div>\n
</div>`;
return memo.concat(htmlChunk);
}, '');
$('#div_top_component').append(preparedHtml);
} catch (err) {
//bootstrap modal code
}
The === is used to check the quality of the value and the type of variable....
You can do something like this...
if(data[count].componentid === undefined || data[count].componentid === null){
//Use your modal code
}
else{
//preparedHTML code
}
I am creating Angular app and I need two templates(one for working with workout and one for working with diet) so I created workout.html and diet.html and I want to change page content in ng-view but now it isn't work(I get blank content).
index.html
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>WorkoutExport</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="js/script.js"></script>
<link rel="stylesheet" href="css/style.min.css">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body ng-controller="workoutController">
<div class= "container">
<div class="col-sm-10 col-sm-offset-1 appContent">
Workout
Diet
<div id="main">
<div ng-view></div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
script.js
var app = angular.module("app", ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'pages/workout.html',
controller : 'workoutController'
})
.when('/diet', {
templateUrl : 'pages/diet.html',
controller : 'dietController'
})
});
app.controller('workoutController', function($scope) {
$scope.records = [
{workout: "", series:"", reps: "", day: ""}
];
// add record
$scope.add = function() {
$scope.records.push( {workout: $scope.inputExercise,series: $scope.inputSeries, reps:$scope.inputReps, day:$scope.inputDay});
$scope.inputExercise="";
$scope.inputSeries="";
$scope.inputReps="";
$scope.inputDay="";
};
// delete record
$scope.remove = function(index) {
$scope.records.splice(index, 1);
};
//export as PDF
$scope.export = function(){
html2canvas(document.getElementById('exportpdf'), {
onrendered: function (canvas) {
var data = canvas.toDataURL();
var docDefinition = {
content: [{
image: data,
width: 500,
}]
};
pdfMake.createPdf(docDefinition).download("workoutPlan.pdf");
}
});
}
$scope.MondayFilter = function (item) {
return item.day === 'Monday' ;
};
$scope.TuesdayFilter = function (item) {
return item.day === 'Tuesday' ;
};
$scope.WednesdayFilter = function (item) {
return item.day === 'Wednesday' ;
};
$scope.ThursdayFilter = function (item) {
return item.day === 'Thursday' ;
};
$scope.FridayFilter = function (item) {
return item.day === 'Friday' ;
};
$scope.SaturdayFilter = function (item) {
return item.day === 'Saturday' ;
};
$scope.SundayFilter = function (item) {
return item.day === 'Sunday' ;
};
});
app.controller('dietController', function($scope) {
$scope.message =' Diet';
};
pages/workout.html
<h1>WorkoutExport</h1>
<p>Tool for creating workout plans build with AngularJS</p>
<h2>Add exercise</h2>
<div>
<input type="text" ng-model="inputExercise" placeholder="Enter the exercise">
<input type="text" ng-model="inputSeries" placeholder="Enter the number of series">
<input type="text" ng-model="inputReps" placeholder="Enter the range of repetition">
<select ng-model="inputDay">
<option>Monday</option>
<option>Tuesday</option>
<option>Wednesday</option>
<option>Thursday</option>
<option>Friday</option>
<option>Saturday</option>
<option>Sunday</option>
</select>
<button class="btn btn-default" type="submit" ng-click="add()"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>
</div>
<div id="exportpdf">
<h2>Your training plan</h1>
<ul>
<h3>Monday</h3>
<li ng-repeat="record in records | filter:MondayFilter">
{{"Exercise: " + " " + record.workout + " " + "Number of series:" + " " + record.series + " " + "Number of reps:" + " " + record.reps}}
<button class="btn btn-default" ng-click="remove($index)"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
</li>
</ul>
<ul>
<h3>Tuesday</h3>
<li ng-repeat="record in records | filter:TuesdayFilter">
{{"Exercise: " + " " + record.workout + " " + "Number of series:" + " " + record.series + " " + "Number of reps:" + " " + record.reps }}
<button class="btn btn-default" ng-click="remove($index)"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
</li>
</ul>
<ul>
<h3>Wednesday</h3>
<li ng-repeat="record in records | filter:WednesdayFilter">
{{"Exercise: " + " " + record.workout + " " + "Number of series:" + " " + record.series + " " + "Number of reps:" + " " + record.reps }}
<button class="btn btn-default" ng-click="remove($index)"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
</li>
</ul>
<ul>
<h3>Thursday</h3>
<li ng-repeat="record in records | filter:ThursdayFilter">
{{"Exercise: " + " " + record.workout + " " + "Number of series:" + " " + record.series + " " + "Number of reps:" + " " + record.reps }}
<button class="btn btn-default" ng-click="remove($index)"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
</li>
</ul>
<ul>
<h3>Friday</h3>
<li ng-repeat="record in records | filter:FridayFilter">
{{"Exercise: " + " " + record.workout + " " + "Number of series:" + " " + record.series + " " + "Number of reps:" + " " + record.reps }}
<button class="btn btn-default" ng-click="remove($index)"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
</li>
</ul>
<ul>
<h3>Saturday</h3>
<li ng-repeat="record in records | filter:SaturdayFilter">
{{"Exercise: " + " " + record.workout + " " + "Number of series:" + " " + record.series + " " + "Number of reps:" + " " + record.reps }}
<button class="btn btn-default" ng-click="remove($index)"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
</li>
</ul>
<ul>
<h3>Sunday</h3>
<li ng-repeat="record in records | filter:SundayFilter">
{{"Exercise: " + " " + record.workout + " " + "Number of series:" + " " + record.series + " " + "Number of reps:" + " " + record.reps }}
<button class="btn btn-default" ng-click="remove($index)"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
</li>
</ul>
</div>
<button class="btn btn-default exportBtn" ng-click="export()">export to PDF</button>
pages/diet.html
<h1>DietPage</h1>
{{message}}
Do you see some wrong code? I appreciate any help.
Your Diet Controller is missing a bracket:
app.controller('dietController', function($scope) {
$scope.message =' Diet';
});
You are also not loading in the ngRoute Library (https://docs.angularjs.org/api/ngRoute)
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js" type="text/javascript"></script>
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>WorkoutExport</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="js/script.js"></script>
<link rel="stylesheet" href="css/style.min.css">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body ng-controller="workoutController">
<div class= "container">
<div class="col-sm-10 col-sm-offset-1 appContent">
Workout
Diet
<div id="main">
<div ng-view></div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Making these two changes, and it works for me now.
to change route in Single Page Application (SPA) in AngularJS you dont use just
Diet
I would change the index.html so it would contain another controller for the navigation with a banner and not assign the workoutController there.
more, for changing route in angular you need to inject ngRoute in you app creation:
var app = angular.module("app", ['ngRoute']);
and use it in a function like this:
app.controller('workoutController', function($scope, $location) {
$scope.navigate = function(pageToNavigate) {
$location.path(pageToNavigate);
}
});
you can build navigation that will activate with ng-click and wil invoke $location.path
I'm fetching images from SharePoint REST API and writing the calls along with HTML into an HTML doc.
Specifically a Bootstrap Modal Carousel.
I'm getting all the images and content writing to some tiles. The problem are the images in the Modal.
The user clicks on an icon, the Modal fires, the first image in the Carousel displays but it won't navigate next/previous, even though the HTML is being written for each one.
Here's the HTML:
<div class="container">
<!-- GLOBAL NAVIGATION -->
<div class="row">
<div class="col-md-12">
<script type="text/javascript" src="/js/nav.js"></script>
</div>
</div><!-- /end global nav -->
<!-- TILE WRAPPER -->
<div class="row bgTexture bgTexture2 ">
<div class="col-md-12">
<!-- TOP ROW OF TILES -->
<div class="row aoTilesTopWrapper">
<h2>TITLE GOES HERE</h2>
<!-- ///////// BOOTSTRAP ROTATOR -->
<div class=" col-md-12 allModals">
</div><!-- /end allModals -->
</div>
<!-- ///////// end bootstrap modal -->
</div><!-- /end row - top row -->
<!-- BOTTOM ROW OF TILES -->
<div class="row aoTilesBottomWrapper">
<!-- BOTTOM ROW TILES GO HERE -->
</div><!-- /end row - bottom row -->
</div><!-- /end col-md-12 -->
</div><!-- /end main row -->
</div><!-- /end container /content -->
<script src="/js/jquery.min.js" type="text/javascript"></script>
<script src="/js/bootstrap.min.js" charset="utf-8"></script>
<script src="/js/custom.js" charset="utf-8"></script>
<script src="/js/add-ons.js" charset="utf-8"></script>
<script>
// Select third list item
var liToSelect = 7;
$(".nav.nav-pills li:eq("+(liToSelect-1)+")").addClass("active");
$(document).ready(function(){
addOns();
});
$('.carousel').carousel({
pause: true,
interval: false
});
</script>
JS/Ajax:
function addOns(){
$.ajax({
async: false,
url: "/_api/lists/getByTitle('Products')/items",
type: "GET",
headers: { "Content-Type": "application/json;odata=verbose", "Accept": "application/json;odata=verbose" },
success: function (data) {
$.each(data.d.results, function () {
var itemID = this.Id;
// Image tiles
var aoTiles = "<div class='col-sm-4 tile' data-imageID='" + this.Id + "'><span class='openRotator' data-toggle='modal' data-target='.itemID" + this.Id + "'><a href='#'><img src='/media/new-window-icon.png' width='20'/></a></span><div class='tileImg'><img src='" + this.Tile_x0020_Thumbnail_.Url + "'/></div><div class='tileTitle'>" + this.Title + "</div><div class='tilePrice'>" + this.Content_x0020_Starting_x.toFixed(2) + "</div></div>";
$(".aoTilesTopWrapper").append(aoTiles);
// Modal
$(".allModals").append("<div class='modal fade bs-example-modal-lg itemID" + this.Id + "' tabindex='-1' role='dialog' aria-labelledby='myLargeModalLabel' aria-hidden='true'><div class='modal-dialog modal-lg'><div class='modal-content'><div id='carouselId" + this.ID + "' class='carousel slide' data-ride='carousel'><!-- Wrapper for slides --><div id='carousel' class='carousel-inner'><!-- Gallery images go here --></div><!-- Controls --><a class='left carousel-control' href='#carouselId" + this.Id + "' role='button' data-slide='prev'></a> <a class='right carousel-control' href='#carouselId" + this.Id + "' role='button' data-slide='next'></a></div></div></div></div>");
// Carousel divs002
$.each(this.Carousel_x0020_Image_x002.split(";"), function () {
$(".modal.itemID"+ itemID +" .carousel-inner").append("<div class='item'><img src='" + this + "'/></div>");
});
});
},
error: function (data) {
alert(data.statusText);
}
});
return true;
}
Any idea why the carousel images aren't sliding?
You're going to laugh. The first <div class="item"> needed the .active class in order for it to work.
Duh!
When I click on RSS items in my mobile app, I would like to see same page footer as I have in my first page. I've created my app using Cordova 4.3.0, jQuery mobile and read RSS feeds using jQuery in my onDeviceReady() function in index.js file as follow:
onDeviceReady: function () {
$(function () {
$.get('http:myRssUrl.cshtml',function(data) {
var $XML = $(data);
var html = '';
$XML.find("item").each(function() {
var $this = $(this),
item = {
title: $this.find("title").text(),
link: $this.find("link").text(),
description: $this.find("description").text(),
pubDate: $this.find("pubDate").text(),
author: $this.find("author").text(),
enclosure: $this.find("enclosure").attr('url'),
};
html +=
'<a class="result-link" title=" " style="text-decoration: none" href="' + item.link + '" style="font-size: 11px" >' +
'<div class="result-image">' +
' <figure>' +
'<img src="' + item.enclosure + '" style="display: block;"></img>' +
'</figure>' +
'</div>' +
'<div class="alltext" style="padding-right: 5px;">' +
'<h3 class="result-title">' + item.title +'</h3>' +
'<div class="result-description">' + item.description +'</div>' +
'</div></a>'
});
jQuery('#result').html(html);
});
});
app.receivedEvent('deviceready');
}
I also have my footer navigation bar in footer.html file which will be loaded in index.html file as follows:
<script>
$(document).on('pageinit', "#index", function (event, ui){
$("#" + event.target.id).find("[data-role=footer]").load("pages/footer.html", function(){
$("#" + event.target.id).find("[data-role=navbar]").navbar();
});
});
</script>
<body>
<div data-role="page" class="app" id="index">
<div data-role="header" data-position="fixed" data-id="main-header" id="header">
<div data-role="navbar" class="ui-btn-active ui-state-persist">
<ul>
<li>
</li>
<li></li>
</ul>
</div><!-- /navbar -->
</div><!-- /header -->
<div data-role="content" data-theme="d" id="deviceready">
<div id="result" data-role="listview">
</div>
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-id="main-footer" id="footer">
</div><!-- /footer -->
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
My problem is that I can't load my page footer navbar in my RSS pages, I saw some relevant examples about it and applied different approaches, but still have the same problem.
each time I click on a Post link I want the Title of the Post to appear on the Header page. See screen shot
As seen, I would like the 'Devotional Message' replaced by the Post Title...
HTML Code:
<div id="devotionpost" data-role="page">
<div data-role="header" data-position="fixed" data-theme="a">
<h1>Devotional Message</h1>
Devotion
</div><!-- header-->
<div data-role="content">
<div id="mypost"> </div>
</div><!-- content -->
</div><!-- page -->
JS Code:
function showPost(id) {
$.getJSON('http://howtodeployit.com/?json=get_post&post_id=' + id + '&callback=?', function(data) {
var output='';
output += '<h3>' + data.post.title + '</h3>';
output += data.post.content;
$('#mypost').html(output);
});
function showPost(id) {
$("#devotionpost h1").html("");// to empty previous title
$.getJSON('http://howtodeployit.com/?json=get_post&post_id=' + id + '&callback=?', function(data) {
var output='';
output += '<h3>' + data.post.title + '</h3>';
output += data.post.content;
$('#mypost').html(output);
$("#devotionpost h1").html(data.post.title);// by this 'Devotional Message' replaced by the Post Title..
});