Load function is not working after satisfying if condition in jQuery

Load function is not working after satisfying if condition in jQuery - javascript

In the code below, the if condition is working as I have checked with an alert but load function is not working.
My code:
$("a").click(function() {
hreff = $(this).attr('href');
if(hreff == "something" )
{
$("#dump").load("someurl");
}
});

$("a").click(function(e) {
e.preventDefault(); // prevent page reload
var hreff = $(this).attr('href');
if (hreff == "something") {
$("#dump").load("someurl");
}
});

the function load will load the response from an defined url, but you hasn't defined an url.
if $(this).attr('href') has an real url than you will never get them, becaus you check in your if for "something"
$("a").click(function() {
href = $(this).attr('href');
if (href.length >0) {
$("#dump").load(href, function() {
alert('Load was performed.');
});
}
});
This will work.

Related

Why my `onclick` doesn't work despite others things works?

So I'm using some parts of gentelella and there is a file custom.js. I have some problems with this file because some parts works and other don't.
The problem is with this method:
$(document).ready(function() {
console.log("custom.js inside document ready");
$('.collapse-link').on('click', function() {
console.log("clicked on a collapse-link");
var $BOX_PANEL = $(this).closest('.x_panel'),
$ICON = $(this).find('i'),
$BOX_CONTENT = $BOX_PANEL.find('.x_content');
// fix for some div with hardcoded fix class
if ($BOX_PANEL.attr('style')) {
$BOX_CONTENT.slideToggle(200, function(){
$BOX_PANEL.removeAttr('style');
});
} else {
$BOX_CONTENT.slideToggle(200);
$BOX_PANEL.css('height', 'auto');
}
$ICON.toggleClass('fa-chevron-up fa-chevron-down');
});
$('.close-link').click(function () {
console.log("close-link clicked")
var $BOX_PANEL = $(this).closest('.x_panel');
$BOX_PANEL.remove();
});
});
It write "custom.js inside document ready" but when I click nothing happened.
And if I look into the HTML I have the same classes as in the JS:

it might be that on document ready these specific elements are not found.
In general a best practice is to delegate the events to the document, like this:
$(document).ready(function() {
console.log("custom.js inside document ready");
$(document).on('click', '.collapse-link' /* <--- notice this */, function() {
console.log("clicked on a collapse-link");
var $BOX_PANEL = $(this).closest('.x_panel'),
$ICON = $(this).find('i'),
$BOX_CONTENT = $BOX_PANEL.find('.x_content');
// fix for some div with hardcoded fix class
if ($BOX_PANEL.attr('style')) {
$BOX_CONTENT.slideToggle(200, function(){
$BOX_PANEL.removeAttr('style');
});
} else {
$BOX_CONTENT.slideToggle(200);
$BOX_PANEL.css('height', 'auto');
}
$ICON.toggleClass('fa-chevron-up fa-chevron-down');
});
$(document).on('click', '.close-link' /* <--- notice this */, function () {
console.log("close-link clicked")
var $BOX_PANEL = $(this).closest('.x_panel');
$BOX_PANEL.remove();
});
});

You have written the click event on the a tag. In general functional specific tags like submit button, a tag will do their default functionality on click. So as it is anchor it will check for href which is not there so the it is not redirecting to anywhere. We can supress the default behaviour of these kinds using e.preventDefault(). Here e is the event. So change your function to
$('.collapse-link').on('click', function(e) {
e.preventDefault();
console.log("clicked on a collapse-link");
var $BOX_PANEL = $(this).closest('.x_panel'),
$ICON = $(this).find('i'),
$BOX_CONTENT = $BOX_PANEL.find('.x_content');
// fix for some div with hardcoded fix class
if ($BOX_PANEL.attr('style')) {
$BOX_CONTENT.slideToggle(200, function(){
$BOX_PANEL.removeAttr('style');
});
} else {
$BOX_CONTENT.slideToggle(200);
$BOX_PANEL.css('height', 'auto');
}
$ICON.toggleClass('fa-chevron-up fa-chevron-down');
});
And
$('.close-link').on('click', function(e) {
e.preventDefault();
console.log("close-link clicked")
var $BOX_PANEL = $(this).closest('.x_panel');
$BOX_PANEL.remove();
});

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);

Use the same button to trigger two different JQuery events

I am trying to use the same button to trigger an ajax call to add a database entry if it is clicked and then trigger a different ajax call to remove the entry it is clicked again.
I have tried using toggleClass and although the button class does change and it's appearance changes accordingly the function still thinks it has the old class name.
$(document).ready(function() {
$(".selected").on("click", function() {
$(this).text(function (i, oldText) {
return $.trim(oldText) == 'Use Image' ? 'Selected' : 'Use Image';
});
$(this).toggleClass('selected selected_btn');
});
$(".selected").on("click", function() {
alert('selected');
});
$(".selected_btn").on("click", function() {
alert('de selected');
});
});
With the present code the alert is always 'selected'.

$(document).ready(function() {
$(".selected_btn").on("click", function() {
$(this).text(function (i, oldText) {
return $.trim(oldText) == 'Use Image' ? 'Selected' : 'Use Image';
});
$(this).toggleClass('selected');
if($(this).hasClass("selected"))
alert("Selected")
else
alert("de-Selected")
});
});
here is a fiddle:
http://fiddle.jshell.net/prollygeek/3LLN2/

Here is a simple and readable example on how to do this:
$(document).ready(function() {
$('.select-img').on('click', function(){
var $el = $(this);
var isSelected = $el.attr('data-selected');
if( isSelected != 'true' ){
firstFn();
$el.html('Use Image').attr('data-selected', true)
}else{
secondFn();
$el.html('Select').attr('data-selected', false)
}
})
var firstFn = function(){
alert('first thing to do');
}
var secondFn = function(){
alert('second thing to do');
}
})
Demo

Use *Class functions:
hasClass
removeClass
addClass
Working code:
$("a").on("click", function() {
if($(this).hasClass("bob")) {
// do delete
alert("delete");
$(this).removeClass("bob");
} else {
// do insert
alert("insert");
$(this).addClass("bob");
}
});
Demo

$(".selected").on("click", function() {
alert('selected');
});
Overrides the event you put on the beginning of the document.ready, I think.
(might not be true, but I think it is)

preventDefault not working after fadeout then load then fadein new href content into div

I've searched and serached and nothing really seems to answer what I'm looking for.
I'm pulling in html pages into a div. I finally got it to fadeout, load new href content, then fade in the new content. However, I can't get it to preventDefault on the link.
Here's my code. Any help is greatly appreciated!
$(document).ready(function() {
var url = $(this).attr("href");
$('#container').css('display', 'none');
$('#container').fadeIn(1000);
jQuery('a').click(function(e){
e.preventDefault();
$('a').removeClass('current');
$(this).addClass('current');
$("#container").fadeOut('1000',function(){
$('#container').load(url);
}).fadeIn('1000');
});
})

You need to call this fadeIn inside the load callback.
$(document).ready(function() {
var loading = false;
$('#container').css('display', 'none');
$('#container').fadeIn(1000);
$('a').click(function(e){
if(loading) return false;
e.preventDefault();
loading = true;
var url = $(this).attr("href"),
cont = $("#container"); //cache selector
$('a').removeClass('current');
$(this).addClass('current');
cont.fadeOut(1000, function(){
cont.load(url, function() {
cont.fadeIn(1000, function() {
loading = false;
});
});
});
});
});

How can I implement this Ajax script?

This is a script that, when a link is clicked, will pull a page from somewhere
and insert it in a div in the current page. Pretty simple, yes, but being the
thick head I seem to be, I can't figure out how to implement it.
i.e. how can I formulate the link so that it will point the script to the page
I want to load in the div I want?
The script:
$(document).ready(function() {
// Check for hash value in URL
var hash = window.location.hash.substr(1);
var href = $('#nav li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #content';
$('#content').load(toLoad)
}
});
$('#nav li a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide('fast',loadContent);
$('#load').remove();
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show('normal',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
});
The instructions specify the following:
We want to target the links within the navigation menu and run a function when they are clicked:
$('#nav li a').click(function() {
// function here
});
We need to define what page to get the data from when a link is clicked on:
var toLoad = $(this).attr('href')+' #content';
The loadContent function calls the requested page:
function loadContent() {
$('#content').load(toLoad,'',showNewContent)
}
It's very likely that the above is all that's needed to run the script as intended
but only if you know how to do it, which I don't.
PS: The tutorial all this comes from is here.

Basically intercept all link clicks and make an AJAX request instead... Remember to return false at the end of the click callback function.
$('a').click(function () {
var href = $(this).attr('href');
$.ajax({
url: href,
success: function (res) {
$(res).appendTo('#target'); // add the requested HTML to #target
}
});
return false; // important
});

Develop Reference

JavaScript is the programming language of the Web.

Load function is not working after satisfying if condition in jQuery - javascript

In the code below, the if condition is working as I have checked with an alert but load function is not working. My code: $("a").click(function() { hreff = $(this).attr('href'); if(hreff == "something" ) { $("#dump").load("someurl"); } });

$("a").click(function(e) { e.preventDefault(); // prevent page reload var hreff = $(this).attr('href'); if (hreff == "something") { $("#dump").load("someurl"); } });

Related

Why my `onclick` doesn't work despite others things works?

jQuery onclick function: Undefined is not a function

Use the same button to trigger two different JQuery events

preventDefault not working after fadeout then load then fadein new href content into div

How can I implement this Ajax script?

Categories

Resources