jQuery replace div based on rel attribute

jQuery replace div based on rel attribute - javascript

I'm trying to replace a div based on a class name and a rel attribute.
<script type="text/javascript">
$(function () {
$('.special_button').click(function () {
var num = $(this).attr('rel');
$(button with class .value_button and rel=num).replaceWith("<div class='value_button' >" + $(this).val() + "</div>");
$('div.content_slide').slideUp(600);
});
});
</script>
How would you do this?

Try this:
$(function () {
$('.special_button').click(function () {
var num = $(this).attr('rel');
$('.value_button[rel="' + num + '"]').replaceWith("<div class='value_button' >" + $(this).val() + "</div>");
$('div.content_slide').slideUp(600);
});
});

Related

Mouseenter and mouseleave change for mobile and tablet

How to change mouseenter and mouseleave to working with click?
I have images and on click show another inside.
How to fix mouseleave, here is code in Javascript:
$("div.mitarbeiterfoto")
.mouseenter(function() {
var id = $(this).attr("id");
var idInfo = $(this).attr("id").substr(5);
($(this).find('img').css('display', 'none'));
($('#' + id + '_o').css('display', 'block'));
showInfo(idInfo);
})
.mouseleave(function() {
var id = $(this).attr("id");
var idInfo = $(this).attr("id").substr(5);
($(this).find('img').css('display', 'block'));
($('#' + id + '_o').css('display', 'none'));
hideInfo(idInfo);
});
Please i need help!

Assigning events like this would work
$('.mitarbeiterfoto').on('mouseenter', function () {
var id = $(this).attr("id");
var idInfo = $(this).attr("id").substr(5);
($(this).find('img').css('display', 'none'));
($('#' + id + '_o').css('display', 'block'));
showInfo(idInfo);
});
$('.mitarbeiterfoto').on('mouseleave', function () {
var id = $(this).attr("id");
var idInfo = $(this).attr("id").substr(5);
($(this).find('img').css('display', 'block'));
($('#' + id + '_o').css('display', 'none'));
hideInfo(idInfo);
});
$('.mitarbeiterfoto').on('click', function () {
//click
});

Dropdown won't select and open div... What am I doing wrong?

On our Offices page if you click the dots on the map it opens a div below and changes the sidebar contents. We added a dropdown so you could select cities on mobiles. Since I recreated the website and copied over the code I've done something and it doesn't work anymore.
I know the problem has something to do with this bit of code
$('#continent').change(function() {
$('.targetDiv').hide();
$('#worldwide').hide();
var target = $("select option:selected").attr('target');
var value = $("select option:selected").attr('value');
console.log($('#' + value));
$(".detail-container").empty();
$('#' + value).clone().show().appendTo(
".detail-container");
$('#div' + target).show();
if (value == "worldwide") {
$('.slidingDiv').slideUp();
}
});
Here is the full code
jQuery(function($) {
$(".dot").show();
$('.dot').click(function() {
$(".slidingDiv").slideDown('slow');
});
$('#continent').change(function() {
$(".slidingDiv").slideDown('slow');
});
});
jQuery(function($) {
$('#showSingle').click(function() {
$('.targetDiv').show();
});
$('.dot').click(function() {
$('.targetDiv').hide();
$('#div' + $(this).attr('target')).show();
var value = $(this).attr('city');
$(".detail-container").empty();
$('#' + value).clone().show().appendTo(
".detail-container");
$('#' + value).show();
$('#continent').val(value);
});
$('#continent').change(function() {
$('.targetDiv').hide();
$('#worldwide').hide();
var target = $("select option:selected").attr('target');
var value = $("select option:selected").attr('value');
console.log($('#' + value));
$(".detail-container").empty();
$('#' + value).clone().show().appendTo(
".detail-container");
$('#div' + target).show();
if (value == "worldwide") {
$('.slidingDiv').slideUp();
}
});
});
I'm sure this is something simple for someone who knows Javascript.
Thanks.

There you go:
$('#continent').change(function() {
$('.targetDiv').hide();
$('#worldwide').hide();
var target = $("#continent").find(":selected").attr('target');
var value = $("#continent").val();
console.log($('#' + value));
$(".detail-container").empty();
$('#' + value).clone().show().appendTo(
".detail-container");
$('#div' + target).show();
if (value == "worldwide") {
$('.slidingDiv').slideUp();
}
});
Should work, but it's very ugly code i guess :P

js onclick event is not working for my portfolio

My js onclick event is not working for my portfolio. The page can be seen here: http://www.savantgenius.com/portfolio/branding and this is the script:
<script type="text/javascript">
$(function() {
var portDefault = 'bonya';
$('#portItem').hide();
$('#portLoader').fadeIn();
$('#portItem').load('http://www.savantgenius.com/portfolio/portfolio-item/' + portDefault + ' #portLoadedContent', function() {
$('#portLoader').fadeOut();
$('#portItem').fadeIn();
});
$('a.focusElement').focus();
});
function get_portfolio(portLocation) {
$('#portItem').fadeOut();
$('#portLoader').fadeIn();
$('#portItem').load('http://www.savantgenius.com/portfolio/portfolio-item/' + portLocation + ' #portLoadedContent', function() {
$('#portLoader').fadeOut();
$('#portItem').fadeIn();
});
}
The loading animation appears, but no image. Any thoughts are much appreciated, thanks!

Going off of #Christian Varga's comment, you need to return HTML with the source set as the link you create. Try something like:
$("#portItem").html($("<img>")
.attr("src", 'http://www.savantgenius.com/portfolio/portfolio-item/' + portLocation + '#portLoadedContent'));
instead of your .load() line.
So I guess your final function should be something like:
function get_portfolio(portLocation) {
$('#portItem').fadeOut();
$('#portLoader').fadeIn();
$("#portItem").html($("<img>")
.attr("src", 'http://www.savantgenius.com/portfolio/portfolio-item/' + portLocation + '#portLoadedContent'));
// UPDATE:
setTimeout(function () {
$('#portLoader').fadeOut();
$('#portItem').fadeIn();
}, 1000);
});
}

Check this solution:
HTML:
<div id="portItem"><img /></div>
JS:
$(function() {
var portDefault = 'bonya';
$('#portItem').hide();
$('#portLoader').fadeIn();
$('#portItem img').attr("src",'http://www.savantgenius.com/portfolio/portfolio-item/' + portDefault + '#portLoadedContent');
$('#portItem img').load(function() {
$('#portLoader').fadeOut();
$('#portItem').fadeIn();
});
});
function get_portfolio(portLocation) {
$('#portItem').hide();
$('#portLoader').fadeIn();
$('#portItem img').attr("src",'http://www.savantgenius.com/portfolio/portfolio-item/' + portLocation + '#portLoadedContent');
//check if image is loaded, then hide loader + show image:
$('#portItem img').load(function() {
$('#portLoader').fadeOut();
$('#portItem').fadeIn();
});
}
See demo : http://jsfiddle.net/esqmr/1/

Try removing the space before #portLoadedContent
<script type="text/javascript">
$(function() {
var portDefault = 'bonya';
$('#portItem').hide();
$('#portLoader').fadeIn();
$('#portItem').load('http://www.savantgenius.com/portfolio/portfolio-item/' + portDefault + '#portLoadedContent', function() {
$('#portLoader').fadeOut();
$('#portItem').fadeIn();
});
$('a.focusElement').focus();
});
function get_portfolio(portLocation) {
$('#portItem').fadeOut();
$('#portLoader').fadeIn();
$('#portItem').load('http://www.savantgenius.com/portfolio/portfolio-item/' + portLocation + '#portLoadedContent', function() {
$('#portLoader').fadeOut();
$('#portItem').fadeIn();
});
}

How to attach click event at runtime when i have all ids in an array that gets populated when document is ready?

I have the following code,
<script type="text/javascript">
$(document).ready(function () {
var dataAnalysisDataFileTableIDs = $("#dataAnalysisDataFileTable tr[id]").map(function () { return this.id; }).get();
//for(var key in dataAnalysisDataFileTableIDs) {
// var id = "#" + dataAnalysisDataFileTableIDs[key];
// $(id).click(function () {
// alert("[" + index + "][" + value + "]");
// });
//}
//$.each(dataAnalysisDataFileTableIDs, function (index, value) {
// var id = "#" + dataAnalysisDataFileTableIDs[key];
// $(id).click(function () {
// alert("[" + index + "][" + value + "]");
// });
//});
$("#dataAnalysisDataFileTable tr[id]").each(function (i, elem) {
$(elem).click(function () { alert("[" + i + "][" + this.id + "]"); });
});
$("#aaa").click(function () {
alert("meow");
});
});
</script>
and it doesn't work i also tried the one in the comments section which does the same as "for in" it doen't work but when i attach click to the id #aaa it works fine how do i approach this problem when i have all the ids in the array and i want to be able to attach events to them?

How about just using each ? Like so:
<html>
<head><script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script></head>
<body>
<table id="dataAnalysisDataFileTable">
<tr id="foo"><td>foo</td></tr>
<tr id="bar"><td>bar</td></tr>
</table>
<script type="text/javascript">
$(document).ready(function () {
$("#dataAnalysisDataFileTable tr[id]").each(function(i, elem) {
$(elem).click(function() { alert("[" + i + "][" + this.id + "]") } );
});
});
</script>
</body>
</html>

I've patched the possible errors. I cannot resolve the value variable though.
for(var index=0, length=dataAnalysisFileTableIDs.length; index++) {
var key = dataAnalysisFileTableIDs[index];
var id = "#" + dataAnalysisFileTableIDs[key];
$(id).click(function () {
/* Value ? It's not defined*/
alert("[" + index + "][" + /*value +*/ "]");
});
}
dataAnalysisFileTableIDs is an array. To loop through an array, you have to use the for ( init_index ; condition ; increment ) loop. The key can be obtained through name_of_array[index].

javascript/jquery remove or delete option from select

I need to delete an option from a select in certain circumstances.
Basically:
if(mystatement == true)
{
//remove item with id 'option1' from select of id 'select1'
}
Anyone know the code for me to achieve this?
Many thanks.

Remove by Value:
$("#select1 option[value=1]").remove();
Remove by Text:
$("#select1 option:contains(Text)").remove();

Edit
Since id is unique in the document no need to relate it to the parent select element. You can do simply
$("#option1").remove();

jQuery:
$("#option1").remove();
or
$("#select").remove("#option1");
And the classic javascript method:
var option1 = document.getElementById("option1");
document.getElementById("select1").removeChild(option1);

I have seen many people with this problem. I have created this script that could be useful. Hope you like it:
var robable = {
init: function() {
robable.get_selected_option_from_select();
},
get_selected_option_from_select: function() {
$(".robable").off().on("change", function() {
if ($(this).val() !== "") {
robable.add_to_list($(this));
}
});
},
remove_option_from_select: function(select_id, value) {
$("#" + select_id + " option[value='" + value + "']").remove();
},
add_option_to_select: function(select_id, value, text) {
$('#' + select_id).append('<option value="' + value + '">' + text + '</option>');
},
add_to_list: function(select) {
option_text = $(".robable option[value='" + select.val() + "']").text();
//Add to list
$('#list').append("<li data-value='" + select.val() + "' data-text='" + option_text + "'><a href='#' class='filter-remove' data-parent-id='" + select.attr("id") + "'>Delete</a> " + option_text + "</li>");
robable.remove_from_list();
//Remove from select
robable.remove_option_from_select(select.attr("id"), select.val());
},
remove_from_list: function() {
$(".filter-remove").off().on("click", function() {
var select_id = $(this).data('parent-id');
var option_value = $(this).closest("li").data('value');
var option_text = $(this).closest("li").data('text');
//Add to select
robable.add_option_to_select(select_id, option_value, option_text);
//Remove from list
$(this).closest("li").remove();
});
}
};
robable.init();
<!DOCTYPE html>
<html>
<head>
<title>Select Robables</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<ul id="list"></ul>
</body>
</html>

Develop Reference

JavaScript is the programming language of the Web.

jQuery replace div based on rel attribute - javascript

Try this: $(function () { $('.special_button').click(function () { var num = $(this).attr('rel'); $('.value_button[rel="' + num + '"]').replaceWith("<div class='value_button' >" + $(this).val() + "</div>"); $('div.content_slide').slideUp(600); }); });

Related

Mouseenter and mouseleave change for mobile and tablet

Dropdown won't select and open div... What am I doing wrong?

js onclick event is not working for my portfolio

How to attach click event at runtime when i have all ids in an array that gets populated when document is ready?

javascript/jquery remove or delete option from select

Categories

Resources