Develop Reference

Change span text on a click

I have a link with image
<div class="va-pickers">
<a class="va-picker" data-attribute="pa_Attribute">
<img class="va-picker-item" src="img.jpeg">
</a>
</div>
And I want to change span text ( change it ) on link click
<ul class="gform" id="gform_1">
<li id="field_1">
<div class="ginput_container">
<div class="medium" id="s2id_input_1_2">
<a class="select2-choice">
<span class="select2-chosen" id="select27">change it</span>
</a>
</div>
</div>
</li>
</ul>
I try
$(document).ready(function(){
$("a[data-attribute='pa_Attribute']").click(function(){
$('#gform_1').find('span').text('my_text');
});
});
But it doesn`t work
Thanks

Your code works find. Check in your console to see if nothing is missing (JQuery maybe). Here's your working fiddle.
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

Repeating ID uses in javascript

I have a following set up:
<a href="#" id="A" >My Site</a>
<a href="#" id="A" >Your Site</a>
<a href="#" id="A" >Her site</a>
<a href="#" id="A" >His Site</a>
<a href="#" id="A" >Our Site</a>
And a button:
<a href="#" id="B" >Yay</a>
Then following javascript:
<script>
jQuery("#A").click(function()
{ jQuery("#B").trigger('click');
return false; });
</script>
In this setting, when "A" is clicked, then "B" is clicked as well.
It works well for the very first button ("My Site"). However other buttons are not working as if only the first id was recognized by the javascript and rest are simply ignored.
I mean, I can change the id of other buttons and repeat the javascript, however that seems like a poorly written idea.
What would be the best way of dealing in this situation? (a clean and efficient way).
Also, let say that I do have repeating javascript with different id as example below (for different buttons to trigger different buttons).
<script>
jQuery("#A").click(function()
{ jQuery("#B").trigger('click');
return false; });
jQuery("#C").click(function()
{ jQuery("#D").trigger('click');
return false; });
jQuery("#E").click(function()
{ jQuery("#F").trigger('click');
return false; });
</script>
In this case, is there a way for me to condense the repeating javascripts?
Thanks!

Your HTML is invalid. ID must be unique. JS will take first element with that ID and will ignore rest elements. Use classes for that.
$(document).ready(function() {
$('.A').click(function(e) {
e.preventDefault();
$('#B').trigger('click');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
My Site
Your Site
Her site
His Site
Our Site
<hr/>
<button onClick="alert('Clicked B')" id="B">Maybe clicked</button>
If you have to make reference what element must be clicked and your links does not have any link to other page, you can use it's href element:
$(document).ready(function() {
$('.A').click(function() {
$($(this).attr('href')).trigger('click');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
My Site
Your Site
Her site
His Site
Our Site
<hr/>
<button onClick="alert('Clicked A')" id="a">Maybe A clicked</button>
<button onClick="alert('Clicked B')" id="b">Maybe B clicked</button>
<button onClick="alert('Clicked C')" id="c">Maybe C clicked</button>

ID of an element must be unique so you can use a class to group similar elements, use a data-* attribute to specify which element's click has to be triggered.
A unique identifier for the element. There must not be multiple
elements in a document that have the same id value.
<a href="#" class="click" data-target="a" >My Site</a>
Your Site
Her site
His Site
Our Site
<a href="#" id="a" >Yay</a>
<a href="#" id="b" >Yay</a>
<a href="#" id="c" >Yay</a>
then
$('.click').click(function(){
$('#' + $(this).data('target')).click();
})

In HTML ID must be unique,You can enclose all anchors inside a block element and do like as follows
<div id="A">
My Site
Your Site
Her site
His Site
Our Site
</div>
Button
<a href="#" id="B" >Yay</a>
Script
<script>
jQuery("#A a").click(function()
{
jQuery("#B").trigger('click');
return false;
});
</script>

The id of an element has to be unique. Thus, I would suggest using a class:
<a href="#" class="A" >My Site</a>
<a href="#" class="A" >Your Site</a>
<a href="#" class="A" >Her site</a>
<a href="#" class="A" >His Site</a>
<a href="#" class="A" >Our Site</a>
Then:
elements = document.getElementsByClassName("A");
for(var i = 0; i < elements.length; i++){
var ele = elements[i];
jQuery(ele).click(function()
{ jQuery("#B").trigger('click');
return false; });
}

Jquery toggle and add/remove

I have two buttons.
Both buttons have a rollover css color change.
One of the buttons just links to another page.. however, the other button when clicked needs to
A.) Show a hidden div
B.) toggle to the roll-over color and stay that color. (but not change the other buttons class)
I only want the button with the id of "edit" to toggle the class m-button-regular to m-button-active and not the other button. The JQuery I am using changes both buttons classes to m-button-active.
What is going wrong in this script?
<a href="#tab1" id="edit" >
<span class="m-button-small m-button-regular text-center floatleft clearfix mtm mls" id="sm-tab1">
<i class="fa fa-gear"></i>
<p>EDIT</p>
</span>
</a>
<a href="#tab1">
<span class="m-button-small m-button-regular text-center floatleft clearfix mtm mls" id="sm-tab1">
<i class="fa fa-plus"></i>
<p>ADD</p>
</span>
</a>
<div class="row editcontainer">
</div>
$('.editcontainer').hide();
$(document).ready(function(){
$('#edit').click(function(){
$(".editcontainer").toggle();
$('.m-button-regular').toggleClass("m-button-active");
});
});

You need to use .find() to refer its child span, then you can use toggle.
Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
Use
$(this).find('.m-button-regular').toggleClass("m-button-active");
instead of
$('.m-button-regular').toggleClass("m-button-active");

This seems to do what you want :
$('.editcontainer').hide();
$(document).ready(function() {
$('#edit').click(function() {
$(".editcontainer").toggle();
$('#edit').toggleClass("m-button-active");
});
});
.m-button-active {
color : green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#tab1" id="edit">
<span class="m-button-small m-button-regular text-center floatleft clearfix mtm mls" id="sm-tab1">
<i class="fa fa-gear"></i>
<p>EDIT</p>
</span>
</a>
<a href="#tab1">
<span class="m-button-small m-button-regular text-center floatleft clearfix mtm mls" id="sm-tab1">
<i class="fa fa-plus"></i>
<p>ADD</p>
</span>
</a>
<div class="row editcontainer" style="display: none">Edit container</div>
By the way your selector was originally selecting both buttons.

This is refering to all classes:
$('.m-button-regular').toggleClass("m-button-active");
You must refer the button
$("#edit").toggleClass("m-button-active");

You are almost right but slight change to your code and bingo
$('.editcontainer').hide();
$(document).ready(function(){
$('#edit').click(function(){
$(".editcontainer").toggle();
$('.m-button-regular',this).toggleClass("m-button-active"); //<--- add a scope, same as $(this).find
});
});

How to find a particular grand parent by Id and get value of its particular children by certain class using jQuery

I have a dynamic div
<div class="illustartionWrap" id="illustartionWrapId">
<div class="illusList illusListTop" id="illusList_heading">
<span class="fileName">File Name</span>
<span class="fileDesc">Description</span>
<span class="fileSize">File Size</span>
<span class="fileDownload">Download</span>
</div>
<div class="clear"></div>
<div class="illusList">
<span class="fileName">fileTitle</span>
<span class="fileDesc">fileDesc</span>
<span class="fileSize">1.18 MB</span>
<span class="fileDownload">
<a href="http://myfile/file.txt">
<img src="/sites/all/themes/petheme/images/myimage.png">
</a>
<a href="#">
<img id="illFile_6" class="illDeleteFile" src="/sites/all/themes/petheme/images/icons/deleteButton.png">//clicking it to delete the file from db
</a>
</span>
</div>
</div>
How to get the parents of this delete button and find the filetitle class to get the title of the file.
Below is click handler which I wrote
/**delete function for my page**/
jQuery(".illDeleteFile").on("click", function() {
var illDeleteId = jQuery(this).attr("id").split("_");
var illFileTitle = jQuery(this).parent("#illusList").children(".fileName").val();
alert (illFileTitle);
});
I checked with jQuery Parent() , Parents() and children() and also find() but I am getting undefined mostly and not getting the title.
How to achieve this?
JSFIDDLE : http://jsfiddle.net/hiteshbhilai2010/ywhbd9ut/14/

See this,
jQuery(".illDeleteFile").on("click", function() {
var illFileTitle =jQuery(this).closest(".illusList").find(".fileName").html();
alert (illFileTitle);
});

You'll want to use:
var illFileTitle = jQuery(this).closest(".illusList").find(".fileName").text();
alert(illFileTitle);

jQuery or Javascript Click function change or add id

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.