I need to take the data-value from the image and put it on the hidden fields without using the hidden field's id.
Edit: I can't use the id's because the set repeats with a different Id.
<div class="optionImageSelection">
<input type="hidden" id="hdnIn">
<ul>
<li>
<img src="iamge1.jpg" data-value="val1" class="optionImageSelect">
</li>
<li>
<img src="image2.png" data-value="val2" class="optionImageSelect">
</li>
</ul>
</div>
<div class="optionImageSelection">
<input type="hidden" id="hdnIn2">
<ul>
<li>
<img src="iamge3.jpg" data-value="val3" class="optionImageSelect">
</li>
<li>
<img src="image4.png" data-value="val4" class="optionImageSelect">
</li>
</ul>
</div>
The jQuery:
function OptionImage(image) {
this.selectImage = function () {
//this works but it needs to be generic.
var hdnSelector = $("#hdnIn");
//this doesn't work but it's what I need
//var hdnSelector = $(image).parents('input:hidden:first');
$(hdnSelector).val($(image).attr("data-value"));
alert($(hdnSelector).val());
};
}
$(document).ready(function () {
$(".optionImageSelect").click(function () {
var oi = new OptionImage($(this));
oi.selectImage();
});
});
Js fiddle: http://jsfiddle.net/p4pMg/1/
Thank you.
Instead of
var hdnSelector = $("#hdnIn");
you can use this selector
var hdnSelector = $(image).closest('ul').prev('input')
You can use a combination of closest and prev
Check Fiddle
Use $('input[type=hidden]') selector.
Related
I've spend most of my weekend being blind on what seems like a simple fix, so therefor i'm turning to you guys expertise.
I have X instances of the following script tag (but always with the same class name):
<script type="text-html" class="tmpl-popup"><div class="acf-fc-popup">
<ul>
<li>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" data-image="%%THEMEPATH%%/images/admin/layouts/one_column.png" /> <span>One Column</span>
</li>
<li>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" data-image="%%THEMEPATH%%/images/admin/layouts/two_columns.png" /> <span>Two Columns</span>
</li>
</ul>
</div>
</script>
In which I first need to replace the %%THEMEPATH%% with a variable that contains a site name which could be "http://mydomainname.com". When that replace is done I need the src of the img tags inside the script tags are replaced with the value data-image value.
But I can't seem to get it to work the way I want because the HTML is inside a script tag. Here is the what i've been working on so far, but it' doesn't really seem to do the job :(
jQuery(".tmpl-popup").each(function(index){
var haystack = jQuery(this).html(),
needle = haystack.replace(/%%THEMEPATH%%/g, themePath);
jQuery(this).html(needle);
var popup = jQuery(jQuery.parseHTML(haystack)),
imageSrc = jQuery(popup).find('img').data('image'),
jQuery(popup).find('img').attr('src',imageSrc);
jQuery(this).html(popup);
});
So thanks in advance if anyone can help me out there :(
You can use the function callback version of jQuery's html and use a global string replace for the %%THEMEPATH%% part, and then (as you came up with) parse the HTML and handle the images in it before going back to source to update the script element text:
$("script.tmpl-popup").html(function(_, html) {
// Update %%THEMEPATH%%
html = html.replace(/%%THEMEPATH%%/g, "http://example.com");
// Update src: `$.parseHTML` gives us an array of the top-level elements.
// we loop through them, finding any `img[data-image]` that they contain,
// and updating the `src` on those.
return $.parseHTML(html).map(function(element) {
// Note: If it were possible for an `img[data-image]` to be *at* the top
// level, you'd need: `$(element).find("img[data-image]").addBack("img[data-image").attr...
$(element).find("img[data-image]").attr("src", function() {
return this.getAttribute("data-image"); // or $(this).attr("data-image") if you want more jQuery :-)
});
return element.outerHTML;
});
});
$("script.tmpl-popup").html(function(_, html) {
// Update %%THEMEPATH%%
html = html.replace(/%%THEMEPATH%%/g, "http://example.com");
// Update src: `$.parseHTML` gives us an array of the top-level elements.
// we loop through them, finding any `img[data-image]` that they contain,
// and updating the `src` on those.
return $.parseHTML(html).map(function(element) {
// Note: If it were possible for an `img[data-image]` to be *at* the top
// level, you'd need: `$(element).find("img[data-image]").addBack("img[data-image").attr...
$(element).find("img[data-image]").attr("src", function() {
return this.getAttribute("data-image"); // or $(this).attr("data-image") if you want more jQuery :-)
});
return element.outerHTML;
});
});
<p>You'll have to use right-click Inspect Element to see that the change has happened. :-)</p>
<script type="text-html" class="tmpl-popup"><div class="acf-fc-popup">
<ul>
<li>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" data-image="%%THEMEPATH%%/images/admin/layouts/one_column.png" /> <span>One Column</span>
</li>
<li>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" data-image="%%THEMEPATH%%/images/admin/layouts/two_columns.png" /> <span>Two Columns</span>
</li>
</ul>
</div>
</script>
<script type="text-html" class="tmpl-popup"><div class="acf-fc-popup">
<ul>
<li>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" data-image="%%THEMEPATH%%/images/admin/layouts/one_column.png" /> <span>One Column</span>
</li>
<li>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" data-image="%%THEMEPATH%%/images/admin/layouts/two_columns.png" /> <span>Two Columns</span>
</li>
</ul>
</div>
</script>
<script type="text-html" class="tmpl-popup"><div class="acf-fc-popup">
<ul>
<li>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" data-image="%%THEMEPATH%%/images/admin/layouts/one_column.png" /> <span>One Column</span>
</li>
<li>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" data-image="%%THEMEPATH%%/images/admin/layouts/two_columns.png" /> <span>Two Columns</span>
</li>
</ul>
</div>
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I want to use jquery function to find all div on checkbox change event instead of hard-coding id and class name in jquery selector.
There are 2 sections in my code with Id name section1 and section2 and so on chkall event i want to find this div id and pass this as jquery selector
This is my code:
HTML:
<div class="header">
<asp:CheckBox ID="chkAll" CssClass="checkallparent" runat="server" Text="Select All" />
</div>
<div class="abc">
<ul class="list">
<div id="section1" class="section">
<li class="carousel-border">
<input type="checkbox" id="chkParent1" class="chkParent" /> --Parent of below 2 checkboxes
</li>
<li>
<input type="checkbox" id="chkchild1" class="chkChild"/>
</li>
<li>
<input type="checkbox" id="chkchild2" class="chkChild"/>
</li>
</div>
<div id="section2" class="section">
<li class="carousel-border">
<input type="checkbox" id="chkParent2" class="chkParent" />--Parent of below 2 checkboxes
</li>
<li>
<input type="checkbox" id="chkchild3" class="chkChild" />
</li>
<li>
<input type="checkbox" id="chkchild4" class="chkChild"/>
</li>
</div>
</ul>
</div>
SCRIPT:
$(".checkallparent").change(function () {
//on this event i want to check all my checkboxes and this is how i am doing.
if ($("#chkAll").prop('checked') == true) {
//for section 1
$(this).find('input:checkbox[id^="chkParent1"]').prop('checked', true)
$(this).closest('.section').find('input:checkbox[id^="chkchild1"]').prop('checked', true);
$(this).closest('.section').find('input:checkbox[id^="chkchild2"]').prop('checked', true);
// Above is not working but when i do like below it is working
$("#section1 .chkParent").find('input:checkbox[id^="chkParent1"]').prop('checked', true)
$("#section1 .chkParent").closest('.section').find('input:checkbox[id^="chkchild1"]').prop('checked', true);
$("#section1 .chkParent").closest('.section').find('input:checkbox[id^="chkchild2"]').prop('checked', true);
//I dont want to hardcode like this instead i would like to use any jquery function
//which would find this 1st div and 2nd(for eg section1 and section2 etc... )
}
});
So can anybody tell me how to do this??
This code should help you figure that out. The first change event sets the parent checkboxes, then triggers off the change event of those parents.
The second change event handle the parent items.
$(".checkallparent").change(function () {
var checked = $(this).is(":checked");
var parentCBs = $("input[type='checkbox'].chkParent");
parentCBs.each(function(i, el) {
el.checked = checked;
$(el).trigger("change");
});
});
$("input[type='checkbox'].chkParent").change(function () {
var checked = $(this).is(":checked");
var div = $(this).closest("div");
var childCBs = div.find("input[type='checkbox'].chkChild");
childCBs.each(function(i, el) {
el.checked = checked;
});
});
Here is a working Fiddle.
Is it possible to change the text "mars-on-newyork" from this links, this is how the links looks like:
<ul>
<li>
<a href="google.com/finder.php?offer=mars-on-newyork">
<img class="the-button-red"/>
</a>
</li>
<li>
<a href="google.com/finder.php?offer=mars-on-newyork">
<img class="the-button-green"/>
</a>
</li>
<li>
<a href="google.com/finder.php?offer=mars-on-newyork">
<img class="the-button-blue"/>
</a>
</li>
</ul>
This code changes my images only:
function changeIt(objName) {
var obj = document.getElementById(objName);
var objId = new Array();
objId[0] = "newyork";
objId[1] = "paris";
objId[2] = "tokyo";
var i;
var tempObj;
for (i = 0; i < objId.length; i++) {
if (objName == objId[i]) {
obj.style.display = "block";
} else {
tempObj = document.getElementById(objId[i]);
tempObj.style.display = "none";
}
}
return;
}
and here is the rest of the html from which the java script changes only the pictures:
<div id="newyork">
<a href="#">
<img src="newyork.jpg"/>
</a>
</div>
<div id="paris" style="display:none">
<img src="paris.jpg" border="0" alt="one"/>
</div>
<div id="tokyo" style="display:none">
<img src="tokyo.jpg" border="0" alt="two" />
</div>
<div style="display:none;">
<a id="one" href="#" onclick="changeIt('newyork');"><img src="newyork.jpg" border="0" alt="one"/></a>
</div>
<div>
<a id="one" href="#" onclick="changeIt('paris');"><img src="paris.jpg" border="0" alt="one"/></a>
</div>
<div>
<a id="two" href="#" onclick="changeIt('tokyo');"><img src="tokyo.jpg" border="0" alt="two"/></a>
</div>
If i click on
<a id="one" href="#" onclick="changeIt('paris');"><img src="paris.jpg" border="0" alt="one"/></a>
i want the text from the links on the ul to change from this:
href="google.com/finder.php?offer=mars-on-newyork
to this:
href="google.com/finder.php?offer=mars-on-paris
and if i click on
<a id="one" href="#" onclick="changeIt('tokyo');"><img src="paris.jpg" border="0" alt="one"/></a>
it changes it to
href="google.com/finder.php?offer=mars-on-tokyo
i want the java script to work like it does, how it changes the images but i also want to take advantage of the click to change the text.
thanks!
I see how it is now, i guess my post wasn't good enough to have piqued you're interest's, i guess i would have to pay a freelancer to help me, thanks anyways guys for your time and help!
Quick answer to "Is it possible to add or change and id from a link?":
$('#link').attr('id', 'yourNewId'); // Change id
Quick solution to "What I also want is not to just change the images but also the id or link"
$('#link').attr('href', 'yourNewUrl'); // Change link
I'm finding it a little hard to understand what you're trying to do, but...
what i also want is not to just change the images but also the id or link from the ul list e.g
OK, to change the link, i.e., the href property of all anchor elements in your ul list, assuming the URL has a fixed format and we can just replace whatever comes after the last "-":
// assume objName = "paris" or whatever
$("ul a").attr("href", function(i, oldVal) {
return oldVal.substr(0, oldVal.lastIndexOf("-") + 1) + objName;
});
If you pass the .attr() method a callback function it will call that function for each element and pass the function the current value - you then return the new value.
The elements in question don't seem to have an id at the moment, so I'm not sure what you mean by wanting to change it.
Ok, lets see if I can explain this clearly enough here.
My HTML looks like
<li>
<div class="info_left" rel="snack">Fries</div>
<div class="info_right">
<span class="info_remove">[Remove]</span>
<span class="info_favorite">[Favorite]</span>
</div>
</li>
<li>
<div class="info_left" rel="lunch">Burger</div>
<div class="info_right">
<span class="info_remove">[Remove]</span>
<span class="info_favorite">[Favorite]</span>
</div>
</li>
<li>
<div class="info_left" rel="4thmeal">Taco</div>
<div class="info_right">
<span class="info_remove">[Remove]</span>
<span class="info_favorite">[Favorite]</span>
</div>
</li>
If you will note you will see a "Remove" and "Favorite" inside a div "info_right". What I need to do when either one of those 2 options is clicked on is get the rel and text values of the same li's "info_left" div. I've tried a few ways but don't think I'm nailing the combo between parent(s), siblings correctly or I dunno. Either way hoping someone can toss me a bone.
It should just be:
$('.info_remove,.info_favorite').on('click', function() {
var $left = $(this).parent().siblings('.info_left');
var rel = $left.attr('rel');
var txt = $left.text();
...
});
jsFiddle example
$(document).ready(function(){
$(".info_right span").click(function(){
$("#msg").html($(this).attr("class")+": "+$(this).parent().prev().attr("rel"));
})
})
try this
$('.info_remove,.info_favorite').click(function() {
var target_elem = $(this).parent().prev();
alert(target_elem.attr('rel'));
alert(target_elem.text());
});
fiddle : http://jsfiddle.net/ss37P/1/
<div class="Name">
<div class="Image"></div>
<ul>
<li><h5><span class"myName">I want this text</span></h5></li>
<li class="description">The description</li>
</ul>
<button class="myButton">My Button</button
</div>
(multiple items with the same structure)
if my structure is constructed this way,
how can I get the class myName to have its content as a variable?
$(".myButton").click(function () {
var itemName = $(this).siblings(".myName").innerHTML ??
}
Ok, so the problem is that you have an error in you HTML. You have
<span class"myName">
instead of
<span class="myName">
and this makes all difference, because your class selector will not work property. Oh, you're also missing the ">" in the closing of button tag.
Here's the fixed HTML:
<div class="Name">
<div class="Image"></div>
<ul>
<li><h5><span class="myName">I want this text</span></h5></li>
<li class="description">The description</li>
</ul>
<button class="myButton">My Button</button>
</div>
And here's the jQuery that works with it:
$(".myButton").click(function() {
var itemName = $(this).parent().find('.myName').html();
alert(itemName);
});
You had missed the closing parenthesis as well...
I created a fiddler so you can test it: http://jsfiddle.net/juj3W/
Here is one way to get it:
$(".myButton").click(function () {
var itemName = $(this).parent().find(".myName").html();
}
var itemName = $(this).prev('ul').find('.myName').html();
try this:
$(".myButton").click(function () {
var itemName = $(".myName", $(this).parent()).text();
//find class in parent
}