Store data-content of popover in variable - javascript

I am trying to build a search engine for my website and I need to store to data-content of the popovers in a variable so that I can search for them afterwards.
I already tried this:
var popover = $('.companyRoster').data('bs.popover');
popover.getContent();
but it is not working, as expected..
An example of my html containing the popover will be:
<div id="companyRoster" class="companyRoster container">
<div class="row mb-2">
<div class="col-lg-1 col-md-2 col-sm-3 col-6">
<img src="images/john-doe.jpg" alt="..." class="img-fluid rounded-circle padding-0" data-toggle="popover" title="John Doe" data-placement="top" data-content='<b>Position:</b> Team Leader Integration Services <br> <b>Department:</b> IT <br> <b>Email:</b> some.email#aaa.aa <br> <b>Skype:</b> johndoe'>
</div>
</div>
</div>
Can you tell me how can I make console.log() to display the data-content of the popover?

You're looking in the '#companyRoster' element for the data, which that element doesn't have. The data-content is in one of the child elements.
You should be able to get the data-content like so:
var dataContent = $(".img-fluid").data('content');
document.getElementById('other_div').innerHTML = dataContent;
I hope this helps!

Related

jQuery loading gif not working properly same time, on the multiple divs

In my laravel dashboard's blade, I'm trying to display few stats.
They will be updated upon, date picker's on change.
following is my date picker.
<div class="row">
<div class="col-md-12">
<td>
<input id="date" class="date form-control w-50 pull-right" type="date">
</td>
</div>
</div>
And following is two of my stat widgets, I have over all 6 widgets.
<div class="col-md-2" id="shopify_widget1">
<div class="jumbotron bg-light text-dark">
<img class="img-fluid pull-left" src="https://cdn0.iconfinder.com/data/icons/social-media-2092/100/social-35-512.png" width="32" height="32">
<h6 class="text-dark mt-2 px-4">Shopify</h6>
<hr class="border border-black">
<h5 class="text-dark">Total Orders</h5>
<img id="loadingImage" src="images/calculating-shopify-v2.gif" class="img-fluid w-100">
<span class="tot_o" id="tot_o">{{ $tot_o }}</span>
</div>
</div>
<div class="col-md-2">
<div class="jumbotron bg-dark text-white">
<img class="img-fluid pull-left" src="https://cdn0.iconfinder.com/data/icons/social-media-2092/100/social-35-512.png" width="32" height="32">
<h6 class="text-secondary mt-2 px-4">Shopify</h6>
<hr class="border border-white">
<h5 class="text-white">Total Sales </h5>
<img id="loadingImage" src="images/calculating.gif" class="img-fluid">
<span class="tot_sum" id="tot_sum">{{ $sum }}</span> {{ $crr }}
</div>
</div>
I'm using jQuery to fetch and display data on those widgets upon date selections.
This is my jQuery
<script>
$(document).on('change', '#date', function (e) {
$('#tot_o').empty();
$('#tot_sum').empty();
$('#avg_ov').empty();
$('#cus').empty();
$('#item_sum').empty();
$('#orders').empty();
$("#loadingImage").show();
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
type: 'GET',
url : '/shopify_data',
data : {selected_date : $('#date').val()},
success:function(data){
$("#loadingImage").hide();
var total_orders = data.tot_o;
var total_sales = data.sum;
var currency = data.crr;
var avg_ov = data.avg_ov;
var cus = data.cus;
var item_sum = data.item_sum;
var orders = data.orders;
$('#tot_o').append(total_orders);
$('#tot_sum').append(total_sales);
$('#avg_ov').append(avg_ov);
$('#cus').append(cus);
$('#item_sum').append(item_sum);
$('#orders').append(orders);
//console.log(total_orders);
},
timeout:10000
});
});
</script>
Every time when a user selects a date, all my widgets need to display the stats only belongs to that date. This works perfectly.
But my issue is with the loading gif... Even though I want it to show on all the 6 widgets upon date onchange, and hide them once the data is displayed... it works/appeared on the first widget only...
How can I display my loading gif on all the widgets same time until the data get displayed
It is appearing on the first widget only because you are fetching the element via id and all image element has the same id (which is possible but invalid) and when you use $("#loadingImage").show(); only the first element from the first widget get displayed.
So, instead of id, use a class for all image elements because the class can be the same, and then update the image element using a class like this-
$(".loadingImage").show();
instead of id, use class. Like:
<img src="images/calculating.gif" class="img-fluid loadingImage">
and in your js code make this edit:
$(".loadingImage").show();
you can define same id only once in one page where as you can use same class as many times as you want

Multiple Identical Divs to only change url image

Hi I'm new to web development and I'm trying to practice by making a small site for my mom!
So basically I have this div that I want to replicate multiple times only changing the image url & the h3 caption.
<div class="col-lg-4 mb-5 col-md-6">
<div class="wine_v_1 text-center pb-4">
<a class="thumbnail d-block mb-4"><img src="images/im.jpg" alt="Image" class="img-fluid"></a>
<div>
<h3 class="heading mb-1">Us</h3>
</div>
</div>
</div>
I was thinking of using JavaScript to copy the div as a string to be something like ( pseudocode )
for image.length {
getelementbyid.print (div1 + imageArray(i) + div2 + caption(i) + endofDiv )
}
Would this be possible? Would it make sense to do it this way or is there a more simple way?
Example
The example works by having a data object, which stores the captions and image URLs. Then, there is a clone template. It loops through each and clones the template, and replaces each element with the correct content. Then it adds it to the HTML with .appendChild.
You can write a function doing this job. Creating copies of your element and change the attributes corresponding to your new data.
function copyAndChangeImageAndCaption(){
const images = [
{imageUrl: "images/de.jpg", caption: "De"},
{imageUrl: "images/it.jpg", caption: "It"},
{imageUrl: "images/fr.jpg", caption: "Fr"}
];
images.forEach(image => {
const el = document.getElementsByClassName('col-lg-4 mb-5 col-md-6');
let copy = el[0].cloneNode(true)
copy.getElementsByClassName('thumbnail')[0].childNodes[0].src=image.imageUrl;
copy.getElementsByClassName('heading')[0].childNodes[0].innerHTML = image.caption;
document.getElementsByClassName('container')[0].appendChild(copy);
});
}
<div class='container'>
<div class="col-lg-4 mb-5 col-md-6">
<div class="wine_v_1 text-center pb-4">
<a class="thumbnail d-block mb-4"><img src="images/im.jpg" alt="Image" class="img-fluid"></a>
<div>
<h3 class="heading mb-1">Us</h3>
</div>
</div>
</div>
</div>
<button onClick="copyAndChangeImageAndCaption()">Add images</button>

auto complete on editable divs angular js

I am not able to perform the auto suggestion functionality on divs with contenteditable attribute. Also when I write mass-autocomplete to divs, it is showing an error message like "mass-autocomplete not allowed on element div".
The following is code I have written. Could you please give the solution for this?
$scope.getClients = {
suggest: suggest_Client
};
<div class="row">
<div class="col-xs-12">
<div class="marginTB15" mass-autocomplete>
<div class="reach_box" contenteditable="true" ng-model="user.communities" mass-autocomplete-item="getNetworks">
<span class="form-control-feedback form-control-feedback_left_textbox"><img src="images/icon7.png" ></span>
<div class="reach"></div>
</div>
</div>
</div>
</div>
Seems that you using the mass-autocomplete directive incorrectly, it need so have an <input> tag as a element. Consider just having 2 blocks inside your div - one is a normal autocomplete:
<div mass-autocomplete>
<input ng-model="user.communities" mass-autocomplete-item="getNetworks">
</div>
while another one is a static end result of the autocompletion - say <div>{{user.communities}}</div>. And those two will be toggled by click for example. By this you wont' need content-editable at all.
So full code may look like this:
//controller
$scope.stateEdit = false;
$scope.toggleWidgetState = function(){
$scope.stateEdit = !$scope.stateEdit;
}
$scope.getClients = {
suggest: suggest_Client,
on_select:toggleWidgetState //here we put our widget back to read-only state
};
//other logic to handle mass-autocomplete
//template
<div class="row">
<div class="col-xs-12">
<div mass-autocomplete ng-show="stateEdit">
<input ng-model="user.communities" mass-autocomplete-item="getNetworks">
<ul> <li>Cardiologist Connect<button type="button">X</button></li></ul>
</div>
<div ng-show="!stateEdit" ng-click="toggleWidgetState()">
{{getNetworks}}
<span class="form-control-feedback form-control-feedback_left_textbox"><img src="images/icon7.png" ></span>
<div class="reach"></div>
</div>
</div>
</div>

angularjs how to set text inside element based on textbox input

My code is:
<div ng-controller="myCtrl">
<div class="row">
<div class="col-md-4 col-sm-3">
<checked-input ng-scope="$eventID"></checked-input>
</div>
<div class="col-md-4 col-sm-3">
<output ng-scope="$postbackOutput">***This is where I want the text typed in the textbox to go***</output>
</div>
<div class="col-md-3 col-sm-3">
<a ng-click="generateURL($eventID)" class="btn-plus">
<span class="glyphicon glyphicon-plus"></span>
</a>
</div>
</div>
</div>
So what I'm trying to do is get that $eventID that's inside the first column div, then pass it as an argument to the function call generateURL() when the link in the <a> tag is clicked in the third column. Inside the controller I have:
app.controller('postbackCtrl', function($scope) {
$scope.generateURL = function(eventID) {
$scope.postbackOutput = eventID;
}
});
But it doesn't seem to be setting the text in the <output> correctly. Could anyone help? I've just started out with angular so it's a bit confusing.
You can just bind the var to the view with handlebar brackets:
<output ng-scope="$postbackOutput">
{{ postbackOutput }}
</output>
Here is a working plunkr

JQuery loop through div and build multi-line string based on data attribute

I have two questions:
1.) As you can see I have multiple divs and I have onclick things going on when the callout panel notes div is clicked. It accesses the data-category attribute. I'm using
$(this).parent().parent().siblings().first().data("category");
To access it, which works, but it seems messy. I tried parents().last().data(...) but that never worked. I feel like there's a more efficient way. So any opinions would be appreciated.
2.) My next question I can't figure out. Some of the divs have the selected class (after I click on the div). Later I'm going to hit a button to grab the selected stuff, and send it through some ajax stuff. There are 5 other "categories" so I need the .selected content to be associated with the data-category="a", ie, I need to make sure it only loops withing the that category. Can anyone help me loop through the data-category="a" and build a multi-line string with the data-response-text of the .selected classes?
The html is below:
<div class="row responses panel">
<div class="small-12 column" data-category="a">
<h3>Responses</h3>
</div>
<div class="small-12 column">
<div class="callout panel notes" data-response-text="Info 1">
Info 1
</div>
</div>
<div class="small-12 column">
<div class="callout panel notes selected" data-response-text="Info 2">
Info 2
</div>
</div>
<div class="small-12 column">
<div class="callout panel notes selected" data-response-text="Info 3">
Info 3
</div>
</div>
<div class="small-12 column">
<div class="callout panel notes selected" data-response-text="Info 4">
<div class="remove-response"></div>
Info 4
</div>
</div>
<div class="small-12 column">
<div class="add-new-box">
<div class="add-new">
Add Response
</div>
<div class="add-new-text">
<input class="text-response" type="text" placeholder="Response">
</div>
</div>
</div>
</div>
<div><span class="button">Submit</span></div>
For the first part you can do:
$(this).closest('.row.responses').children(':first').data('category');
If either .row or .responses are unique to that level elements, you can use that solely then.
For the second part, I assume "content to be associated with the data-category a" means elements insides .row.responses which firs element has data-category="a". If so then you can do:
var str = "";
var sls = $('[data-category="a"]').parent().find('.selected');
sls.each(function() {
str += $(this).data('response-text') + "\n";
});
First question: I would select the panel like so:
$(this).find('[data-category]').data();
I would then create a function that's called on each of the panels and then returns an array of the data you require from .selected
function getData(panel) {
var $selected = $(panel).find('.selected');
var dataArr = [];
for (var i = 0; i < $selected.length; i++) {
dataArr.push($selected.eq(i).data().responseText);
}
return dataArr;
}
var panelData = getData($('the-panel-in-question'));

Categories