We Keep Coding

TabIndex wrong sequence order

I have a slight problem in the sequence of my tabindex route. Theoritically, I would need just on hit on tab key to jump from one element to another, but it doesn't
I have the following HTML code :
<div>
<input class="location_input_inrest_dish_pages" type="text" placeholder="Look up for a city" id="myAnchor1">
<a href="#" title="Search" id="myAnchor2">
<button class="search_icon_container" >
<p class="go_text_in_search">Go!</p>
<img class="search_icon_restpage" src="../../static/wm/images\searchicon_30x30_red.png">
</button>
</a>
<a href="#" title="Locate me!">
<div class="around_me_icon_container">
<img class="locateme_icon" src="../../static/wm/images\target_30x30_whitev1.png">
</div>
</a>
</div>
<div class="large_map_in_restaurants">
<div id="map">
</div>
and following JS at the end of the document:
<script>
function myFunction() {
document.getElementById("myAnchor1").tabIndex = "1";
document.getElementById("myAnchor2").tabIndex = "2";
}
</script>
I have used this bit of JS to try to control the "route" of tabs so that when i am on the Input element, when hitting the tab key, i will land directly on the "go!" button, and then I can press enter.
However, problem that i have is that somehow, from the input element, I need to hit the tab key twice before "landing" on the button element, instead or just one hit...as you would expect .

How do I select the button that is clicked, from a multitude of similar buttons, from the following code?

I am trying to implement a vote up/down functionality on comments.
For that, I've placed two buttons in every comment. Using jQuery's each() and click() functions, I am trying to get the button's id that was clicked, fire an ajax request to aother page, and then disable both vote up/down buttons for that specific comment using the success() callback.
For initial verification of whether it works or not, I'm trying this on just two comments i.e. 4 buttons, and then disabling a specific pair of them, irrespective of which button is clicked.
I've tried 3-4 different selector queries, but the only one that works is where I specifically pass the exact id attribute's value of the button that I click on. I need to implement this in a general fashion, on a page with multiple comments and their buttons!!
Here's the PART of the HTML code on which I'm trying to use the jQuery:
<section class="section content">
<div class="content-wrapper">
<div class="zone-content equalize zone clearfix">
<div class="content-container container-16">
<div class="comments block">
<div class="block-title-2">
<h2>Comments on Place X</h>
</div>
<div class="review-messages">
<div class="review first">
<div class="review-author">
<b>
<span class="author">John</span> - <span class="date">April 10, 2013 at 7:34 pm</span>
</b>
</div>
<br>
<div class="review-text">
Best place to have abcdef food in yyyyy. !!!
</div>
<br>
<!-- xxxxxxx SELECT ONE OF THESE TWO --> <button class="btn btn-circle btn-success" id="test_id_1"><i class="glyphicon glyphicon-thumbs-up"></i></a></button>
<!-- xxxxxxx SELECT ONE OF THESE TWO --> <button class="btn btn-circle btn-danger" id="test_id_2"><i class="glyphicon glyphicon-thumbs-down"></i></a></button>
</div>
<div class="review last">
<b>
<div class="review-author">
<span class="author">John</span> - <span class="date">April 10, 2013 at 7:34 pm</span>
</div>
</b>
<br>
<div class="review-text">
<p id="text1">Great xxxx and a good place to yyyy :)</p>
</div>
<br>
<!-- xxxxxxx SELECT ONE OF THESE TWO --> <button class="btn btn-circle btn-success" id="test_id_3"><i class="glyphicon glyphicon-thumbs-up"></i></a></button>
<!-- xxxxxxx SELECT ONE OF THESE TWO --> <button class="btn btn-circle btn-danger" id="test_id_4"><i class="glyphicon glyphicon-thumbs-down"></i></a></button>
</div>
</div>
<div class="comment-message">
<div class="comment-message-title">
Leave a <span class="text-colorful">Comment</span>
</div>
<form class="comment-message-form">
<textarea class="text-input-grey comment-message-main" placeholder="Your Comments Here"></textarea>
<div class="thin-separator"></div>
<input type="submit" class="button-2-colorful to-right" value="Post Comment" name="comment" />
</form>
</div>
</div>
</div><!-- end of .content-container -->
</div><!-- end of .zone-content -->
</div><!-- end of .content-wrapper -->
</section>
Here are the various jQuery selector codes I've tried:
1. DOESN'T WORK
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('div button[id^="test_id_"]').each(function(){
$(this).click(function(e){
var name = {"name":$(this).attr("id")};
$.ajax({
url: 'receiveajax.php',
data: name,
type: 'POST',
}).success(function(data) {
$(this).attr("disabled",true);
});
});
});
});
</script>
2. DOESN'T WORK
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('button').click(function(e){
$('button[id^="test_id_"]').each(function(){
var name = {"name":$(this).attr("id")};
$.ajax({
url: 'receiveajax.php',
data: name,
type: 'POST',
}).success(function(data) {
$(this).attr("disabled",true);
});
});
});
</script>
3. SPECIFIC ELEMENT SELECTOR QUERY. WORKS.
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#test_id_1").click(function(e){
var name = {"name":$(this).attr("id")};
$.ajax({
url: 'receiveajax.php',
data: name,
type: 'POST',
}).success(function(data) {
$("#test_id_1,#test_id_2").attr("disabled",true);
});
});
});
</script>
And this is the page that will receive the Ajax POST request, implemented as a simple stub. I've also used it's echo output in the success() callback to print it, so as far as I'm concerned, this file doesn't have any errors. Probably. :
<?php
if( $_REQUEST["name"] )
{
$name = $_REQUEST['name'];
echo "Welcome ". $name;
}
?>

1) Your loops are complex which is not need.
2) Inside the success callback, this is not your button, you should keep a reference to it.
3) Using prop for disabled attribute is preferred.
$(document).ready(function() {
$('button').click(function(e){
var $button = $(this);
var name = {"name": $button.attr("id")};
$.ajax({
url: 'receiveajax.php',
data: name,
type: 'POST',
}).success(function(data) {
$button.prop("disabled", true);
});
});
});

Your code is very close but you don't need to iterate buttons using .each(), simply bind click event and you will get instance of clicked button i.e. $(this) and use that instance to disable the button. see below code -
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('button[id^="test_id_"]').click(function(e){
var name = {"name":$(this).attr("id")};
$.ajax({
url: 'receiveajax.php',
data: name,
type: 'POST',
}).success(function(data) {
$(this).attr("disabled",true);
});
});
});
</script>

How to call a ASP function from onclick in the HTML?

I have 3 link in my HTML. When I click one of these a variable in the session must change.
How can I do that?
<div id="eng">
<a href="#" onClick="setLanguage('en')";>
<img id="eng_img" src="bandiera01.png" />
</a>
</div>
<div id="rus">
<a href="#" onclick="setLanguage('ru');">
<img id="rus_img" src="bandiera02.png" />
</a>
</div>
<div id="ted">
<a href="#" onclick="setLanguage('de');">
<img id="ted_img" src="bandiera03.png" />
</a>
</div>
setLanguage(txt) is a JavaScript function but I want to use it in ASP to save it in session.

You need send the information to server, you can post by a normal link or send by ajax. I think with in this case, is better you send by normal link, for example:
<div id="eng">
<a href="ChangeLanguage.asp?language=en">
<img id="eng_img" src="bandiera01.png" /></a>
</a>
</div>
<div id="rus">
<a href="ChangeLanguage.asp?language=ru">
<img id="rus_img" src="bandiera02.png" />
</a>
</div>
<div id="ted">
<a href="ChangeLanguage.asp?language=de">
<img id="ted_img" src="bandiera03.png" />
</a>
</div>
In the page of destination, you get the "language" information of the link.

You can address this issue in a couple of way:
Turn your links into submit buttons, put them inside a form, submit the page server side to manage the language change business logic. This is a classic asp approach. You have to rebuild the page server side.
Let the setLanguage() fire an ajax call to an asp page that retrieves the localized resources. On success, the resources are mapped into the corresponding elements of the DOM: maybe set this logic into a different function:
HTML
<div class="lang">
en
</div>
<div class="lang">
ru
</div>
<div class="lang">
de
</div>
SCRIPT
(function($){
window.setLanguage = function(langCode){
$.ajax({
type: "GET",
url: "myLanguageHandler.asp",
data: { "languageCode": languageCode },
async: true,
error: function (req, status, message) {
//manage the error
},
success: function (data) {
mapPage(data);
}
});
/*
* for demo purpose only
* console.log('Set language: ' + langCode);
*/
};
$('.lang a').bind('click', function(e){
window.setLanguage($(e.target).attr('data-lang'));
return false;
});
})(jQuery)

Scroll to a specific <img> or <a> tag when I hit the search button on my website

As the title says, I want the page to scroll down to an image when I search for it on my search bar.
This is the HTML for the search bar/button:
<form id="search-form" href="#test1" class="smoothscroll">
<input type="text" id="searchText"/>
<input type="button" value="Search" id="searchButton"/>
</form>
This is the <img> and <div> tag I'm trying to scroll to:
<a href="test1.html" style="text-decoration: none">
<img src="pic1.png" height="150px" width="150px"/>
<img src="pic2.png" id="id1"/>
</a>
And here is my jQuery:
$(document).ready(function () {
$( "#searchButton" ).click(function() {
//var text = document.getElementById('searchText').value;
$( "html, body" ).animate({
scrollTop: ($('#test1').offset().top)
}, 2000);
});
});
I keep getting this error message:
Uncaught TypeError: Cannot read property 'top' of undefined
Thanks for helping :)

add id="test1" to your required image. or use $("a[href*='test1']:first").offset().top

There is no $('#test1') in your HTML. The jQuery selector #test1 looks for an element with an id of "test1". Try adding that id to your a:
<a id="test1" href="test1.html" style="text-decoration: none">
Also, I don't think href="#test1" is a valid attribute for a form tag. It's not being used for anything, so you probably don't need it. (The form's class attribute is also probably superfluous, and could technically be invalid. You'll want to validate your markup to make sure of these things.)

Please add "id=1" to any of your images.

You should add an ID to that anchor, otherwise you could technically do:
$('a[href="test1.html"]')
I'd still recommend giving it an id="test1'

Test if $("#test1").length is > 0 before the animate() call. This could just be fixing the symptom and not the underlying problem though.

You want something like this.
HTML:
<form id="search-form" href="#test1" class="smoothscroll">
<input type="text" id="searchText"/>
<input type="button" value="Search" id="searchButton"/>
</form>
<a style="margin-top: 1000px; display: inline-block;" href="test1.html" style="text-decoration: none">
<img src="pic1.png" id="image1" />
<img src="pic2.png" id="image2"/>
</a>
JS:
$(document).ready(function () {
$( "#searchButton" ).click(function() {
var text = $('#searchText').val().toLowerCase();
$( "html, body" ).animate({
scrollTop: ($('#'+text).offset().top)
}, 2000);
});
});
Here is the JsFiddle. I've added a large margin to the <a> link to see the scrolling effect.

Show function in Jquery not responding

I am trying to use some show hide functions in my js file:
$(document).ready(function() {
$('#me').hide();
$('#send').click(function() {
$('#me').show("slow");
});
});
for some reason, when i click the id="send" button, the id="me"(a picture)
is not showing up again(though it disappears):
<div id="me">
<img src="Me.JPG" alt="me" width="450" height="450" alt="picture" align="right"/>
</div>
help please?
please let me know if i have to add more code to make myself clear...
thank you!
EDIT:
here is the code for the send button:
<input type="submit" id="send" value=" Send " class="submit" />

I would say the most likely answer is the send button does not yet exist when your page is loaded. Is this button being created dynamically, or through some other mechanism? To debug, I would say:
$(document).ready(function() {
$('#me').hide();
alert(document.getElementById('send')); //Test if it exists
$('#send').click(function() {
$('#me').show("slow");
});
});
If you get a popup with null, then you'll have to track down where this button gets generated and bind the event there.
Other than that, as you can tell from:
jsfiddle.net/zs7W2/
Your code works fine.
UPDATE:
I believe your FORM is actually submitting itself. You should change your code to:
$(document).ready(function() {
$('#me').hide();
$('#send').click(function() {
$('#me').show("slow");
return false; //Prevent submit
});
});
Or, use a <button type="button"> or <input type="button">
Example: http://jsfiddle.net/zs7W2/7/

<div id="me">
<img src="Me.jpg" alt="me" width="450" height="450" alt="picture" align="right"/>
</div>
<input type="button" id="send" value="Submit">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#me').hide();
$('#send').click(function() {
$('#me').show("slow");
});
});
</script>
I've used something like this. It works. I guess that some problem with image align. Try to change it.