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.
});
});
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>
I have a div that act as a console. It record the activity on the site. I display message in it and to apply color to the text I use <span> elements with CSS classes.
My CSS classes
.consoleError{ <---- dynamic prepend
color: #f00;
}
.consoleGood{ <---- dynamic prepend
color: #2aff01;
}
The JavaScript that prepend(Jquery) the stings:
$('#console').prepend('<span class="consoleError">ERREUR : </span>' + data[i] + '<br>');
}
$('#console').prepend('<span class="consoleGood"> Status: ' + data[0] + '</span> Requête: ' + action + ' Conteneur:' +container+ '<br>');
I use prepend to insert them at the top;
Now the problem is that when an error occur the "consoleError" class is taking effect I see it live in red;
The other class "consoleGood" spans are inserted before I can actually view them because of the time it take me to get to the console.
So I'm wondering why one span CSS is working and not the other that was inserted prior to activating the display of "#console" element?
Anyone know what is wrong here?
I'm trying to pass a variable through from one page to another in my phone gap application. The function however, never seems to get called.
Heres what's building up the links:
$.each(data, function(index) {
$("#listpetsList").append("<li><a href='javascript:loadPetdialog(" + data[index].AnimalCode + ")' data-rel=\"dialog\" data-transition=\"flip\"><img src='" + data[index].Picture + "'><h2>" + data[index].Name + "</h2><p>Type</p></li>");
});
Heres the loadPetDialog:
var editingId = 0
function loadPetdialog(id) {
alert("hit");
editingId = id;
$.mobile.changePage("#select-pet-dialog");
}
However, it never seems to get hit
Don't use inline JavaScript with jQuery Mobile.
Do it like this:
$.each(data, function(index) {
$("#listpetsList").append("<li><a data-custom='"+ data[index].AnimalCode + "' data-rel=\"dialog\" data-transition=\"flip\"><img src='" + data[index].Picture + "'><h2>" + data[index].Name + "</h2><p>Type</p></li>");
});
$(document).on('click', '#listpetsList li a', function(){
editingId = $(this).prop('data-custom');
$.mobile.changePage("#select-pet-dialog");
});
var editingId = 0
Inline JavaScript has a tendency not to work or even misfire when used with jQuery Mobile. So it is best to bind click event to each listview element and get particular li element value when you click on it.
In my example I have bound click event to each listview elements. data[index].AnimalCode is saved as a custom data value. When you click on listview click event will trigger on selected listview element only, then we can easily find custom data value, add it to global variable and programatically change page.
Click event is bound in such way that it doesn't care if listview have or don't have inner content. It will work for any existing and future listview content.
Update
I made a working example out of your code: http://jsfiddle.net/Gajotres/92XG5/
There's only one difference between this code and last weeks example.
Change this line:
editingId = $(this).prop('data-custom');
To this line:
editingId = $(this).attr('data-custom');
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.