How can i use the function ng-click in my case? - javascript

I have a div with pictures who change every 9 seconds, i want to keep it but i want to change the picture when user click on. I think the most easy is to use the ng-click function, but i don't know how
My code :
In the HTLM :
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 session fondbleuSession">
<div>
<div ng-controller="eventCtrl">
<div ng-repeat="data in event" ng-if="data.id == actualSession">
<div class="sessionTxt">
<h1>{{data.title}} </h1>
<p>{{data.description}} </p>
</div>
<!-- ng-click here ? --> <a ng-href="{{data.url}}" class="sessionImg" ng-style="{'background-image':'url({{data.src}})'}" >
</a>
</div>
</slider>
</div>
</div>
</div>
And
In eventCtrl
app.controller('eventCtrl', function($scope, $interval) {
$scope.actualSession = 0;
var sessionLength = 0;
// INFORMATION GENERAL EVENT
// id = reference de l'image pour l'ordre de passage (+1 a chaque nouveau slide ajouté)
// title = titre de l'event
// description = resume rapide de l'event
// src = adresse de l'image
// url = lien de redirection vers article/sharepoint...
$scope.event = [
{
"id": 1,
"title": "Site Events",
"description": "",
"src": "images/index/event/Photo1.jpg",
"url": ""
},
{
"id": 2,
"title": "Site Events",
"description": "",
"src": "images/index/event/Photo2.jpg",
"url": ""
},
{
"id": 3,
"title": "Site Events",
"description": "",
"src": "images/index/event/Photo3.jpg",
"url": ""
},
{
"id": 4,
"title": "Site Events",
"description": "",
"src": "images/index/event/Photo4.jpg",
"url": ""
},
{
"id": 5,
"title": "Site Events",
"description": "",
"src": "images/index/event/Photo5.jpg",
"url": ""
}
];
sessionLength = _.size($scope.event);
$interval(function() {
$scope.actualSession = $scope.actualSession + 1;
if ($scope.actualSession == sessionLength) {
$scope.actualSession = 0;
}
}, 9000); //timer switch event (1000 = 1 seconde)
})
And i don't know if it's possible to have this two function : change the picture automatically after x seconds and change the picture when the user click.
Furthermore, i don't know who to go to the first picture when we come on the last picture
Thank you very much and have a nice day

Try wraping a div around the anchor tag and use ng-click there, hopefully it should work.

If you're looking to change the actionSession variable, it should be straightforward:
ng-click="ctrl.someFunc()"
Then in the controller:
someFunc() {
$scope.actualSession = $scope.actualSession === sessionLength - 1 ? 0 : $scope.actualSession++;
}

Related

PHP Simple HTML DOM Parser for JavaScript Code Within the Page

I'm using PHP Simple DOM Parser, the HTML part is working as expected, but some of the content of the web page is shown with JavaScript. The JavaScript is within the HTML page not a separate file and the information I need is clear, in plain text.
This is how the JavaScript code starts, the information needed is in the end (location):
<script id="state">
window.__INITIAL_STATE__ = {
"detail": {
"listingTopNavigation": {},
"isTracked": false,
"id": 30279925,
"isImported": false,
"isErotic": false,
"isMessengerEnabled": false,
"categories": [{
"name": "Musique - Instruments",
"id": 23,
"isErotic": false
}, {
"name": "Guitares & Accessoires",
"id": 697,
"isErotic": false
}, {
"name": "Electrique",
"id": 2354,
"isErotic": false
}],
"imageData": {
"baseUrl": "https:\u002F\u002Fcan01.anibis.ch\u002FElectrique-Line-6-DL-4-Delay-Modeler",
"images": ["\u002F?[size]\u002Fanibis\u002F925\u002F279\u002F030\u002FLSmd7oN9LU6lAP5EbJQXXg_1.jpg", "\u002F?[size]\u002Fanibis\u002F925\u002F279\u002F030\u002Fhn2lNMOudUmuZofpM7wrsg_1.jpg", "\u002F?[size]\u002Fanibis\u002F925\u002F279\u002F030\u002FJKBbte21vEaD7ZJqcMi_Qg_1.jpg"]
},
"title": "Line 6 DL 4 Delay Modeler",
"description": "\u003Cp\u003EVerkaufe mein Delay DL 6 in absolut neuwertigem Zustand wegen Nichtgebrauch. Das Delay habe ich im Dezember 2018 neu bei Musix gekauft und verfügt über eine tolle Auswahl an Delay Effekten, welche auf Fender Gibson Marshall oder Vox in Extraklasse daherkommen. Das Gerät ist optisch und technisch absolut neuwertig, kommt in Originalverpackung und mit dem passenden Netzadapter von Line 6. \u003C\u002Fp\u003E\n",
"price": 190,
"offerType": "Offer",
"formattedPrice": "CHF 190.–",
"formattedModified": "19.08.2019",
"details": [{
"name": "Remise",
"value": "Retrait et envoi "
}, {
"name": "Type d’annonce",
"value": "Offre"
}],
"location": {
"country": "Suisse",
"state": "Soleure",
"zipCity": "4625 Oberbuchsiten (SO)"
},
How can I get these values in PHP variables to use after.
$country = $html->find(...);
$state = $html->find(...);
$zip_city = $html->find(...);
Thanks.
if ($html) {
if ($html->find('script[id=state]', 0)) {
$script = $html->find('script[id=state]', 0);
$script = ltrim($script, '<script id="state">window.__INITIAL_STATE__=');
$script = rtrim($script, '</script>');
$obj = json_decode($script, true);
if (isset($obj['detail']['contact']['phone'])) {
$tel = $obj['detail']['contact']['phone'];
$tel = ltrim($tel, '+41 ');
if (isset($obj['detail']['location']['street']))
$address = trim($obj['detail']['location']['street']);
if (isset($obj['detail']['location']['zipCity']))
$npa_ville = trim($obj['detail']['location']['zipCity']);
$npa_ville = explode(' ', $npa_ville, 2);
$npa = preg_replace('/[^0-9]/', '', $npa_ville[0]);
$ville = $npa_ville[1];

How to load different part of data from JSON file for each page using AngularJS?

I'm trying to create a shopping website using angularJs. My website has several html pages like women.html, men.html,...
I has 1 JSON file for the whole website. I want each website has different products, I did it but it only works on the main page (the page which showing all the products). When I click on a specific product, it doesn't show anything thing.
For more clearly, here is my code:
JSON file:
{
"Men": [
{
"name": "Adidas",
"price": 20,
"id": "adidas1",
"image": "pic4.png",
"description": "abcđsfadfdfsgsg"
},
{
"name": "Nike",
"price": 37,
"id": "nike1",
"image": "pic2.png",
"description": "abcđsfadfdfsgsg"
},
{
"name": "Converse",
"price": 25,
"id": "converse1",
"image": "pic3.png",
"description": "abcđsfadfdfsgsg"
}
],
"Women": [
{
"name": "Adidas2",
"price": 20,
"id": "adidas2",
"image": "pic6.png",
"description": "abcđsfadfdfsgsg"
},
{
"name": "Nike2",
"price": 37,
"id": "nike2",
"image": "pic7.png",
"description": "abcđsfadfdfsgsg"
},
{
"name": "Converse2",
"price": 25,
"id": "converse2",
"image": "pic5.png",
"description": "abcđsfadfdfsgsg"
}
]
}
Men.html:
<div ng-repeat="item in items.Men" style="float:left;">
<div><a href="#/item/{{item.name}}"><img src="/image/{{item.image}}" />
</a>
</div>
</div>
Women.html:
<div ng-repeat="item in items.Women" style="float:left;">
<div>
<a href="#/item/{{item.name}}"><img src="/image/{{item.image}}" />
</a>
</div>
</div>
App.js:
app.controller('ItemCtrl',
['$scope', '$routeParams', 'cartService',
function ($scope, $routeParams, cartService) {
$scope.item = {};
angular.forEach($scope.items, function (item) {
if (item.name == $routeParams.itemName) {
$scope.item.itemName = item.name;
$scope.item.itemPrice = item.price;
$scope.item.itemId = item.id;
$scope.item.itemImage = item.image;
$scope.item.itemDescription = item.description;
}
});
$scope.addProduct = function (item) {
cartService.addToCart(item, $scope.numberOfProducts);
};
}
]);
Product details page:
<div style="float:left; margin:0px 50px 300px 50px;">
<img src="/image/{{item.itemImage}}" style="margin- bottom:50px;margin-
left:200px;">
<p style="margin-right:0px;margin-top:50px;margin-left:50px;">Description:
{{item.itemDescription}}</p>
</div>
The code is really long so I only show its parts which I think making my code doesn't work.
Hopefully, there would be some help. Thanks in advance!
Check whether 'ItemCtrl' controller is binded to both men.html and women.html, if both the html files are not views.
Make two controllers and use $http method to call each page.Then using scope,reference data that you want and render in each page

Onclick select specific set of JSON Data

I have a JSON object, like so:
{
"workouts":
[
{
"title": "Full Body",
"exercises":
[
{
"name": "Push Ups",
"duration": 3,
"break": 3
},
{
"name": "Squats",
"duration": 3,
"break": 3
},
{
"name": "Running in Place",
"duration": 3,
"break": 3
}
]
},
{
"title": "God Legs",
"exercises":
[
{
"name": "Running in Place (High Knees)",
"duration": 3,
"break": 3
},
{
"name": "Squats",
"duration": 3,
"break": 3
},
{
"name": "Clams",
"duration": 3,
"break": 3
}
]
},
{
"title": "Morning Stretch",
"exercises":
[
{
"name": "Downward Dog",
"duration": 3,
"break": 3
},
{
"name": "Face Plant",
"duration": 3,
"break": 3
},
{
"name": "Warrior",
"duration": 3,
"break": 3
}
]
}
]
}
I am looping through this data to create a list of cards dynamically. I would like to make it so that when a card is tapped/clicked, the information relative to that specific data set is displayed/accessed.
EXAMPLE if I tap the card with the "Full Body" title, I would like a list to be displayed containing only the exercises in the "Full Body" exercises array, which should be: Push Ups, 3, 3 - Squats, 3, 3 - Running in Place 3, 3.
I am using Firebase to host my data on the real time database.
HTML:
<!--LIST THAT THE DYNAMICALLY GENERATED CARDS ARE APPENDED TO-->
<ul id="cardList" class="cards"></ul>
<!--MARKUP FOR THE CARDS, USED IN THE JSON FOR LOOP-->
<li>
<div class='card' onclick='selectWorkout(this)'>
<a class='startIt' href='timer.html'>
<div class='cardInfo'>
<h3>Full Body</h3>
<p>10 min.</p>
</div>
</a>
<a class='cardOptions' href='overview.html'>
<p>Options</p>
</a>
</div>
</li>
JavaScript:
// Initialize Firebase.
firebase.initializeApp(config);
// Reference data.
var dbRef = firebase.database().ref().child("workouts");
// Sync with Firebase in real time.
dbRef.on("value", snap =>
{
var workouts = snap.val();
for (var i = 0; i < workouts.length; i++) // WORKS GREAT.
{
//display.innerHTML = exercises[0].name;
//$("#cardList").append(exercises[i].title);
var routine = workouts[i].title;
$("#cardList").append("<li><div class='card'><a class='startIt' href='#' onclick='selectWorkout(this)'>\n\
<div class='cardInfo'><h3>" + routine + "</h3><p>10 min.</p>\n\
</div></a><a class='cardOptions' href='overview.html'>\n\
<div id='options'><p>Options</p></div></a></div></li>"); // ALL GOOD.
}
function selectWorkout(this) // NOT ONLY DOES NOT ACHIEVE DESIRED GOAL, BREAKS ENTIRE FUNCTION.
{
var selected = workouts[this].exercises;
$("#cardList").append(selected);
}
});
I think I am doing, as usual, something stupid: It would seem "this" is not allowed in the workouts square brackets, but how do I get a specific set of data otherwise?
Yeah, you can't pass in this as a parameter name - it's a reserved word. In general I'd try to avoid using this in javascript if you can - it's really tricky.
A more robust way to do this is to create your card HTML as a separate jQuery object and add a specific clickhandler, like this:
var routine = workouts[i].title;
//create card element
var $card = ("<li><div class='card'><button class='startIt'><div class='cardInfo'><h3>" + routine + "</h3><p>10 min.</p></div></a><a class='cardOptions' href='overview.html'> <div id='options'><p>Options</p></div></button></div></li>");
//add click handler
$card.find("button.startIt").on("click", function() {
selectWorkout( workouts[i] );
});
//put card on the page
$("#cardList").append($card);
And then
function selectWorkout(workout)
{
var selected = workout.exercises;
//not sure what you're trying to do here??
$("#cardList").append(selected);
}
You may notice that I've changed your <a href='#'> into a <button> - generally better for accessibility!

Using JSONP with the flickr api

i`ve got this JSONP response from the FLICKR api and i want to creat with the "link" as the source from each of them. i try doing this but nothing happend. and i have write a
<script src = "https://api.flickr.com/services/feeds/photos_public.gne?format=json"></script>
the javascript:
function jsonFlickrFeed(data)
{
for(var a = 0 ; a < 5 ; a++)
{
var img = document.createElement(img);
img.src = data.items[i].link;
}
}
then
jsonFlickrFeed({
"title": "Uploads from everyone",
"link": "https://www.flickr.com/photos/",
"description": "",
"modified": "2015-09-22T22:17:01Z",
"generator": "https://www.flickr.com/",
"items": [
{
"title": "بالصور| أفضل الفنادق في مراكش",
"link": "https://www.flickr.com/photos/131615921#N08/21014053604/",
"media": {"m":"https://farm6.staticflickr.com/5645/21014053604_251062f1df_m.jpg"},
"date_taken": "2015-09-22T15:17:01-08:00",
"description": " <p><a href=\"https://www.flickr.com/people/131615921#N08/\">www.7aya.net<\/a> posted a photo:<\/p> <p><a href=\"https://www.flickr.com/photos/131615921#N08/21014053604/\" title=\"بالصور| أفضل الفنادق في مراكش\"><img src=\"https://farm6.staticflickr.com/5645/21014053604_251062f1df_m.jpg\" width=\"240\" height=\"149\" alt=\"بالصور| أفضل الفنادق في مراكش\" /><\/a><\/p> <p>قدم موقع التلغراف في قسمه المخصص للسفر قائمة بأفضل الفنادق في مدينة مراكش المغربية، وقد شملت القائمة الفنادق الفاخرة و الفنادق الرخيصة والفنادق الصديقة للعائلة، وبينما تظهر المزيد من الفنادق الجديدة في جميع أنحاء المدينة، تم تحويل أكثر من 200 من رياض المدينة إلى بيوت الضيافة، وفيما يلي 10 من أفض... <br /> <br /> <a href=\"http://www.7aya.net/2015/09/23/%d8%a8%d8%a7%d9%84%d8%b5%d9%88%d8%b1-%d8%a3%d9%81%d8%b6%d9%84-%d8%a7%d9%84%d9%81%d9%86%d8%a7%d8%af%d9%82-%d9%81%d9%8a-%d9%85%d8%b1%d8%a7%d9%83%d8%b4/\" rel=\"nofollow\">www.7aya.net/2015/09/23/%d8%a8%d8%a7%d9%84%d8%b5%d9%88%d8...<\/a><\/p>",
"published": "2015-09-22T22:17:01Z",
"author": "nobody#flickr.com (www.7aya.net)",
"author_id": "131615921#N08",
"tags": ""
},
{
"title": "Bebiendo #Café #cafe #café #Oaxaca #Neurona #Neuroname http://Neurona.me",
"link": "https://www.flickr.com/photos/46158081#N07/21014054554/",
"media": {"m":"https://farm6.staticflickr.com/5699/21014054554_27b54fc07f_m.jpg"},
"date_taken": "2015-09-22T17:17:04-08:00",
"description": " <p><a href=\"https://www.flickr.com/people/46158081#N07/\">puente sur<\/a> posted a photo:<\/p> <p><a href=\"https://www.flickr.com/photos/46158081#N07/21014054554/\" title=\"Bebiendo #Café #cafe #café #Oaxaca #Neurona #Neuroname http://Neurona.me\"><img src=\"https://farm6.staticflickr.com/5699/21014054554_27b54fc07f_m.jpg\" width=\"240\" height=\"240\" alt=\"Bebiendo #Café #cafe #café #Oaxaca #Neurona #Neuroname http://Neurona.me\" /><\/a><\/p> ",
"published": "2015-09-22T22:17:04Z",
"author": "nobody#flickr.com (puente sur)",
"author_id": "46158081#N07",
"tags": "square squareformat iphoneography instagramapp uploaded:by=instagram"
}]}
There's a few problems with the original code:
items[i] refers to i which is undefined since you're looping over a.
The link attribute on each data item is a link to an HTML page containing the image, not a src for the image itself. You would want to use the media attribute which is a direct link to the image.
img needs quotes when creating the image element
You never add the created element to the DOM
http://jsfiddle.net/rmuctecp/
<script>
function jsonFlickrFeed(data)
{
for(var i = 0 ; i < 5 ; i++)
{
var img = document.createElement("img");
img.src = data.items[i].media.m;
document.body.appendChild(img);
}
}
</script>
<script src = "https://api.flickr.com/services/feeds/photos_public.gne?format=json"></script>

AngularJS ngRepeat replacing bindings with nothing

I have an AngularJS app that is searching through a list of services, which then displays the results below the search bar using ngRepeat. The right amount of search results are being displayed, but the bindings are being filled with nothing, leaving the anchor tags empty.
Here is the markup being generated:
<h4 class="media-heading result-heading"></h4>
<p class="result-abstract"></p>
<p></p>
<p></p>
<div class="row">
<div class="col-all-12 result-contact">
<div class="">
<span class="icon-office"></span>
</div>
<div class="">
<span class="icon-phone"></span>
</div>
</div>
</div>
I have the exact same code running on my local machine, it works as expected, and the versions of AngularJS are the same, so I have no clue what is going on. Has anyone experienced this before, and how have hey resolved it?
No errors are thrown, the data is being retrieved via AJAX from a json file.
Here is the template with the ngRepeats in it:
<div class="media-body search-result" ng-repeat="service in services | filter: query | filterTags: allTags | orderBy: serviceOrder:direction | hasValue | startFrom:(currentPage - 1) * servicesPerPage | limitTo:servicesPerPage">
<h4 class="media-heading result-heading">{{service.serviceName}}</h4>
<p class="result-abstract">{{service.abstract}}</p>
</p>
</p>
<div class="row">
<div class="col-all-12 result-contact">
<div class="">
<span class="icon-office"></span> {{service.office}}
</div>
<div class="">
<span class="icon-phone"></span> {{service.contact}}
</div>
</div>
</div>
</div>
The code behind this isn't really all that important since it is an exact copy of everything from one page to another, and it works on the previous page. There are no differences in the HTML, CSS or Javascript, other than the fact that the markup on the new page is filled in with blanks.
I have already checked to make sure that the json data is being pulled in correctly, and that the versions of AngularJS are the same (Version is 1.2.21).
Here are the custom filters:
serviceSearchbar.filter('startFrom', function () {
return function (input, start) {
start = +start; //parse to int
return input.slice(start);
}
});
serviceSearchbar.filter('hasValue', function() {
return function (input) {
if (angular.element('#servicesQuery').val()) {
return input;
}
return [];
}
});
serviceSearchbar.filter("isSelected", function () {
return function (input) {
var response = {};
if (input !== undefined) {
Object.keys(input).forEach(function (tag) {
if (input[tag] !== false) {
response[tag] = true;
}
});
}
return response;
}
});
serviceSearchbar.filter("filterTags", ["$filter", function ($filter) {
return function (input, tags) {
var selectedTags = [],
response = input,
found = false,
numSelectedTags;
if (input === undefined) {
return input;
}
if (tags !== undefined) {
Object.keys(tags).forEach(function (tag) {
if (tags[tag] !== false) {
selectedTags.push(tag);
}
});
}
if (selectedTags.length > 0) {
response = $filter("filter")(response, function(value) {
var found = false;
selectedTags.forEach(function(tag) {
if (value.tags.indexOf(tag) !== -1) {
found = true;
return true;
}
});
return found;
});
}
return response;
}
}]);
And here is an example of the data that is being used:
{
"services": [
{
"serviceName": "Department of Art",
"sponsor": "Department of Art",
"shortName": "art-dep",
"url": "http://www.byui.edu/art/",
"contactName": "Contact Name",
"office": "Spori some room",
"contact": "(123) 456-7890",
"mapUrl": "http://www.byui.edu/maps#SPO",
"tags": [
"art",
"design",
"art department",
"art program"
],
"abstract": "The BYU-Idaho Department of Art provides an aesthetic, conceptual, and technical foundation in the visual arts for students who possess a wide range of interests, experiences, and abilities."
},
{
"serviceName": "College of Performing and Visual Arts",
"sponsor": "College of Performing and Visual Arts",
"shortName": "performing-visual-arts",
"url": "http://www.byui.edu/performing-visual-arts",
"contactName": "Contact Name",
"office": "Spori some room",
"contact": "(123) 456-7890",
"mapUrl": "http://www.byui.edu/maps#SPO",
"tags": [
"art",
"dance",
"music",
"spori",
"theater"
],
"abstract": "The College of Performing and Visual Arts provide an important means of communication where thoughts, creativity, and expression can be directed to ennoble, uplift, inspire..."
},
{
"serviceName": "Spori Art Gallery",
"sponsor": "Department of Art",
"shortName": "spo-gal",
"url": "http://www.byui.edu/spori-gallery/",
"contactName": "Contact Name",
"office": "Spori some room",
"contact": "(123) 456-7890",
"mapUrl": "http://www.byui.edu/maps#SPO",
"tags": [
"art",
"gallery",
"spori"
],
"abstract": "Jacob Spori Art Gallery will show works of current BYU-Idaho Visual Arts students, selected by the art department faculty."
}
]
}

Categories

Resources