Develop Reference

Preventing Redirect to main page when clicking skip-link using jquery

The problem I am facing is that because of a tag in my html layout, I am being redirected to the main landing page when clicking a "skip to main content" link.
I am using the following JQuery to prevent this behavior, but it also prevents the direction to main content.
$(document).ready(function () {
$('#skip-link').click(function () {
$("#" + $(this).attr("href").slice(1) + "").focus()
alert("link Skipped")
event.preventDefault()
});
});
My question is, how can I prevent the redirection to the relative address, without using prevent Default.

Perhaps something like this:
$(document).ready(function () {
$('#skip-link').click(function (e) {
e.stopPropagation();
$("#" + $(this).attr("href").slice(1) + "").focus();
alert("link Skipped");
});
});
UPDATE:
Ok if I understood you correctly, this is what you want, simply:
Jump to main
<a name="skip-link"></a><div class="row" id="anchor">blabla</div>
or jQuery:
<a id="skip-link" href="#anchor">Jump to main</a>
<div class="row" id="anchor">blabla</div>
$(document).ready(function () {
$('#skip-link').click(function (e) {
e.stopPropagation();
var hash = $(this).attr("href").slice(1);
alert(hash);
$("#" + hash).focus();
$("#" + hash).css('background-color', 'red');
});
});
https://jsfiddle.net/75k7u4w3/

jQuery onclick function: Undefined is not a function

Edit: I guess part of this is an issue of me being inexperienced with Drupal. I added a javascript file to site.info, so that it will be added to every page. This is all the file contains:
(function ($){
$("#ctl00_btnSearch001").on("click", function(){
var searchVal = $("#ctl00_txtSearch").val();
window.location.href = "http://www.mywebsite.org/search/?sa=Search&q=" + searchVal;
});
})(jQuery);
When the site loads, it gets compiled into this larger script, which looks like this in the debugger:
(function ($) {
Drupal.behaviors.titlebar = {
init: function(context, settings) {
// Using percentage font size to easily increase/decrease page font size
var baseFontSize = 100;
$('.pgc-font-size a').click(function() {
if($(this).hasClass('increase')) {
if(baseFontSize < 150)
baseFontSize += 20;
$('.pg-content-body p').css('font-size', baseFontSize+'%');
} else {
if(baseFontSize > 70)
baseFontSize -= 10;
$('.pg-content-body p').css('font-size', baseFontSize+'%');
}
});
// Print button
$('.pgc-print a').click(function() {
window.print();
})
}
};
}(jQuery));
// There's a problem with our jQuery loading before the ingested site's
// jQuery which is causing jQuery plugins to break (the "once" plugin in this case).
// I'm using this workaround for now
jQuery(function() {
Drupal.behaviors.titlebar.init();
});;
(function ($) {
Drupal.behaviors.giftTypes = {
init: function() {
// Gift details accordion
$('.pg-gift-details .accordion-items').css('display', 'none');
$('.pg-gift-details .accordion-switch').click(function(){
if($(this).hasClass('open')) {
$(this).find('span').removeClass('icon-arrow-up').addClass('icon-arrow-down');
$('.pg-gift-details .accordion-items').slideUp('slow');
$(this).html($(this).html().replace('Hide', 'Show More'));
$(this).removeClass('open');
} else {
$(this).find('span').removeClass('icon-arrow-down').addClass('icon-arrow-up');
$('.pg-gift-details .accordion-items').slideDown('slow');
$(this).html($(this).html().replace('Show More', 'Hide'));
$(this).addClass('open');
}
})
}
}
}(jQuery));
// There's a problem with our jQuery loading before the ingested site's
// jQuery which is causing jQuery plugins to break (the "once" plugin in this case).
// I'm using this workaround for now
jQuery(function() {
Drupal.behaviors.giftTypes.init();
});;
(function ($){
$("#ctl00_btnSearch001").on("click", function(){
var searchVal = $("#ctl00_txtSearch").val();
alert(searchVal);
window.location.href = "http://www.mywebsite.org/search/?sa=Search&q=" + searchVal;
});
})(jQuery);
;
You can see my little script at the bottom there. It says there's something wrong with the first line, but I'm not sure what the problem is. What change would I need to make to my javascript file to make sure it compiles right?
I'm probably overlooking a really simple type, but I can't see what's wrong with my jQuery.
This is the part that's not working:
(function ($){
$("#ctl00_btnSearch001").on("click", function(){
var searchVal = $("#ctl00_txtSearch").val();
window.location.href = "http://www.website.org/search/?sa=Search&q=" + searchVal;
});
})(jQuery);
I have jQuery on my site, I know I do because this it's used earlier in the code with no problem. The error is showing in the debugger on the first line, '$("#ct100_btnSearch001").on("click", function(){ '. Here is a larger section of the script page:
(function($) {
Drupal.behaviors.giftTypes = {
init: function() {
// Gift details accordion
$('.pg-gift-details .accordion-items').css('display', 'none');
$('.pg-gift-details .accordion-switch').click(function() {
if ($(this).hasClass('open')) {
$(this).find('span').removeClass('icon-arrow-up').addClass('icon-arrow-down');
$('.pg-gift-details .accordion-items').slideUp('slow');
$(this).html($(this).html().replace('Hide', 'Show More'));
$(this).removeClass('open');
} else {
$(this).find('span').removeClass('icon-arrow-down').addClass('icon-arrow-up');
$('.pg-gift-details .accordion-items').slideDown('slow');
$(this).html($(this).html().replace('Show More', 'Hide'));
$(this).addClass('open');
}
})
}
}
}(jQuery));
jQuery(function() {
Drupal.behaviors.giftTypes.init();
});;
(function($) {
$("#ctl00_btnSearch001").on("click", function() {
var searchVal = $("#ctl00_txtSearch").val();
alert(searchVal);
window.location.href = "http://www.mywebsite.org/search/?sa=Search&q=" + searchVal;
});
})(jQuery);;

Try to install jQuery update Module.
If you are using Drupal 6, you are not be able to use on function.
One option is to include your custom version of jQuery in your page.tpl.php, another option (not recommended) is to use live, but now is deprecated.

You can bind a function to an event use two way:
1.use bind() method and the event name as the first argument
$( "#foo" ).bind( "click", function() {
alert( "User clicked on 'foo.'" );
});
or
2.just use the event method
$( "#foo" ).click( function() {
alert( "User clicked on 'foo.'" );
});
The problem of your code is that there isn't a on event.
ref http://api.jquery.com/category/events/mouse-events/

If ctl00_btnSearch001 is a correct id for what ever you are trying to click. Try changing it to this:
(function ($){
$(document).on("click", "#ctl00_btnSearch001", function(){
var searchVal = $("#ctl00_txtSearch").val();
window.location.href = "http://www.mywebsite.org/search/?sa=Search&q=" + searchVal;
});
})(jQuery);

Can you use .load() to load html into div's with dynamic id's?

I'm trying to load html into div's that have dynamically created id's by passing the id to the function as a data attribute. Doesn't seem to work though.
<script>
$(document).ready(function(){
$('input:radio').on('ifChecked', function(event){
var clauseDivID = $(this).data("clause-div-id");
$("#" + clauseDivID).load("inc-files/test.htm #test", function() {
alert("The load was performed.");
});
});
});
</script>

Have you tried something like this? Please look at the valid event names for jQuery. 'ifChecked' is not one. http://api.jquery.com/category/events/
$('input[type="radio"]').on('change', function (e) {
if($(this).prop('checked'))
{
var clauseDivID = $(this).data("clause-div-id");
$("#" + clauseDivID).load("inc-files/test.htm #test", function() {
alert("The load was performed.");
});
}
});

Not an answer, just a couple of things to try. Please let us know the results if this doesn't lead you to the solution:
<script>
$(document).ready(function(){
$(document).on('ifChecked', function(event){
alert('received the click');
});
});
</script>
<script>
$(document).ready(function(){
$(document).on('ifChecked', function(event){
var clauseDivID = $(this).data("clause-div-id");
alert('clauseDivID: ' + clauseDivID );
});
});
</script>

Jquery selected tab

I wanna get selected id from my tabs. I tried anything but but I am very weak in javascript. This my tabs.
<li>Pondelok</li>
<li>Utorok</li>
<li>Streda</li>
<li>Štvrtok</li>
<li>Piatok</li>
<li>Sobota</li>
<li>Nedeľa</li>
This is my attempt, which return undefined.
<script>
var selected_tab = $(".ui-state-active").attr("id");
document.write(selected_tab);
</script>

this will alert id of tab on which you have clicked
$('.days').click(function(){
alert($(this).attr('id'));
});
if you want to write it on document use this
$('.days').click(function(){
document.write($(this).attr('id'));
});
Live Demo
http://jsfiddle.net/zgDYZ/

<script>
var selecId = "";
$('.days').click(function(){
selecId = $(this).attr('id');
});
</script>
Use selecId where ever you want..

Your are trying to to get attribute from class .ui-state-active which doesn't exist as per your markup. So your code wont work:
Try the below and this will work:
$(function() {
$("ul li").each(function() {
var selected_tab = $(this).find("a").attr("id");
alert(selected_tab);
})
});

<script type="text/javascript">
$(document).ready(function () {
$('.days').click(function () {
alert($(this).attr('id'));
});
});
</script>
another best way with validations
$('a.days').click(function(){
alert($(this).attr('id'));
});

JQuery .click function not working for contained <a> tags

I have the following function that is supposed to trigger anytime one of the numbers in my pagination is clicked.
<script type="text/javascript">
$("div.pagination a").click(function(event) {
alert("Click");
event.preventDefault();
var url = $(this).attr("href");
$("input[name='order']").val(order);
$("#form_session").attr('action', url).submit();
});
</script>
The pagination looks like this:
<div class="pagination">
<ul>
<li>1</li>
<li>2</li>
...etc
</ul>
</div>
For some reason, the function is never firing. I even put in a very obvious alert to confirm that it's hearing the click, but I'm not even seeing this.
So what is it that I'm doing wrong Everything seems correct to me...

Try to wrap it inside $(document).ready(function () { ... }); Something like below,
$(document).ready(function () {
$("div.pagination li").click(function(event) {
alert("Click");
event.preventDefault();
var url = $(this).attr("href");
$("input[name='order']").val(order);
$("#form_session").attr('action', url).submit();
});
});
If the li is dynamically generated then you should use .on (for jQuery 1.7) or .live/.delegate (older jQuery).
$(document).ready(function () {
$(document).on('click', 'div.pagination li', function(event) {
alert("Click");
event.preventDefault();
var url = $(this).attr("href");
$("input[name='order']").val(order);
$("#form_session").attr('action', url).submit();
});
});
Note: Replace $(document).on('click', 'div.pagination li', function(event) { with $('div.pagination').on('click', 'li', function(event) { if div.pagination exist on load.

Put it in a document.ready
$(function(){
$("div.pagination a").click(function(event) {
alert("Click");
event.preventDefault();
var url = $(this).attr("href");
$("input[name='order']").val(order);
$("#form_session").attr('action', url).submit();
});
});

Try:
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("div.pagination li a").click(function(event) {
event.preventDefault();
alert("Click");
var url = $(this).attr("href");
$("input[name='order']").val(order);
// Where is order coming from?
$("#form_session").attr('action', url).submit();
});
});
</script>
You missed the a in your selector. Make sure the DOM is ready $(document).ready. And where is the order variable coming from? Is order defined?