I have page with products catalogue and need to assign link to every products using it's name (innerHTML). The page looks like:
<!DOCTYPE html>
<html>
<head>
<script>
function searchlinks() {
var catbox=document.getElementById("category-box");
var boxcont=catbox.getElementsByTagName("a");
var h3href=catbox.getElementsByTagName("h3");
var www0="../search/" + h3href[0].innerHTML + "+" + boxcont[0].innerHTML;
var www1="../search/" + h3href[0].innerHTML + "+" + boxcont[1].innerHTML;
var www2="../search/" + h3href[0].innerHTML + "+" + boxcont[2].innerHTML;
var www3="../search/" + h3href[0].innerHTML + "+" + boxcont[3].innerHTML;
boxcont[0].href=www0;
boxcont[1].href=www1;
boxcont[2].href=www2;
boxcont[3].href=www3;
}
</script>
</head>
<body onload="searchlinks()">
<div id="category-box"><div class="category-block"><div class="category-blockimage"><img src="" alt="" ></div><div class="category-blockcontent">
<h3>Clothing</h3>
Men's
Women's
Boys'
Girls'
</div></div></div>
<div id="category-box"><div class="category-block"><div class="category-blockimage"><img src="" alt="" ></div><div class="category-blockcontent">
<h3>Protective Gear</h3>
Chin Straps
Facemasks
Flak Jackets
Girdles
Hand Pads
Arm Pads
Helmets
Hip Pads
</div></div></div>
</body>
</html>
But I have faced with a lot of problems. Here are my questions:
1) How to assign links dynamically? (without using var = www0 , www1 ...)
2) Function searchlinks() affects only on the first "category-block" div. How to use this function for all such divs on the page?
Here is my jsfiddle: http://jsfiddle.net/RGe8U/1/
Here is the fixed script and html. I have given different ids for two different divs, as ids should be unique then search them individually and call addLink function for both of them.
<html>
<head>
<script>
function addLink(catbox) {
var boxcont=catbox.getElementsByTagName("a");
var h3href=catbox.getElementsByTagName("h3");
//alert(h3href[0].innerHTML);
for (var i=0; i<boxcont.length; i++) {
boxcont[i].href="../search/" + h3href[0].innerHTML + "+" + boxcont[i].innerHTML;
}
}
function searchlinks() {
addLink (document.getElementById("category-box"));
addLink (document.getElementById("category-box2"));
}
</script>
</head>
<body onload="searchlinks()">
<div id="category-box"><div class="category-block"><div class="category-blockimage"><img src="" alt="" ></div><div class="category-blockcontent">
<h3>Clothing</h3>
Men's
Women's
Boys'
Girls'
</div></div></div>
<div id="category-box2"><div class="category-block"><div class="category-blockimage"><img src="" alt="" ></div><div class="category-blockcontent">
<h3>ProtectiveGear</h3>
Chin Straps
Facemasks
Flak Jackets
Girdles
Hand Pads
Arm Pads
Helmets
Hip Pads
</div></div></div>
</body>
</html>
Edit: If you do not want to change the div ids then use this script:
<script>
function addLink(catbox) {
var boxcont=catbox.getElementsByTagName("a");
var h3href=catbox.getElementsByTagName("h3");
alert(h3href[0].innerHTML);
for (var i=0; i<boxcont.length; i++) {
boxcont[i].href="../search/" + h3href[0].innerHTML + "+" + boxcont[i].innerHTML;
}
}
function searchlinks() {
var divs = document.getElementsByTagName("div");
for (var i=0; i<divs.length; i++) {
if (divs[i].id === "category-box")
addLink (divs[i]);
}
}
</script>
Related
I have this checkbox that will generate raw HTML on textarea, then generate whatever contain in textarea to the picture on top of the form, on that textarea, I want to be able to edit the text to customize the data position on the image.
The checkbox and the pic work fine, but when I edit data on the textarea, it reverts back, and of course, the rendered HTML reverts back too. And 1 more thing, I have to open the vue extension on inspecting menu to get all DOM rendered
Pic render code
<template>
<div class="card-item container-fluid mt--7">
<div class="card-item__cover">
<img v-if="form.img" :src="background" class="imageBackground" />
<div
v-if="previewImage"
class="imageBackground"
:style="{ 'background-image': `url(${previewImage})` }"
></div>
</div>
<span v-html="htmlBaru"></span>
</div>
</template>
Textarea
<div class="form-group">
<label class="col-form-label form-control-label">HTML</label>
<textarea
ref="htmlInput"
rows="4"
class="form-control col-sm-10"
v-model="htmlBaru"
#change="pantek"
></textarea>
</div>
Checkbox
checkboxCond() {
var sendKeyData = [];
var newHtml = [];
for (var a = 0; a < this.keyData.length; a++) {
if (this.keyData[a].status) {
newHtml.push(
`<tr>
<td >` +
this.keyData[a].key_readable +
` : {` +
this.keyData[a].key +
`}</td>
</tr>`
);
sendKeyData.push(this.keyData[a].key);
}
}
this.htmlBaru = this.html + newHtml.join("\r\n") + this.footer;
this.sendKeyData = sendKeyData;
console.log(this.htmlBaru);
// return this.htmlBaru;
}
Onchange
methods: {
pantek() {
// console.log(this.htmlBaru);
this.htmlBaru = this.$refs.target.value;
// this.$emit("change", this.htmlBaru);
},
}
I have an ASP.Net Core MVC web application and in my view I have a bootstrap carousel. I am trapping for the change event so I can get additional information of the image show. My problem is the image is not changing fast enough. When the change event fires and I get the unique image name it is still on the first image not the one being shown meaning the additional information I get is wrong.
Below is my bootstrap carousel: -
<div id="divCarousel" class="carousel slide" data-interval="false" data-ride="carousel">
<ul class="carousel-indicators">
#{
int Pos = 0;
}
#foreach (var photo in Model.PhotosList)
{
if (Pos == 0)
{
<li data-target="=#divCarousel" data-slide-to=#photo.Id class="active"></li>
}
else
{
<li data-target="=#divCarousel" data-slide-to=#photo.Id></li>
}
Pos++;
}
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
#{
Int16 i = 0;
}
#foreach (var photo in Model.PhotosList)
{
var photoPath = "~/Photos/" + photo.PhotoPath;
if (i == 0)
{
<div class="carousel-item active">
<img class="photoSize" src="#photoPath" alt="No Photo" asp-append-version="true">
</div>
}
else
{
<div class="carousel-item">
<img class="photoSize" src="#photoPath" alt="No Photo" asp-append-version="true">
</div>
}
i++;
}
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#divCarousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#divCarousel" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
And here is my javascript to trap for the change event: -
#section Scripts {
<script>
function showPhotoDetails() {
var url = $('.carousel-item.active img').attr('src');
var photopath = url.split('?');
photopath[0] = photopath[0].substring(8, photopath[0].length);
$.ajax({
type: 'POST',
url: "/Photos/GetValue?path=" + photopath[0],
dataType: "json",
async: false,
success: function (data) {
$("input#txtCreatedBy").val(data.createdBy);
$("input#txtDateCreated").val(data.dateCreated);
$("textarea#txtNotes").val(data.notes);
}
});
}
$(document).ready(function () {
showPhotoDetails();
$('.custom-file-input').on("change", function () {
var fileLabel = $(this).next('.custom-file-label');
var files = $(this)[0].files;
if (files.length > 1) {
fileLabel.html(files.length + ' files selected.');
} else if (files.length == 1) {
fileLabel.html(files[0].name);
}
});
$('.carousel-control-previous').on("click", function () {
showPhotoDetails();
});
$('.carousel-control-next').on("click", function () {
showPhotoDetails();
});
});
</script>
}
I basically need to get the image name after the slide event. Any help much appreciated.
Thank you,
A managed to get this sorted. Basically rather than trapping for the click event of the previous and next I use the slid.bs.carousel class. All working fine now.
I build a working code to retrieve data from fake Airtable database with axios. You can see the code below perfectly working. No problem to retrieve data when is on the main table. Yet as you can assume some fields are connected to other tables (named in Airtable: parent child data or fields). Is the case in my table when you have the field "ORGANIZZAZIONE" (Organization) that is connected to another table having the organization datails as for example: NOME (Name) and TIPOLOGIA (Activity).
As you can see in the code when I try to access to this data (ORGANIZZAZIONE) I have bad results. Probably I have to build an "axios.all" request but I can't find the right way.
enter code here
new Vue({
el: '#app',
data: {
saluti:'Saluti da Mauro',
items: []
},
mounted: function(){
this.loadItems();
},
methods: {
loadItems: function(){
// Init variables
var self = this
var app_id = "apppCqmyJHPmfDTLr"; <!-- base -->
var app_key = "key8S2tx7NINXaZzZ";
this.items = []
axios.get(
"https://api.airtable.com/v0/"+app_id+"/DASHBOARD?api_key="+app_key,
{
headers: { Authorization: "Bearer "+app_key }
}
).then(function(response){
self.items = response.data.records
}).catch(function(error){
console.log(error)
})
}
}
})
<head>
<title>Airtable example</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<h1>AIT</h1>
<p>All work from <strong>Ryan Hayden</strong> | A basic introduction to the Airtable API.</p>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<div id="app">
<h2>{{saluti}}</h2>
<div class="container-fluid">
<div class="card-body" v-for="item, index in items" :key:="items">
<img src="https://www.artemedialab.it/wp-content/uploads/2019/04/immagini-sfondo-1-700x400.jpg" class="card-img-top" class="img-fluid" alt="MM" style="width: 18rem;">
<div class="card text-BLACK bg-primary mb-3 text-right" style="width: 18rem;">
<div class="card-header">
{{ index+1 }}
</div>
<div class="card text-black bg-success mb-3" style="max-width: 18rem;">
<div class="card border-primary mb-1" style="max-width: 18rem;">
<!-- lavorare su questo per approfondire la struttura su JSON
this.posts = response.data.data.map((post) => {
return {id: post.id, title: post.attributes.title, body: post.attributes.body};
}) -->
<p class="price"><strong>DATA INIZIO: </strong>{{ item['fields']['DATA INIZIO'] }}</p>
<p class="category"><strong>DETTAGLI ATTIVITA': </strong>{{ item['fields']["Attivita'"] }}</p>
<p class="category"><strong>PRIORITA': </strong>{{ item['fields']["PRIORITA'"] }}</p>
<p class="category"><strong>ORGANIZZAZIONE: </strong>{{ item['fields']['ORGANIZZAZIONE']}}</p>
<p class="category"><strong>ORGANIZZAZIONE / NOME: </strong>{{ item['fields']['ORGANIZZAZIONE']['Nome_Organizzazione']}}</p>
<p class="category"><strong>ORGANIZZAZIONE / TIPOLOGIA: </strong>{{ item['fields']['ORGANIZZAZIONE']['TIPOLOGIA']}}</p>
<img :src="item['fields']['Photo'][0]['thumbnails']['large']['url']" alt="" v-if="item['fields']['Photo']" width="150">
</div>
</div>
</div>
</div>
<!--app-->
<!-- Include Dependancy Scripts -->
<script type="text/javascript" src="https://unpkg.com/vue"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script>
</body>
In your case, you need to call the api for each ORGANIZZAZIONE on your response, then append it. Here is an example with the first ORGANIZZAZIONE:
var app_id = "apppCqmyJHPmfDTLr";
var app_key = "key8S2tx7NINXaZzZ";
this.items = []
axios.get(
"https://api.airtable.com/v0/" + app_id + "/DASHBOARD?api_key=" + app_key, {
headers: {
Authorization: "Bearer " + app_key
}
}
).then(function(response) {
// here get ORGANIZZAZIONE for each record
for (let record of response.data.records) {
// here the first ORGANIZZAZIONE on array
let ORGANIZZAZIONE = record.fields.ORGANIZZAZIONE[0];
//call Airtable api again
axios.get(
"https://api.airtable.com/v0/" + app_id + "/DASHBOARD/" + ORGANIZZAZIONE + "?api_key=" + app_key, {
headers: {
Authorization: "Bearer " + app_key
}
}
).then(function(response2) {
// Replace ORGANIZZAZIONE on first response to the the data in response2
record.fields.ORGANIZZAZIONE = response2.data.fields;
this.items = response.data.records; // You can set each time is getted
}).catch(function(error) {
console.log(error)
})
}
}).catch(function(error) {
console.log(error)
})
codepen: https://codepen.io/hans-felix/pen/MWaNraL
I got one blog regarding this issue. please check.
https://www.storyblok.com/tp/how-to-send-multiple-requests-using-axios
I am using Aspnet mvc and .NET rotativa to convert html to pdf.
I am using CustomSwitches to display paging in PDF footer as the example [here
#{ Layout = null;}
<!DOCTYPE html>
<html>
<head>
<script>
function subst() {
var vars = {};
var x = document.location.search.substring(1).split('&');
for (var i in x) { var z = x[i].split('=', 2); vars[z[0]] = unescape(z[1]); }
var x = ['frompage', 'topage', 'page', 'webpage', 'section', 'subsection', 'subsubsection'];
for (var i in x) {
var y = document.getElementsByClassName(x[i]);
for (var j = 0; j < y.length; ++j) y[j].textContent = vars[x[i]];
}
}
</script>
</head>
<body style="border:0; margin: 0;" onload=" subst()">
<table style=" width: 100%">
<tr>
<td class="section"></td>
<td style="text-align:right">
<span class="page"></span> / <span class="topage"></span>
</td>
</tr>
</table>
</body>
</html>
but when generating the report in PDF, does not appear the page of the last page, someone has gone through it and found a solution?
I managed to solve my problem by adding the following code:
CustomSwitches = "--footer-right \"[page]/[topage]\""
Something like this for a full example:
return new ViewAsPdf("MyAction", Model) {
FileName = "somepdf.pdf",
WkhtmlPath = "~/Rotativa"
,CustomSwitches = "--footer-right \"[page]/[topage]\""
};
I have a the following static div:
<body>
<div id="parent">
</div>
</body>
<script>
dom.byId('parent').innerHTML +="<input type='submit' data-dojo-type='dijit/form/Button' onClick='test(this)' id='edit"+1+"' label='Edit' />";
dom.byId('parent').innerHTML +="<input type='submit' data-dojo-type='dijit/form/Button' onClick='test(this)' id='edit"+2+"' label='Edit' />";
</script>
TWo button's are created but they looks like normal HTML not DOJO.
The shortest possible answer is dojo/parser::parse(domNode):
var parent1 = dom.byId("parent1");
parent1.innerHTML += '<input type="submit" data-dojo-type="dijit/form/Button" onClick="test(this)" id="edit1" label="Edit 1">';
parent1.innerHTML += '<input type="submit" data-dojo-type="dijit/form/Button" onClick="test(this)" id="edit2" label="Edit 2">';
parser.parse(parent1);
Even though I cannot recommend that. Do not use innerHTML, it belongs to the world of IE6. Create dijits programmatically instead:
var parent2 = dom.byId("parent2");
var button3 = new Button({ label: "Button 3" });
button3.startup();
button3.placeAt(parent2);
button3.on("click", test);
var button4 = new Button({ label:"Button 4"});
button4.startup();
button4.placeAt(parent2);
button4.on("click", function(event) {
test(this); // `this` points to the button
});
See it in action: http://jsfiddle.net/phusick/9JCAj/