We Keep Coding

jquery code for getting the href of 'a' tag near the button that is being clicked

Good day.
I just want to get the href of a link once the button near the link is being clicked by the end user. But the problem is there are lots of buttons and links. So, if the end user will click the first button, it should display the "www.a.com". If the 3rd button is being clicked, it should display "www.c.com". Can any one help on how to get it done perfectly? Thanks...
<div>
<a href='www.a.com'>a</a><input type='button' class='btn' onClick='validate()' value='V'/>
</div>
<div>
<a href='www.b.com'>b</a><input type='button' class='btn' onClick='validate()' value='V'/>
</div>
<div>
<a href='www.c.com'>c</a><input type='button' class='btn' onClick='validate()' value='V'/>
</div>
<div>
<a href='www.d.com'>d</a><input type='button' class='btn' onClick='validate()' value='V'/>
</div>
<script type="text/javascript">
function validate()
{
alert($('div a').closest('a').attr('href'));
}
</script>

Try with parent and child like
function validate()
{
alert($(this).parent('div').child('a').attr('href'));
}
Or even you can get it with prev like
alert($(this).prev('a').attr('href'));

I should do it linke this:
$(document).on("click",".btn",function(){
alert($(this).prev('a').attr('href'));
});
With this code the onclick is not needed

use:
function validate()
{
alert($(this).siblings('a').attr('href'));
}

try
$(document).ready(function () {
$(".btn").click(function () {
alert($(this).parent().children("a").attr("href"));
});
});

remove onClick='validate()' from all buttons
and try following code
$('.btn').click(function () {
alert($(this).prev().attr("href"));
});

Use need prev() with source of event, also pass the source object to function
Live Demo
Html
onClick='validate(this)'
Javascript
function validate(obj)
{
alert($(obj).prev('a').attr('href'));
}

Show div with jQuery blind function

I'm new to jQuery and try to show a div when the user is clicking on a button. The button is below the text and is suppose to move up and down.
I tried a couple of things but couldn't work it out.
This is my code:
HTML
<div class="travel_infobox">
</div>
<div class="clearfix"></div>
<div class="travel_info_button">
InfoBox
</div>
jQuery
<script>
$(document).ready(function(){
$("input.show").click(function(){
$(".travel_infobox").show("blind");
});
});
$(document).ready(function(){
$("input.hide").click(function(){
$(".travel_infobox").hide(blind);
});
});
</script>

You have to use $(document)ready(function() {}); just one time, it is needed to let jQuery know when the page is fully loaded to run your code.
Then, that input.show I suppose there is an input button with show class somewhere, otherwise it doesn't work.
<script>
$(document).ready(function(){
$("input.show").click(function(){
$(".travel_infobox").show("blind");
});
$("input.hide").click(function(){
$(".travel_infobox").hide("blind");
});
});
</script>

Try this. Where is your show and hide button? So I have added one.
<div class="travel_infobox">
Trave info
</div>
<div class="clearfix"></div>
<div id="travel_info_button">
InfoBox
</div>
<button id='show'>show</button>
<button id='hide'>hide</button>
<script>
$(document).ready(function(){
$("#show").click(function(){
$(".travel_infobox").show("blind");
});
});
$(document).ready(function(){
$("#hide").click(function(){
$(".travel_infobox").hide("blind");
});
});
</script>

Combine two jQuery functions new

Please help me to combine two scripts of jquery. AT the moment they are not compatible to each other. What can I do to make them both friendly.
Jquery:
<script>
function edit_product() {
var id = $('.DIVY.panel3').attr('id');
alert (id);
</script>
<script>
$(function(){
$('.DIVY').click(function(){
$('.DIVY.panel3').removeClass('panel3').addClass('panel2');
$(this).removeClass('panel2').addClass('panel3');
})
})
</script>
html:
<div id="1" class="DIVY panel2" >click me please!</div>
<div id="2" class="DIVY panel2" >click me please!</div>
<div id="3" class="DIVY panel3" >click me please!</div>
<div id="4" class="DIVY panel2" >click me please!</div>
<div >Check ID</div>
For better visualization, I put this code to My_jsfiddle
Thank you for your efforts!

Your code works on jsfiddle, just change the execution to No wrap - <in head> on the Frameworks & Extensions panel, see http://jsfiddle.net/IrvinDominin/CevcR/4/
But don't mix jQuery and inline js code if you can, you lose clarity in the code.
Assign an id to your anchor element like editMe and set its click function, your code can look like:
$(function () {
$('.DIVY').click(function () { // when a .myDiv is clicked
$('.DIVY.panel3').removeClass('panel3').addClass('panel2');
$(this).removeClass('panel2').addClass('panel3');
})
$('#editMe').click(function () { // when a .myDiv is clicked
var id = $('.DIVY.panel3').attr('id');
alert(id);
})
})
Demo: http://jsfiddle.net/IrvinDominin/CevcR/2/

Twitter bootstrap - Focus on textarea inside a modal on click

Just starting to play around with bootstrap and it's amazing.
I'm trying to figure this out. I have a textarea for feedback inside a modal window. It works great. But I want the focus to go on the textarea when you click on the button to activate the modal. And I can't seem to get it working.
Here is a fiddle: http://jsfiddle.net/denislexic/5JN9A/4/
Here is the code:
<a class="btn testBtn" data-toggle="modal" href="#myModal" >Launch Modal</a>
<div class="modal hide" id="myModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<textarea id="textareaID"></textarea>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>​
Here is the JS
$('.testBtn').on('click',function(){
$('#textareaID').focus();
});​
To resume
When I click on "Launch modal" I want the modal to show up and the focus to go on the textarea.
Thanks for any help.

It doesn't work because when you click the button the modal is not loaded yet. You need to hook the focus to an event, and going to the bootstrap's modals page we see the event shown, that is fired when the modal has been made visible to the user (will wait for css transitions to complete). And that's exactly what we want.
Try this:
$('#myModal').on('shown', function () {
$('#textareaID').focus();
})
​
Here's your fiddle updated: http://jsfiddle.net/5JN9A/5/
Update:
As #MrDBA notes, in Bootstrap 3 the event name is changed to shown.bs.modal. So, for Bootstrap 3 use:
$('#myModal').on('shown.bs.modal', function () {
$('#textareaID').focus();
})
New fiddle for Bootstrap 3: http://jsfiddle.net/WV5e7/

I wanted to have a declarative version of this, so I went with the following :
$(document).ready(function() {
$(".modal").on('shown.bs.modal', function () {
$("[data-modalfocus]", this).focus();
});
});
You can then simply add a data-modalfocus property to your field, like so :
<input type="text" data-modalfocus />
And when the modal pops-up, your field will get focus.

Bootstrap3
$(window.document).on('shown.bs.modal', '.modal', function() {
window.setTimeout(function() {
$('[autofocus]', this).focus();
}.bind(this), 100);
});
Bootstrap 2
$(window.document).on('shown', '.modal', function() {
window.setTimeout(function() {
$('[autofocus]', this).focus();
}.bind(this), 100);
});

You can use the autofocus html element to set the autofocus.
<textarea id="textareaID" autofocus="" ></textarea>
Fiddle here (Click)

If your modal has the 'fade' property:
This will work but you might have to adjust the duration of the timeout and obviously the IDs where needed:
$("#ID-of-modal").on('show', function(event){
window.setTimeout(function(){
$(event.currentTarget).find('input#ID-of-input').first().focus()
}, 0175);
});

I was having major issues in chrome... I hope this helps someone.
//When user clicks link
$('#login-modal-link').on('click',function() {
setTimeout(function(){
//If modal has class
if ($('#login-modal').hasClass('modal')) {
//Whatever input you want to focus in
$('#user_login_modal').focus();
}
},100);
});

As mentioned in one of the comments you need to remove fade from your modal.
So this works for me:
<div id="myModal" class="modal">
...
<textarea class="form-control" rows="5" id="note"></textarea>
</div>
<script>
$('#myModal').on('shown.bs.modal', function () {
$('#note').focus();
})
</script>

I wanted something a bit more generic
$(window.document).on('shown.bs.modal', '.modal', function () {
var timer = window.setTimeout(function () {
$('.firstInput', this).focus();
typeof timer !== 'undefined' && window.clearTimeout(timer);
}.bind(this), 100);
});
With this, I give whatever control I want the CSS class firstInput.
There is a slight delay in setting focus that gives it a certain flair.

I don't know why, but the choosed solution doesn't work for me..
I use the following code snippet instead:
$('#annul-modal').on('show', function() {
setTimeout(function() {$('textarea:first', '#annul-form').focus();}, 400);
});
I know it isn't so pretty but at least it works.. Bootstrap v2.3.0

If you are using bootstrap v3 and you are using both modal dialog and wysihtml5 text editor the following works (assuming #basic is the ID of your modal form):
$('#basic').on('shown.bs.modal', function () {
editor.composer.element.focus()
})

Attaching the event directly to the modal screen didn't work for me. I'm using this code instead:
$('body').on('shown.bs.modal', '.modal', function () {
$('[id$=myField]').focus();
})
With this code I only need to change myField for the id of the control I want to have the focus, it also allows me to define the focus for multiple modal screens, I have something like:
$('body').on('shown.bs.modal', '.modal', function () {
$('[id$=YesCancel]').focus();
$('[id$=YesInverted]').focus();
$('[id$=cancelAddCustomer]').focus();
$('[id$=closeHistoryModal]').focus();
});
Source http://xcellerant.net/2014/08/06/set-focus-on-a-field-when-showing-a-bootstrap-3-modal/

Found doing:
$(document).on('shown.bs.modal', function () {
$(this).find('.form-control:visible:first').focus();
});
Worked well as it just finds the first form-control rather than needing a specific id etc. Be just what is needed most of the time.

Mover para a raiz...
<script>
$(function(){
$("#btnmoverCategoriaRaiz").click(function(){
$("#novoPlaylist").modal();
return false;
});
});
</script>
<div id="novoPlaylist" class= "modal hide">
<div class="modal-header">
<h3>Novo Playlist</h3>
</div>
<div class="modal-body">
<form class="form-horizontal">
<?echo $form->input("Playlist.nome", array("label"=>"Nome:")) ?>
</form>
</div>
<div class="modal-footer">
Cancelar
Savar
</div>
</div>

How can I render a form after a button is clicked in Colorbox?

I'm trying implement a button inside a Colorbox that will update the modal and render a form.
An example of this is Pinterest's add functionality. "Homepage > Add a Pin > Pin URL"
I've tried copying Colorbox's inline HTML example.
<script type="text/javascript">
$(document).ready(function () {
$(".inline").colorbox({inline:true, width:"50%"});
$('a[rel="colorbox"]').live("click", function() {
$.colorbox({
open: true,
href: this.href
});
return false;
});
});
</script>
<div style='display:none'>
<div id='inline_content' style='padding:10px; background:#fff;'>
<p><strong>Add a Promotion</strong></p>
<p><a id="click" href="#" style='padding:5px; background:#ccc;'>Click me, it will be preserved!</a></p>
<p><strong>If you try to open a new ColorBox while it is already open, it will update itself with the new content.</strong></p>
<p>Updating Content Example:<br />
<a class="ajax" href="**shared/promotion_form**" rel="colorbox">Add a Promotion</a></p>
</div>
</div>
The problem is that the form is _promotion_form.html.erb so I can't link to it.

Try moving your selector up a level, and updating to jQuery 1.7.1
Maybe something like this:
$('body').on("click", "a[rel="colorbox"]", function() {
So this way you're watching the body for any element that has that selector "a[rel='colorbox']".
Hope this helps.