jQuery selection problems - javascript

I'm trying to use the code of this example (cropper example) of images cropper application in an AngularJS view, but it didn't work. I think the problem is in the elements selection.
This is what I'm doing:
Main application HTML
<div class="view-container layer">
<div class="container content" ng-view>
<!-- load the content of the view--!>
</div>
</div>
The view
It is the code in the body section of the example (view). I omit the whole code; I'm just including the main parts.
<div class="container" id="crop-avatar">
<!-- the div content --!>
</div>
The JavaScript selectors
function CropAvatar($element) {
this.$container = $element;
this.$avatarView = this.$container.find('.avatar-view');
this.$avatar = this.$avatarView.find('img');
this.$avatarModal = this.$container.find('#avatar-modal');
this.$loading = this.$container.find('.loading');
this.$avatarForm = this.$avatarModal.find('.avatar-form');
this.$avatarUpload = this.$avatarForm.find('.avatar-upload');
this.$avatarSrc = this.$avatarForm.find('.avatar-src');
this.$avatarData = this.$avatarForm.find('.avatar-data');
this.$avatarInput = this.$avatarForm.find('.avatar-input');
this.$avatarSave = this.$avatarForm.find('.avatar-save');
this.$avatarBtns = this.$avatarForm.find('.avatar-btns');
this.$avatarWrapper = this.$avatarModal.find('.avatar-wrapper');
this.$avatarPreview = this.$avatarModal.find('.avatar-preview');
this.init();
}
And CropAvatar is initialized as:
$(function () {
return new CropAvatar($('#crop-avatar'));
});
If I used the code in this form, it didn't work at all, but if I put all the HTML code into the <body></body> tags of mi app.html it works fine. It's for this reason that I think it is a selectors problems.

Related

using javascript libraries don't work on webpage when loading data from json file

I created a javascript code to create grid and populate it with cards, using data from json file, and load them into a web page.
This is the code:
// load data into grid container
const container = document.querySelector(".grid");
// get data from the file, using loadData(), inside it populateContainer
function loadData() {
const request = new XMLHttpRequest();
request.open("get", "data.json");
request.onload = () => {
try {
const json = JSON.parse(request.responseText);
populateContainer(json);
} catch (e) {
console.warn("error");
}
};
request.send();
}
function populateContainer(json) {
while (container.firstChild) {
container.removeChild(container.firstChild);
}
json.forEach((row) => {
const card = document.createElement("div");
card.setAttribute("class", `grid-item ${row[7]}`);
card.setAttribute("data-category", `${row[7]}`);
// header
let header = document.createElement("div");
header.setAttribute("class", "card-header");
header.innerHTML = `Current = ${row[1]}$ Original Price = ${row[2]}$ / Discount = ${row[3]}%`;
card.appendChild(header);
// pic
let img = document.createElement("img");
img.setAttribute("class", "card-image");
img.src = `https://${row[6]}`;
card.appendChild(img);
// BODY
let cardBody = document.createElement("div");
cardBody.setAttribute("class", "card-content");
card.appendChild(cardBody);
// -->Title + link
let cardTitle = document.createElement("h4");
cardTitle.setAttribute("class", "card-title");
cardTitle.innerHTML = `<a href='https://${row[4]}'>${row[0]}</a>`;
cardBody.appendChild(cardTitle);
container.appendChild(card);
});
}
document.addEventListener("DOMContentLoaded", () => {
loadData();
});
This is the html body (the javascript script is in main.js file):
<body>
<div id="filters" class=".filter-button-group button-group">
<div class="button All">show all</div>
<div class="button HomeGarden">Home & Garden</div>
<div class="button Electronics">Electronics</div>
<div class="button MomKids">Mom & Kids</div>
<div class="button SportsOutdoor">Sports & Outdoor</div>
<div class="button Accessories">Accessories</div>
<div class="button HealthBeauty">Health & Beauty</div>
</div>
<div class="grid">
</div>
<script src="main.js"></script>
</body>
The code work well, and it create the grid and elements inside it,
but when I want to add a filter for those cards by category, using library like https://listjs.com or https://isotope.metafizzy.co it doesnt work.
How I can apply the filter to my code ?
What issues exactly did occur when trying to filter?
Here is a technical cut-through on how to get your script working by the following steps:
Include Isotope (as a script-tag,using the download-link)
Add "data-filter" attributes in HTML (I added three of them as an example):
<div class="button Electronics" data-filter="[data-category='Electronics']">
Initialize Isotope:
$grid = new Isotope( '.grid',{
itemSelector: '.grid-item',
layoutMode: 'fitRows',
});
Whenever you want to filter, filter. I bound your links to the .arrange-fn using JQuery, but feel free to do it some other way:
$('#filters').on( 'click', 'div.button', function() {
var filterValue = $( this ).attr('data-filter');
$grid.arrange({ filter: filterValue });
});
Did you get any issues trying to do so? I mocked your JSON since I got no service returning it, but in case it's a timing issue, just put the initialization (see above) right below the container.appendChild(card);, that should make it work.
Feel free to ask if I didn't cover some aspect of your question.
Best wishes

How do I dynamically render FB page plugin if the HTML is created after the FB JS-SDK already loaded?

I have add a page widget (the formerly "likebox") on my page.
It's something like:
<div class="fb-page"
data-href="https://www.facebook.com/imdb"
data-width="340"
data-hide-cover="false"
data-show-facepile="true"></div>
On the page. Everything works fine now.
However, I want to dynamically add extra widgets on my page after the page is loaded (including the FB js-sdk and the first widget). For example. I want to add a new Page-widget after I click a button:
$('button').click(function(){
$('body').append(`
<div class="fb-page"
data-href="https://www.facebook.com/imdb"
data-width="340"
data-hide-cover="false"
data-show-facepile="true"></div>
`);
})
But after doing so, the div wouldn't turn into the box.
I tried many ways like reloading the js file or removing the FB object. But all failed.
Is there any function like:
FB.refillFBHTMLElements() so that I can turn dynamically-created elements into Facebook widgets?
Try using FB.XFBML.parse(). I just tried it with this example, and it successfully parsed a dynamically created widget:
HTML:
<div id="fb-root"></div>
<script async defer crossorigin="anonymous"
src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v6.0&appId=2730175443872266&autoLogAppEvents=1"></script>
<h4>Dynamically Load Facebook Widget</h4>
<button onclick="loadWidget()" class="mb-2">Load Widget</button>
<div id="widget"></div>
JavaScript:
function loadWidget() {
const fbPage = document.createElement('div');
fbPage.className = "fb-page";
fbPage.dataset.href = "https://www.facebook.com/facebook";
fbPage.dataset.tabs = "timeline";
fbPage.dataset.width = "";
fbPage.dataset.height = "";
fbPage.dataset.smallHeader = "false";
fbPage.dataset.adaptContainerWidth = "true";
fbPage.dataset.showFacepile = "true";
const bq = document.createElement('blockquote');
bq.cite = "https://www.facebook.com/facebook";
bq.className = "fb-xfbml-parse-ignore";
const anchor = document.createElement('a');
anchor.href = "https://www.facebook.com/facebook";
anchor.innerHTML = 'Facebook';
bq.appendChild(anchor);
fbPage.appendChild(bq);
const widget = document.getElementById('widget');
widget.appendChild(fbPage);
// parse the widget
FB.XFBML.parse(widget);
}
Reference:
FB.XFBML.parse()

How to pass controller data (php) to the content blocks of ContentBuilder?

i've bought the latest ContentBuilder.js from innovastudio.
I've integrated it in my cms and is working fine.
Now i have created new static blocks this works fine also.
But now i try to make dynamic blocks with php data passed from the controller when the page loads but can't seems to make it work.
I know php loads before javascript .But i'm a little bit stuck.
Does someone already have worked with contentbuilder.js and could someone please guide me how to resolve this issue please?
I'm working in laravel 5.8 , i did getelementbyid with javascript and replace the value with the dynamic value .
This works but only for single rows and not collections.-
<script type="text/javascript">
jQuery(document).ready(function ($) {
var DBaddress = '{{$settings[0]['address']}}';
var DBnumber = '{{$settings[0]['number']}}';
var DBpostalcode = '{{$settings[0]['postal_code']}}';
var DBtown = '{{$settings[0]['town']}}';
var DBtel = '{{$settings[0]['telephone']}}';
var DBemail = '{{$settings[0]['email']}}';
var obj = $.contentbuilder({
container: '.container_edit',
imageselect: 'admin/laravel-filemanager',
cellFormat: '<div class="col-md-12"></div>',
rowFormat: '<div class="row"></div>',
framework: 'bootstrap',
});
$('#btnViewSnippets').on('click', function () {
obj.viewSnippets();
});
$('#btnViewHtml').on('click', function () {
obj.viewHtml();
});
/*$('#btnSave').on('click', function () {
save(obj.html());
});*/
document.getElementById("address").innerHTML= DBaddress;
document.getElementById("number").innerHTML= DBnumber;
document.getElementById("postalcode").innerHTML= DBpostalcode;
document.getElementById("town").innerHTML= DBtown;
document.getElementById("tel").innerHTML= DBtel;
document.getElementById("email").innerHTML= DBemail;
});
</script>
Here the section where the page builder is set :
#section('content')
<div class="container_edit">
{!! $page->contentBuilder !!}
</div>
#if( basename(url()->current()) !== $page->slug)
<div class="is-tool" style="position:fixed;width:210px;height:50px;border:none;top:250px;bottom:50px;left:auto;right:30px;text-align:right;display:block">
<button id="btnViewSnippets" class="classic" style="width:70px;height:50px;">+ Add</button>
<button id="btnViewHtml" class="classic" style="width:70px;height:50px;">HTML</button>
<button id="btnSave" data-id="{{$editPageDetails[0]->uuid}}" class="classic" style="width:70px;height:50px;">SAVE</button>
</div>
#endif
#endsection
This is how i could manage to make it work, but again this is for single rows. I would like to have the complete collection so i could create dynamic blocks

Angular currency converter doesn't work

Do anyone know how can I make the code I stated below to work on Angular?
I have gotten the code from here and I have tried it on a HTML page and it work but for some reason when I put it in my home.component.html it doesn't work
<!--Currency Converter widget by FreeCurrencyRates.com -->
<div id='gcw_mainFQN2uneJb' class='gcw_mainFQN2uneJb'></div>
<a id='gcw_siteFQN2uneJb' href='https://freecurrencyrates.com/en/'>FreeCurrencyRates.com</a>
<script>function reloadFQN2uneJb(){ var sc = document.getElementById('scFQN2uneJb');if (sc) sc.parentNode.removeChild(sc);sc = document.createElement('script');sc.type = 'text/javascript';sc.charset = 'UTF-8';sc.async = true;sc.id='scFQN2uneJb';sc.src = 'https://freecurrencyrates.com/en/widget-vertical-editable?iso=SGDUSD&df=2&p=FQN2uneJb&v=fis&source=fcr&width=270&width_title=0&firstrowvalue=1&thm=E0CFC2,F4F0EC,D49768,CB842E,FFFFFF,E0CFC2,F4F0EC,B85700,000000&title=Currency%20Converter&tzo=-480';var div = document.getElementById('gcw_mainFQN2uneJb');div.parentNode.insertBefore(sc, div);} reloadFQN2uneJb(); </script>
<!-- put custom styles here: .gcw_mainFQN2uneJb{}, .gcw_headerFQN2uneJb{}, .gcw_ratesFQN2uneJb{}, .gcw_sourceFQN2uneJb{} -->
<!--End of Currency Converter widget by FreeCurrencyRates.com -->

Extend HTML templates?

I am creating a web application framework to be used by other groups in my department to standardize the UI of our web apps. It's written in javascript using HTML templating through underscore.js. In order for the app to be totally extensible however, I'd like them to be able to extend HTML templates as they see fit without modifying the source.
Source
templates.html
...
<script type="text/template" id="fooTemplate">
<div class="foo">
</div>
</script>
<script type="text/template" id="barTemplate">
<p>Bar!</p>
</script>
...
Implementation
newTemplates.html
...
<!-- Only overwrite foo, not bar !-->
<script type="text/template" id="fooTemplate">
<ul class="foo">
<li class="bar">Blah!</li>
</ul>
</script>
...
Is there a way to intuitively enable users to extend HTML templates without forcing them to overwrite the file and copy/paste the templates they're not modifying?
You're not going to be able to use id attributes to identify your templates without a bunch of server-side processing to take care of the uniqueness issues. But you can use classes to identify your templates.
If you mash all your template HTML files together in override order ("base" templates first, "subtemplates" after) and use class attributes to identify the templates:
<!-- templates.html -->
<script type="text/template" id="fooTemplate">
<div class="foo">
</div>
</script>
<script type="text/template" id="barTemplate">
<p>Bar!</p>
</script>
<!-- newTemplates.html -->
<script type="text/template" id="fooTemplate">
<ul class="foo">
<li class="bar">Blah!</li>
</ul>
</script>
Then you can use things like
var foo = _.template($('.fooTemplate:last').html());
var bar = _.template($('.barTemplate:last').html());
to access your templates.
Demo: http://jsfiddle.net/ambiguous/gYHkF/
You could also stick with ids and try to load templates from newTemplates.html first and fallback to templates.html if you don't find it. If you load the template files into two separate variables but don't insert them into the DOM:
var $base = $('stuff from templates.html');
var $subs = $('stuff from newTemplates.html');
Then add a simple function to look for templates in $subs before $base:
function tmpl(id) {
var $t = $subs.filter('#' + id);
if($t.length)
return _.template($t.html());
return _.template($base.filter('#' + id).html());
}
Then you could do this:
var foo = tmpl('fooTemplate');
var bar = tmpl('barTemplate');
and The Right Thing would happen.
Demo: http://jsfiddle.net/ambiguous/EhhsL/
This approach also makes it easy to cache the compiled templates and not only avoid double lookups but avoid compiling the same thing over and over again:
function tmpl(id) {
if(tmpl.cache.hasOwnProperty(id))
return tmpl.cache[id];
var $t = $subs.filter('#' + id);
if($t.length)
return tmpl.cache[id] = _.template($t.html());
return tmpl.cache[id] = _.template($base.filter('#' + id).html());
}
tmpl.cache = { };
Demo: http://jsfiddle.net/ambiguous/YpcJu/

Categories

Resources