Jquery .Hover issue with Ajax - javascript

I have this code:
cuts_html = '';
for( i = 0; i < attachments.length; i++ ) {
fburl3 = site_url + '/haircut-detail/?img_id=' + attachments[i].ID + '&uid=' + attachments[i].post_author;
if( isNaN(attachments[i].view_count) ) attachments[i].view_count = 0;
cuts_html += '<div id="controller-image" class="cut-image">';
cuts_html += '<div id="cut-imageplacer">';
cuts_html += '<div class="cut-image-info">' +
'By <a href="' + user_profile_url +
'&user_id=' + attachments[i].post_author + '">' +
attachments[i].author_name + '</a>' +
'</div>';
cuts_html += '<div class="commentbox-1">' +
'<img src="https://d2xcq4qphg1ge9.cloudfront.net/assets/17276/435546/original_views.png"> ' +
attachments[i].view_count +
' <img src="https://d2xcq4qphg1ge9.cloudfront.net/assets/17276/435545/original_talk-bubble.png"> ' +
'<fb:comments-count href="' + fburl3 + '"></fb:comments-count>' +
'</div></div>';
cuts_html += '<a class="cut-image-a" ' +
'href="' + image_detail_url +
'?uid=' + attachments[i].post_author +
'&img_id=' + attachments[i].ID + '">' +
attachments[i].attachment_image_html + '</a>';
cuts_html += '</div>';
}
Div Id cut-imageplacer is display:none, so what I want is when someone hovers the controller-image div, the cut-imageplacer to show and hide of course when not on. I use this code:
<script type="text/javascript">$(document).ready(function(){ $('.cut-image').hover(
function(){ $('#cut-imageplacer').show();
}, function () { $('#cut-imageplacer').hide(); }); }); </script>
But it doesn't work... Any idea what I am doing wrong? Or point me to correct direction?

It look like you are trying to attach events to elements that are being dynamically created. You need to use Live() or On() to attach events to these elements after they are created. Look at This and This to see how to use those.
like:
<script type="text/javascript">
$(document).ready(function(){
$('.cut-image').live("hover",
function(){
$('#cut-imageplacer').show();
}, function () {
$('#cut-imageplacer').hide();
});
}); </script>

Related

why gihub pages wont load conditionals of JS script

My code is working properly on liveserver, but when I merge on github and open using github pages both conditionals "if" dont work at all. It's something that should be apllied on all pages.
This is how I load on HTML
<head>
<script src="./JS/header.js" defer></script>
</head>
<body>
<header id="header"></header>
This is the JS code:
function insertHeader(){
var codeBlock1 = '<div class="container">' +
'<img class="logo" src="./assets/logo.jpeg" alt="logo página">' +
'<div class="menu-section">' +
'<div class="container-menu">' +
'<input type="checkbox" id="checkbox-menu" />' +
'<label class="menu-button-container" for="checkbox-menu">' +
'<span></span>' +
'<span></span>' +
'<span></span>' +
'</label>' +
'<nav>' +
'<ul class="menu">' +
'</ul>' +
'</nav>' +
'</div>' +
'</div>' +
'</div>';
document.querySelector("#header").innerHTML += codeBlock1;
const urlAtual = window.location.pathname.substring(1);
if (urlAtual !== 'index.html'){
var codeBlockHome = '<li>' +
'Home' +
'</li>';
document.querySelector(".menu").innerHTML += codeBlockHome;
};
var codeBlockLocais =
'<li>' +
'Locais' +
'<ul class="submenu-locais">' +
'<li>Pontos Turísticos</li>' +
'</ul>' +
'</li>';
document.querySelector(".menu").innerHTML += codeBlockLocais;
if (urlAtual !== 'team.html'){
var codeBlockTeam = '<li>' +
'Equipe' +
'</li>';
document.querySelector(".menu").innerHTML += codeBlockTeam;
};
var codeBlockContato = '<li>' +
'Contato' +
'</li>';
document.querySelector(".menu").innerHTML += codeBlockContato;
for (i=0; i< estados.length; i++){
estadosNome[i] = estados[i].slice(0, -5);
estadosSigla[i] = estados[i].split(' ').pop();
var codeBlock2 = `<li>${estadosNome[i]}</li>`;
document.querySelector(".submenu-locais").innerHTML += codeBlock2;
}};
insertHeader();
Only "ifs" dont work, and I already solved this problem with CSS. But I'm still curious to why it worked on liveserver and not on github pages.

How to select single element value which created dynamically in html using jQuery / Javascript?

I have a scenario like this:
for (var k in active) {
notifications.append(
'<a href="javascript:toast();">' +
'<div>' +
'<input class="phone_number" type="hidden" id='+active[k].phone_number+' value='+active[k].phone_number+'>'+
'</input>'+
'<span class="notify bg-blue">' + '<i class="fa fa-clock-o"></i>' + '</span>' +
'<span>' +
'<span>Sim ' + active[k].phone_number + ' Expires in ' + active[k].expiry_count + 'days</span>' +
'<br/>' +
'<span class="time">Just Now</span>' +
'</span>' +
'</div>' +
'</input>'+
'</a>');
}
i created dynamic elements using jade template engine.
here i need to identify each <a> click and i nedd to get the value of hidden field.
function toast() {
var grade;
//var phone_number=document.getElementById('phone_number').value;
$.each($('.phone_number'), function () {
grade = $(this).val();
alert(grade);
});
}
by doing this i got a loop of value. which i didn't want. i need single item value. how to solve this ?
pass this to the toast
'<a href="javascript:toast(this);">' +
and change the toast method to
function toast( thisObj )
{
var grade = $( thisObj ).parent().find( '.phone_number[type="hidden"]' ).attr( "value" );
alert( grade );
}
notifications = $(".notifications")
active = [{ phone_number: "982334",expiry_count: "1"},
{ phone_number: "982334",expiry_count: "1"}]
var k;
for (var k in active) {
notifications.append(
'<a href="javascript:toast();">' +
'<div>' +
'<input class="phone_number" type="hidden" id='+active[k].phone_number+' value='+active[k].phone_number+'>'+
'</input>'+
'<span class="notify bg-blue">' + '<i class="fa fa-clock-o"></i>' + '</span>' +
'<span>' +
'<span>Sim ' + active[k].phone_number + ' Expires in ' + active[k].expiry_count + 'days</span>' +
'<br/>' +
'<span class="time">Just Now</span>' +
'</span>' +
'</div>' +
'</input>'+
'</a>');
}
$(document).on('click', 'a', function(){
alert($(this).find('.phone_number').val())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="notifications"></div>
Its simple.Try this
$(document).on('click', 'a', function(){
alert($(this).find('.phone_number').val())
})
Send the toast function the k you are iterating over
'<a href="javascript:toast(' + k + ');">'
then use k in your function
function toast(k) {
//use k (maybe select by id)
}

How do I get the innerHTML of a part of my page when that inner HTML is generated by a Javascript function?

I have a function getsWeather which uses the SimpleWeather framework. That function is as follows:
function getsWeather(city, unitMes) {
$.simpleWeather({
location: city,
woeid: '',
unit: unitMes,
success: function(weather) {
// ---- For testing the weather code ----
//alert(weather.code);
//alert(weather.currently);
//alert(weather.forecast[1].code);
var conditionArr0 = conditionsImage(weather.code);
var conditionArr1 = conditionsImage(weather.forecast[1].code);
var conditionArr2 = conditionsImage(weather.forecast[2].code);
var conditionArr3 = conditionsImage(weather.forecast[3].code);
loc = weather.city + ', ' + weather.region;
html = '<h3>Now</h3><p>'+returnsDate()+'</p><p id="city-reading">' + weather.city + ', ' + weather.region + '</p>';
html += '<div class="icon ' + conditionArr0[0] + '"></div>';
html += '<i class="icon-'+weather.code+'"></i><h2 id="temperature-reading">'+weather.temp+'°'+weather.units.temp+'</h2>';
html += '<h6 class="currently">'+weather.currently+'</h6>';
forecast1 = '<h4>' + weather.forecast[1].day + '</h4>';
forecast1 += '<div class="icon-sm ' + conditionArr1[0] + '"></div>';
forecast1 += '<h5>H: ' + weather.forecast[1].high + '</h5>';
forecast1 += '<h5>L: ' + weather.forecast[1].low + '</h5>';
forecast2 = '<h4>' + weather.forecast[2].day + '</h4>';
forecast2 += '<div class="icon-sm ' + conditionArr2[0] + '"></div>';
forecast2 += '<h5>H: ' + weather.forecast[2].high + '</h5>';
forecast2 += '<h5>L: ' + weather.forecast[2].low + '</h5>';
forecast3 = '<h4>' + weather.forecast[3].day + '</h4>';
forecast3 += '<div class="icon-sm ' + conditionArr3[0] + '"></div>';
forecast3 += '<h5>H: ' + weather.forecast[3].high + '</h5>';
forecast3 += '<h5>L: ' + weather.forecast[3].low + '</h5>';
//$("input[name=locSearch]").val(loc);
$("#weather").html(html);
$(".today").css('background-color', conditionArr0[1]);
$("#1").html(forecast1);
$("#2").html(forecast2);
$("#3").html(forecast3);
},
error: function(error) {
loc = '<h5><button id="search"><i class="fa fa-search" id="search-icon"></i></button></h5>';
html = '<p>Today</p><p><strong>'+returnsDate()+'</strong></p>';
html += '<div class="icon ' + ' ' + '"></div>';
html += '<h2><strong><i class="icon-'+ ' ' +'"></i> '+weather.temp+'°'+weather.units.temp+'</strong></h2>';
html += '<h6 class="currently">'+ ' ' +'</h6>';
$("#location").html(loc);
$("#weather").html(html);
$(".today").css('background-color', conditionArr0[1]);
}
});
}
I just want to pull the weather.city from this function but I don't know how to really do that.
I'm trying to do it with this var currentLocation = document.getElementById("city-reading").innerHTML; but that doesn't work and I'm assuming it's because the code hasn't been generated yet for me to pull from? Is there an easier way to do this?
It's hard to say without a look at the larger context, but it looks like the function being defined here is a callback for $.simpleWeather(), so it sounds like you want to do something with the values returned. If you're putting the var currentLocation = document.getElementById("city-reading").innerHTML; somewhere else, it won't work since it runs immediately, before the callback has been made.
Can you just move whatever you want to do with the currentLocation into the body of the current callback? If not, you could think about defining another callback to run once this one completes, then your code should work.
Try putting your variable outside of the function and then setting it inside, like below. If you want to be able to access from html you could also go old school and store it in a hidden input from within the getsWeather function.
var currentLocation = '';
function getsWeather(city, unitMes) {
$.simpleWeather({
location: city,
woeid: '',
unit: unitMes,
success: function(weather) {
// ---- For testing the weather code ----
//alert(weather.code);
//alert(weather.currently);
//alert(weather.forecast[1].code);
var conditionArr0 = conditionsImage(weather.code);
var conditionArr1 = conditionsImage(weather.forecast[1].code);
var conditionArr2 = conditionsImage(weather.forecast[2].code);
var conditionArr3 = conditionsImage(weather.forecast[3].code);
currentLocation = weather.city;
loc = weather.city + ', ' + weather.region;
html = '<h3>Now</h3><p>'+returnsDate()+'</p><p id="city-reading">' + weather.city + ', ' + weather.region + '</p>';
html += '<div class="icon ' + conditionArr0[0] + '"></div>';
html += '<i class="icon-'+weather.code+'"></i><h2 id="temperature-reading">'+weather.temp+'°'+weather.units.temp+'</h2>';
html += '<h6 class="currently">'+weather.currently+'</h6>';
forecast1 = '<h4>' + weather.forecast[1].day + '</h4>';
forecast1 += '<div class="icon-sm ' + conditionArr1[0] + '"></div>';
forecast1 += '<h5>H: ' + weather.forecast[1].high + '</h5>';
forecast1 += '<h5>L: ' + weather.forecast[1].low + '</h5>';
forecast2 = '<h4>' + weather.forecast[2].day + '</h4>';
forecast2 += '<div class="icon-sm ' + conditionArr2[0] + '"></div>';
forecast2 += '<h5>H: ' + weather.forecast[2].high + '</h5>';
forecast2 += '<h5>L: ' + weather.forecast[2].low + '</h5>';
forecast3 = '<h4>' + weather.forecast[3].day + '</h4>';
forecast3 += '<div class="icon-sm ' + conditionArr3[0] + '"></div>';
forecast3 += '<h5>H: ' + weather.forecast[3].high + '</h5>';
forecast3 += '<h5>L: ' + weather.forecast[3].low + '</h5>';
//$("input[name=locSearch]").val(loc);
$("#weather").html(html);
$(".today").css('background-color', conditionArr0[1]);
$("#1").html(forecast1);
$("#2").html(forecast2);
$("#3").html(forecast3);
},
error: function(error) {
loc = '<h5><button id="search"><i class="fa fa-search" id="search-icon"></i></button></h5>';
html = '<p>Today</p><p><strong>'+returnsDate()+'</strong></p>';
html += '<div class="icon ' + ' ' + '"></div>';
html += '<h2><strong><i class="icon-'+ ' ' +'"></i> '+weather.temp+'°'+weather.units.temp+'</strong></h2>';
html += '<h6 class="currently">'+ ' ' +'</h6>';
$("#location").html(loc);
$("#weather").html(html);
$(".today").css('background-color', conditionArr0[1]);
}
});
}
A recursive function like the following will get the innerHTML for you once it is available.
inside the function check if you have the element with id city-reading yet, if not, set a timeout for 50ms then call yourself again to check if the element is ready. Until you get it, then you can set the innerHTML and call the function you need to continue the function chain.
var currentLocation;
function getCityReading() {
if (document.getElementById("city-reading")) {
currentLocation = document.getElementById("city-reading").innerHTML;
console.log('YES. currentLocation-->'+currentLocation);
//you got the dynamic content you need, call next function
nextFunction();
} else {
console.log('Not yet...');
setTimeout(function() {
getCityReading();
}, 50);
}
}
//init
getCityReading();
//add the id after 2 sec, simulate the situation of a dynamically added element.
setTimeout(function() {
console.log('update id now');
document.getElementsByClassName("test-container")[0].setAttribute("id", "city-reading");
}, 2000);
function nextFunction(){
console.log("I'm a function place holder, lol");
}
<div class="test-container" id="">
I'm city-reading content.
</div>

How to get ajax response on a button click

I am getting table data from ajax response as json.Some json datas am not displaying but I want it on a button click for other purpose.How can I get it?Please help me.
function leaveTable() {
for (var i = 0; i < leaveList.length; i++) {
var tab = '<tr id="' + i + '"><td>' + (i + 1) + '</td><td class="appliedOn">' + leaveList[i].appliedOn + '</td><td class="levType" >' + leaveList[i].levType + '</td><td class="leaveOn" >' + leaveList[i].leaveOn + '</td><td class="duration">' + leaveList[i].duration + '</td><td class="status">' + leaveList[i].status + '</td><td class="approvedOn">' + leaveList[i].approvedOn + '</td><td class="approvedBy">' + leaveList[i].approvedBy + '</td><td><i class="btn dltLev fa fa-times" onclick="cancelLeave(this)" data-dismiss="modal" value="Cancelled"></i></td><tr>';
$('#levListTable').append(tab)
}
}
from ajax response I want leaveTypeId and pass it into sendCancelReq() function.
Complete code :https://jsfiddle.net/tytzuckz/18/
It is complicated to know exactly what you want. I hope that helps you:
The first, I would change, is not to produce the JavaScript events in your html code var tab = .... I think, it is more clear and readable, when you add your event after the creation of the new dom elements. For example:
var tab = $('<tr id="' + i + '">' +
'<td>' + (i + 1) + '</td>' +
'<td class="appliedOn">' + leaveList[i].appliedOn + '</td>' +
'<td class="levType" >' + leaveList[i].levType + '</td>' +
'<td class="leaveOn" >' + leaveList[i].leaveOn + '</td>' +
'<td class="duration">' + leaveList[i].duration + '</td>' +
'<td class="status">' + leaveList[i].status + '</td>' +
'<td class="approvedOn">' + leaveList[i].approvedOn + '</td>' +
'<td class="approvedBy">' + leaveList[i].approvedBy + '</td>' +
'<td><i class="btn dltLev fa fa-times" data-dismiss="modal" value="Cancelled"></i></td>' +
'<tr>');
$(tab).find('.btn.dltLev').click(function () { cancelLeave(this); });
Then, you are able to send your necessary information more clearly, e.g.:
Instead of the last code
$(tab).find('.btn.dltLev').click(function () { cancelLeave(this); });
you can write
$(tab).find('.btn.dltLev').click(function () { cancelLeave(this, leaveList[i].leaveTypeId); });
and extend your method cancelLeave to:
function cancelLeave(elem, leaveTypeId) {
var id = $(elem).closest('tr').attr('id')
alert(id)
$("#cancelLeave").modal("show");
$('.sendCancelReq').val(id);
sendCancelReq(leaveTypeId);
}
Got solutionPlease check this:https://jsfiddle.net/tytzuckz/19/
function cancelLeave(elem) {
var levTypeId = $(elem).attr('id')
var id = $(elem).closest('tr').attr('id')
$('.currentLevTypeId').val(levTypeId);
$("#cancelLeave").modal("show");
$('.sendCancelReq').val(id);
}
function sendCancelReq() {
var a= $('.currentLevTypeId').val();
alert(a)
}

Making multiple elements with jquery each() and jquery function

Well, I have a table with multiple text nodes I'm getting through the .text() function and linking to another table with one row that I'm using as a timeline.
I tried to input in a single td of the text values that corresponds to the correct data, but I only managed to grab the last value I in my loop, instead of getting them all. Here is my code:
var tHold, divLine, id, dataTitle, dataDescription;
$(".class1").each(function(){
tHold = $(this);
$(".class2").each(function(){
if ($(this).text() == tHold.attr("value")){
if($('#1').children("div#" + tHold.attr("name")).length == 0){
dataTitle = '<div class="r">' + $(this).text() + '</div><br/>';
dataDescription = '<div class="t">' + $(this).parent().children(".x").text() + ': ' + $(this).parent().children(".y").text() + ' (' + $(this).parent().children(".z").text() + ')' + '</div>';
divLine = $('<div id="' + tHold.attr("name") + '" class="b" value="' + tHold.attr("value") + '"></div>');
divLine.append(dataTitle);
divLine.append(dataDescription);
$("#1").append(divLine);
}
if($('#2').children("div#id" + tHold.attr("name")).length == 0){
dataTitle = '<div class="r">' + $(this).text() + '</div><br/>';
dataDescription = '<div class="t">' + $(this).parent().children(".x").text() + ': ' + $(this).parent().children(".y").text() + ' (' + $(this).parent().children(".z").text() + ')' + '</div>';
divLine = $('<div id="des' + tHold.attr("name") + '" class="c" value="' + tHold.attr("value") + '"></div>');
divLine.append(dataTitle);
divLine.append(dataDescription);
$("#2").append(divLine);
}
}
});
});
It's been simplified and cut out of a whole context , but all that matters is there. How can I set dataDescription to be multiple divs with diferent values instead of just the last I loop through?

Categories