We Keep Coding

Django and jQuery.formset, how to manipulate delete button position

I'm trying to set my formset in django, using the famous jQuery plugin
jQuery.formset.js
All works perfectly, but I have some problem to set the right position of the delete button.
Now it is set in the last column of my table, like in the following figure:
But my aim is to replace the delete button in the same line of the the add button (+).
I have found in the code the following instructions, but I don't now how could set it for my aim:
var delButtonHTML = '<a class="' + options.deleteCssClass + '" href="javascript:void(0)">' + options.deleteText +'</a>';
if (options.deleteContainerClass) {
// If we have a specific container for the remove button,
// place it as the last child of that container:
row.find('[class*="' + options.deleteContainerClass + '"]').append(delButtonHTML);
} else if (row.is('TR')) {
// If the forms are laid out in table rows, insert
// the remove button into the last table cell:
row.children(':last').append(deleteButtonHTML);
} else if (row.is('UL') || row.is('OL')) {
// If they're laid out as an ordered/unordered list,
// insert an <li> after the last list item:
row.append('<li>' + deleteButtonHTML + '</li>');
} else {
// Otherwise, just insert the remove button as the
// last child element of the form's container:
row.append(delButtonHTML);
}
How could I get this instruction to achive my aim?

add container class with same class:
deleteContainerClass: 'hapus',
addContainerClass: 'hapus',

Refresh div ONLY with jQuery or Javascript

I have been going through so many posts about this but I can't find anything that works for me.
I'm trying to refresh ONLY A div section NO PHP files. The languages that I'm coding in are Javascript, jQuery, Bootstrap, and CSS.
This is the section I want to refresh
https://stackoverflow.com/a/58207615/5413196
Yes, it's my post I just don't want to recreate the same info again...
Because there is a Split function in an array of images that if you click on it the first image goes behind all of them.
Example array = [1,2,3,4] User clicks [2,3,4,1] but the DOM request is only loaded once on that section and after the user clicks the second click doesn't return the 2nd image behind [3,4,1,2]
I Understand that a DOM is only loaded once but I would really like it if I can find a way with Javascript or jQuery to refresh the div on click or auto-refresh after X seconds so that the user can click on an image again...
Provide background including what you've already tried
Scowered the whole StackOverflow for answers
Some refresh code I tried
Refresh DIV With Javascript Button
Refresh only one div with AJAX
div refresh without click of the button
Refresh div without load
refresh only one div
Onclick refresh only div
Any assistance would be amazing
Thanks in advance
Faz
EDIT
I was asked to add the code from the other post.
let image_arr = [{
id: 'part_1',
image_src: 'http://placeimg.com/100/100/animals?t=1570040444517',
h6_tag: 'Bradley Hunter',
p_tag: 'Based in Chicago. I love playing tennis and loud music.',
pin: 'a',
},
{
id: 'part_2',
image_src: 'http://placeimg.com/100/100/animals?t=1570040444516',
h6_tag: 'Marie Bennet',
p_tag: 'Currently living in Colorado. Lover of art, languages and travelling.',
pin: 'b',
},
{
id: 'part_3',
image_src: 'http://placeimg.com/100/100/animals?t=1570040444515',
h6_tag: 'Diana Wells',
p_tag: 'Living in Athens, Greece. I love black and white classics, chillout music green tea.',
pin: 'c',
},
{
id: 'part_4',
image_src: 'http://placeimg.com/100/100/animals?t=1570040444514',
h6_tag: 'Christopher Pierce',
p_tag: 'Star Wars fanatic. I have a persistent enthusiasm to create new things.',
pin: 'd',
},
];
$(document).ready(function () {
// create
createPartnerRow(image_arr);
// set image background
})
$(document).ready(function () {
$("[id^=part_]").hover(function (image_arr) {
$(this).addClass('border')
},
function () {
});
});
$("[id^=part_]").ready(function () {
$("[id^=part_]").click(function () {
$(this).removeClass('border')
// set value
var current_partner = image_arr[0];
// remove first element from array
image_arr = image_arr.splice(1, 4);
// append current_partner to end of array
image_arr.push(current_partner);
// clear the row of all partners;
$('#part_1, #part_2, #part_3, #part_4').remove();
// recreate row
console.log(image_arr);
createPartnerRow(image_arr);
});
})
function createPartnerRow(image_arr) {
for (i = 0; i < image_arr.length; i++) {
$('#partner_row').append(
'<div class="col-md-3 col-sm-6 p-3" id="' + image_arr[i].id + '">' +
'<button class="border-0 bg-white">' +
'<div class="facebox"><img class="rounded-circle img-fluid mx-auto d-block" src="' + image_arr[i].image_src + '"' + '/><span class="pin">' + image_arr[i].pin + '</span></div>' +
'<h6 class="text-center g-mt-50 font-weight-bold pt-2">' + image_arr[i].h6_tag + '</h6>' +
'<p class="text-center g-mt-50 pt-2">' + image_arr[i].p_tag + '</p>' +
'</button>' +
'</div>'
)
}
}
#partner_row {display:flex;}
.bg-white {background: transparent;}
.facebox{
position:relative;
display:inline-block; margin:auto;
width:80px; font-size:0;
}
.facebox .rounded-circle{
width:100%; border-radius:50%;
}
.facebox .pin {
display:block;
width:22px;
height:22px;
border:3px solid white;
border-radius:50%;
background:blue;
position:absolute;
bottom:-3px;
right:-3px;
color:white; text-align:center; font-size:13px; line-height:20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row" id="partner_row"></div>

well if you want to be amazed with a nice DOM system, try React...but...for what you're looking for: have you tried changing the innerHTML.
-so you target the element with an onclick function (addEventListener in JS or add onclick in the HTML)
-then you give your div an id like <div id="myDiv"></div>
-then in the onclick target fucntion/event listener target function you use :
document.getElementById("myDiv").innerHTML =
`<div>` +
` <p>write whatever html you want in here</P>` +
`</div>`;
you dont need to reload the whole DOM, just change the innerHTML of the element you want. there are a few ways to do this, but i think this might be the best bet for you. let me know how it works.

As written, the '#part_1, #part_2, #part_3, #part_4 elements (along with their hover and click event handlers) are destroyed then re-rendered on every rotation.
Hence second and subsequent clicks don't work.
There's a number of ways to cope with this:
Reattach event handlers after re-rendering.
Delegate event handling to the static container, #partner_row.
Render #partner_row once then rotate the images non-destructively by DOM manipulation, ensuring that the event handlers remain attached.
Approach 3 will has an additional advantage of being far more efficient than rotating the array and re-rendering from scratch. Here it is in full:
$(function () {
var $partnerRow = $('#partner_row');
// Render partners as a side effect of mapping image_arr to an array of jQuery objects,
// then wrap to make a jQuery set.
$(image_arr.map(function(imgData) {
$('<div class="col-md-3 col-sm-6 p-3" id="' + imgData.id + '">' +
'<button class="border-0 bg-white">' +
'<div class="facebox"><img class="rounded-circle img-fluid mx-auto d-block" src="' + imgData.image_src + '"' + '/><span class="pin">' + imgData.pin + '</span></div>' +
'<h6 class="text-center g-mt-50 font-weight-bold pt-2">' + imgData.h6_tag + '</h6>' +
'<p class="text-center g-mt-50 pt-2">' + imgData.p_tag + '</p>' +
'</button>' +
'</div>').appendTo($partnerRow);
}))
.hover(function() { // permanently attach event handlers to the rendered elements
$(this).addClass('border');
}, function () {
// $(this).removeClass('border'); // ???
}).on('click', function () {
$(this).removeClass('border');
// rotate images non-destructively by DOM manipulation
$partnerRow.find('.col-md-3.col-sm-6.p-3').eq(0).appendTo($partnerRow); // selector may simplify.
});
});

How to rewrite text between links using Javascript [duplicate]

This question already has answers here:
How to change content of div on hover using JQuery/Javascript
(6 answers)
Closed 3 years ago.
I have a link inside a div. Inside the link (between the ), I have text displayed. I want to change that text when the cursor hovers over the link.
***One thing I forgot to mention is that I want the text to be temporarily changed (i.e. only when it's hovered over).
Here's my JSFiddle: https://jsfiddle.net/ZEZEME/kapt4sL6/5/
This is what my code looks like.
HTML
<div id="imgDiv"></div>
CSS
#imgDiv {
width: 200px;
height:200px;
background-color: gray;
}
JS
var title = "World War II Plane Crashes in National Parks";
var url = "https://www.nps.gov/articles/WWIIPlaneCrashes.htm"
$(imgDiv).append($('<a href="' + url + '" id=link>'+ title +'</a>'));
(I'm working with APIs, and .append is how I create the links. I need to dynamically create them to the div in JavaScript).
This is what I've tried:
$(imgDiv).append($('<a href="' + url + '" id=link>'+ title +'</a>').css('text-decoration', 'none').hover(function(e) {
console.log($(e.target).text("NEWWW"));
}));
This permanently changes the text (as opposed to only when hovered over).
$(imgDiv).append($('<a href="' + url + '" id=link>'+ title +'</a>').css('text-decoration', 'none').hover(function(e) {
function(e) {
console.log($(e.target).text("NEWWW"));
},
function(e) {
console.log($(e.target).text("OLDDD"));
}
This gives me an error. Can anyone help?

You can use mouseover to detect when the mouse moves over the link, you can then use mouseout to see when it leaves the link.
You also want to use text() as val() is for form fields.
var title = "World War II Plane Crashes in National Parks";
var url = "https://www.nps.gov/articles/WWIIPlaneCrashes.htm"
$('#imgDiv').append($('<a href="' + url + '" id=link>'+ title +'</a>'))
// Create an event to watch "a" tags
$('#imgDiv a').on('mouseover', (e) => {
$(e.target).text('I am some new text')
})
// Comment this out if you don't want it to go back on mouse out.
.on('mouseout', (e) => {
$(e.target).text(title)
});
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#imgDiv {
width: 200px;
height:200px;
background-color: gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="imgDiv"></div>

jquery, add div with class definition

So I see here how to add a div and here how to add a class but I'm having trouble combining the two. I want to generate a whole bunch of div's with a specific class and id within the div sparkLineContainer.
I have the containing div
<div id="#sparkLineContainer"></div>
and I want to add a bunch of the following to it
<div id="#sparkLineContainer">
<div class="sparkLines" id="id1">Some stuff here</div>
<div class="sparkLines" id="id2">Some stuff here</div>
<div class="sparkLines" id="id3">Some stuff here</div>
// and so on
</div>
snippet - I didn't make it very far, I'm stumped
$('#sparkContainer').add("div"); \\ How do I add the id and class to this div?
\\ And as a repeat the function will it overwrite this?
The function I'm trying to do this with.
function renderSparklines (array1, sparkLineName, id) {
// array1 is the data for the spark line
// sparkLineName is the name of the data.
// Turn all array values into integers
arrayStringToInt(array1);
// Create new div of class sparkLines
$('#sparkContainer').add("div")
// Render new spark line to
$('.sparkLines').sparkline(array1, {width:'90px'});
var htmlString = ""; // Content to be added to new div
// GENERATE LITTLE SPARK BOX
htmlString +=
'<font class = "blueDescriptor">' + sparkLineName + '</font>'+
'<br>'+
'<font class = "greyDescriptorSmall">Ship to Shore</font>'+
'<br>'+
'<font class = "blackDescriptorSparkLine">' + array1[array1.length-1] + '</font>'+
'<font class = "greenDescriptorSparkline">(' + (array1[array1.length-1] - array1[array1.length-2]) + ')</font>' +
'<br>';
$('.sparkLines').prepend(htmlString);
}

add does not do what you think it does. You are looking for append or something similar.
You can create the div first and define its attributes and contents, then append it:
var $newDiv = $("<div/>") // creates a div element
.attr("id", "someID") // adds the id
.addClass("someClass") // add a class
.html("<div>stuff here</div>");
$("#somecontainer").append($newDiv);

You need .append or .prepend to add a div to the container. See my version below,
var $sparkLines = $('.sparkLines');
$("#sparkLineContainer")
.append('<div id="id' +
($sparkLines.length + 1) +
'" class="sparkLines">Some Stuff Here</div>')
Also I noticed that you have id of the div as #sparkLineContainer. You should change it as below,
<div id="sparkLineContainer">
...
DEMO

You can add a div or any other tag along with class like:
$('<div/>',{ class : 'example'}).appendTo("p");

Probably the easiest way is to just modify the innerHTML:
$("#sparkLineContainer").append('<div class="sparkLine" id="id1"></div>');
There's other ways as well, but this is the method I generally use.

Using Javascript and CSS to align left to right

I have this line of javascript which creates a listing of store locations, and creates a DIV beneath the map. The items are displayed on the page top to bottom.
I would like to display the items as 3 in a row, left to right, top to bottom.
The function is this:
function createSidebarEntry(marker, name, address, city, state, zipcode, telephone, images, url) {
var div = document.createElement('div');
var html = "<p><a href='http://" + url + "'>" + name + "</a><br/>" + address + "<br/>" + city + ", " + state + " " + zipcode + "<br/>" + (formatPhone(telephone)) + "</p>";
div.innerHTML = html;
div.style.marginBottom = '5px';
return div;
}
As a side bar question, would tables be the preferred method?
I have tried to set the DIV as:
#sidebar {
text-align: left;
margin: 0px auto;
padding: 0px;
border:0;
width:665px;
font-size:10pt;
font-family:Arial;
color:#656668;
display: table-cell;
}
And unfortunately after working with margins, etc, I have seemed to run out of luck. Has anyone been able to use dynamic returned data and apply formatting with CSS in three columns? I have been googling and everything I see points me to creating three column styles within my DIV container.

try setting the parent element with a fixed width and apply float to the childs and a width of 33% for them. Don't forget to use a clear afterwards.

I would suggest creating your elements with jquery. It's alot easier and more elegant.
But the root of you issue is that you need to add a float:left; style to your div. This will put all your divs in the same row.
Oh, and try to use tables as little as possible to layout out elements on your page. Divs and CSS are the way to go.