Develop Reference

How to set up an Add To Favorites Button in JS with Materialize and Firebase

I have been using materialize CSS for buttons on some cards in my application and wanted to create a button that when clicked it adds the user's favorite item to another page that I have in HTML called Favorites.html. I have the index.html file which serves as the homepage, where the cards are placed. The user can pick a card and favorite it and have it stored to the Favorites.html page. I was wondering how to do that using Materialize and JS. We are also using Firebase to serve as the backend and relying on JS version- 9 in the FireStore.
Here is an example of the card setup for the on the index.html page with the button being called favorite-btn.
I have tried putting a link into the "a href" to the favorites.html page and it did take me to the favorites.html page but it did not add it to the favorites.html page that I had set up.
index.html
<div class = "recipe-img">
<img src = "coffee.jpg" alt = "a cup of coffee.">
<span class = "category-name">Mine</span>
</div>
<div class = "recipe-content">
<i class="material-icons">delete_outline</i>
<h2>Americano<a href="#" class="right favorite-btn btn-floating red pulse">
<i class="material-icons">favorite</i></a></h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.Lorem, ipsum dolor sit amet consectetur adipisicing elit.Lorem, ip``sum dolor sit amet consectetur adipisicing elit.Lorem, ipsum dolor sit amet consectetur adipisicing elit.
orem, ipsum dolor sit amet consectetur adipisicing elit.orem, ipsum dolor sit amet consectetur adipisicing elit. Lorem, ipsum dolor sit amet consectetur adipisicing elit.
</p>
</div>

How to reinitialize Owl Carousel after ajax call?

I am trying to reinitialize owl carousel after a successful ajax call. The ajax call will change the data but the view should stay the same.I am having an issue where the view carousel structure will not reinitialize. I don't know where I did mistake.
Ajax Request
$(document).on('click', '.category_list', function() {
var category_id = $(this).attr('data-id');
var _token = $('#_token').val();
var param = 'category_id=' + category_id + '&_token=' + _token;
$.ajax({
type: "POST",
datatype: "json",
url: "/master/sub_category",
data: param,
success: function(result) {
$('#test').html(result);
var owl = $(".owl-carousel");
owl.owlCarousel({
items: 4,
navigation: true
});
}
});
});
Controller Function
public function getImg() {
$post_data = Request::all();
$sub_img = $this->imgModel->getImgList($post_data);
$sub_img_html = '';
foreach ($sub_img ['data'] as $data_img ) {
$img = '/img/sub_category/'.$data_img ['img'];
$sub_img_html .= '<div class="item">';
$sub_img_html .= '<img src="'.$img.'" />';
$sub_img_html .= '</div>';
}
echo $sub_img_html;
}
View
<div id="demo">
<div id="test" class="owl-carousel">
<?php
if (!empty($img_category)) {
foreach ($img_category as $imgcategory){
?>
<div class="item">
<img src='/img/sub_category/<?= imgcategory['subcategory_img'] ?>'/></div>
<?php
}
}
?>
</div>
</div>

As per your code I make changes please apply this I hope this code work full.
success: function(result) {
$('#demo').html('<div id="testing" class="owl-carousel"></div>');
for(var i=0;i<result.length;i++){
$(".owl-carousel").append('<div class="item"><img src="/img/sub_category/'+result[i].subcategory_img+'" /></div>');
};
var owl = $("#testing");
owl.owlCarousel({
items: 4,
navigation: true
});

I believe you will need to destroy and re-initalize the carousel. There is a destroy method you can call;
https://github.com/OwlCarousel2/OwlCarousel2/blob/develop/src/js/owl.carousel.js#L1391
or there is a refresh method;
https://github.com/OwlCarousel2/OwlCarousel2/blob/develop/src/js/owl.carousel.js#L608
or there is an update method;
https://github.com/OwlCarousel2/OwlCarousel2/blob/develop/src/js/owl.carousel.js#L569
I believe these can all be called;
$('.owl-gallery').owlCarousel('refresh');
Might be worth a try.

This was my approach and it works with the version 2.2.1 :
$.getJSON('testimonials.json', function(data) {
var content = "";
for(var i in data["items"]){
var text = data["items"][i].text;
var name = data["items"][i].name;
var position = data["items"][i].position;
content += text + name + position
}
// set the content inside the element
$("#test_slider").html(content);
// Now we can call the owlCarousel
$('#test_slider').owlCarousel({
dots: false,
nav: true,
loop: true,
margin:30,
smartSpeed: 700,
items:1,
autoplay:true,
});
});
As for testimonials.json looks like this :
{
"items" :
[
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem Ipsum has been the Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing.",
"name": "Maurice Pittmansss",
"position": "CEO of ABS Ltd.1"
},
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem Ipsum has been the Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing.",
"name": "Maurice Pittmanggg",
"position": "CEO of ABS Ltd.2"
},
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem Ipsum has been the Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing.",
"name": "Maurice Pittmannnn",
"position": "CEO of ABS Ltd3."
}
]
}

Nothing above worked for me only this worked :
$('.owl-gallery').data('owlCarousel').destroy();
$('.owl-gallery').owlCarousel(options);

Meteor remove duplicate property in an array of objects

I can't seem to figure out how to merge the two Video bullet points into one bullet point that contains the two drivers.
Collection Data
"drivers":[
{"title":"Nvidia Video Driver","category":"Video","version":"331.82","description":"Lorem ipsum dolor sit amet","filename":"nvidia.exe"},
{"title":"Intel Video Driver","category":"Video","version":"10.4.4740","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies.","filename":"intel.exe"},
{"title":"Realtek Audio","category":"Audio","version":"1.25.21","description":"consectetur adipiscing elit. Suspendisse ultricies.","filename":"audio.exe"},
{"title":"Storage controller","category":"chipset","version":"23.13.412","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit.","filename":"chip.exe"}
]
deviceDetails.helpers
Template.deviceDetails.helpers({
deviceDrivers:function(drivers) {
var driverArray = drivers.sort(function(a, b) {
if (a.category.toLowerCase() < b.category.toLowerCase()) return -1;
if (a.category.toLowerCase() > b.category.toLowerCase()) return 1;
return 0;
});
console.log(driverArray);
return driverArray;
}
});
DeviceDetails.html
<ul>
{{#each deviceDrivers device.drivers}}
<li class="text-capitalize list-unstyled">{{category}}<ul>
<li>{{title}} -> {{version}}<br>
{{description}}
</li></ul>
</li>
{{/each}}
</ul>
Result
- Audio
- Realtek Audio -> 1.25.21
- Consectetur Adipiscing Elit. Suspendisse Ultricies.
- Chipset
- Storage Controller -> 23.13.412
- Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit.
- Video
- Nvidia Video Driver -> 331.82
- Lorem Ipsum Dolor Sit Amet
- Video (!REMOVE! line)
- Intel Video Driver -> 10.4.4740
- Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit. Suspendisse Ultricies.
Desired Result
- Audio
- Realtek Audio -> 1.25.21
- Consectetur Adipiscing Elit. Suspendisse Ultricies.
- Chipset
- Storage Controller -> 23.13.412
- Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit.
- Video
- Nvidia Video Driver -> 331.82
- Lorem Ipsum Dolor Sit Amet
- Intel Video Driver -> 10.4.4740
- Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit. Suspendisse Ultricies.
Update
I was able to get the desired result using Julien Answer.
deviceDrivers:function(drivers) {
var driverArray = drivers.reduce(function(result, driver){
var category = result.find(function(search){
return search.category === driver.category;
});
if(category){
category.drivers.push(driver);
} else {
result.push({
category:driver.category,
drivers: [driver]
});
}
return result
},[]).sort(function(a, b) {
if (a.category.toLowerCase() < b.category.toLowerCase()) return -1;
if (a.category.toLowerCase() > b.category.toLowerCase()) return 1;
return 0;
});
console.log(driverArray);
return driverArray;
}
Update 2
Christian Fritz Answer worked perfectly after his edit.
deviceDrivers:function(drivers) {
var test = _.map(
_.sortBy(
_.groupBy(drivers, 'category'), function(value, key) {
return key.toLowerCase();
}), function(value, key) {
return {category:value[0].category,drivers: value};
});
console.log(test);
return test;
}

You can use Array.prototype.reduce :
drivers.reduce(function(result, driver){
var category = result.find(function(search){
return search.category === driver.category;
});
if(category){
category.drivers.push(driver);
} else {
result.push({
category:driver.category,
drivers: [driver]
});
}
return result
},[]);
I've learned that from this tutorial series, the guy is brilliant and very funny.
This will give you an array looking like:
[
{
"category": "Video",
"drivers": [
{
"title": "Nvidia Video Driver",
// ...
},
{
"title": "Intel Video Driver",
// ... }
]
},
{
"category": "Audio",
"drivers": [
{
"title": "Realtek Audio",
// ... }
]
},
{
"category": "chipset",
"drivers": [
{
"title": "Storage controller",
// ...
}
]
}
]
And then in your template, you should try something like:
<ul>
{{#each deviceDrivers}}
<li class="text-capitalize list-unstyled">{{category}}
{{#each deviceDrivers}}
<ul>
<li>{{title}} -> {{version}}<br>
{{description}}
</li>
</ul>
{{/each}}
</li>
{{/each}}
</ul>

I would suggest pre-grouping:
JS:
Template.deviceDetails.helpers({
deviceDrivers:function(drivers) {
var driverGroups =
_.map(
_.sortBy(
_.groupBy(drivers, 'category'), function(value, key) {
return key.toLower();
}), function(value, key) {
return {key: key, value: value};
});
console.log(driverGroups);
return driverGroups;
}
});
HTML:
<ul>
{{#each deviceDrivers device.drivers}}
<li class="text-capitalize list-unstyled">{{key}}<ul>
{{#with value}}
<li>{{title}} -> {{version}}<br>
{{description}}
</li></ul>
{{/with}}
</li>
{{/each}}
</ul>

Jquery - Replace except inside certain div container

The following function will replace certain part of the text
function q(text) {
text = text.replace(/\[quote=?(.*?)\]/gi,"<div class=\"rq\"><p> $1</p><span>")
text = text.replace(/\[\/quote\]/gi,"</span></div>");
return text;
}
I'm looking for avoid the replacement of the [quote=(.*)] and [/quote] if those will be inside a certain class div (class=haha AVOID)
Example :
<div class="full">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed doeiusmod
[quote=ok]I should be replace[/quote] Lorem ipsum
dolor sit amet, consectetur adipiscing elit, sed do eiusmod
<div class="haha"> [quote=no]I shall not be replace[/quote]
bblablablablablabla
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
blablabla (other [quote] inside or not inside a div=haha may follow...)
...
</div>

I tried to put a mask for the content of your class="haha" div. After the masking the real quote replacement happens. At the end I have unmasked it again.
Lets check my version of it. I have put the entire HTML in a Javascript variable. I also have modified your function a bit to make it work.
var text = '<div class="full">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed doeiusmod[quote=ok]I should be replace[/quote] Lorem ipsumdolor sit amet, consectetur adipiscing elit, sed do eiusmod<div class="hahaa"> [quote=no]I shall not be replace[/quote]bblablablablablabla</div>Lorem ipsum dolor<div class="haha"> [quote=no]I shall not be replace[/quote]bbla</div>it amet, consectetur adipiscing elit, sed do eiusmodblablabla (other [quote] inside or not inside a div=haha may follow...)...</div>';
var resultText = q(text);
console.log(resultText);
function q(text) {
var matches = text.match(/<div class="haha">([^<]*)<\/div>/gi);
text = text.replace(/<div class="haha">([^<]*)<\/div>/gi, "#######");
text = text.replace(/\[quote=?(.*?)\]/gi,"<div class=\"rq\"><p> $1</p><span>");
text = text.replace(/\[quote=?(.*?)\]/gi,"<div class=\"rq\"><p> $1</p><span>");
text = text.replace(/\[\/quote\]/gi,"</span></div>");
for(i in matches){
text = text.replace(/#######/i, matches[i]);
}
return text;
}

Search iframe content with jquery and input element on parent page

I was wondering how I can have a text input element on the parent page which searches the content of an Iframe within the parent page.
The goal is to have the input text processed and to highlight the matches within the iframe.
Any suggested approaches or references would be appreciated.
Thanks...
EDIT: I understand the limitations on the same origin policy, The parent page rendering the iframe and javascript to search, as well as the iframe on the parent page would be of the same domain origin.
HTML:
<input type="text" id="searchfor"/>
<iframe src="http://www.page.com" id="search">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euism modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tinci futurum.</iframe>
JAVASCRIPT:
$('#searchfor').keyup(function(){
var page = $('iframe[id="search"]').contents().find("html").html();
var pageText = page.text().replace("<span>","").replace("</span>");
var searchedText = $('#searchfor').val();
console.log(searchedText);
var theRegEx = new RegExp("("+searchedText+")", "igm");
var newHtml = pageText.replace(theRegEx ,"<span>$1</span>");
page.html(newHtml);
});