Good day anyone who is reading. I'm asking for help in situation that I can't solve....
I tried to do a double navigation menu - click on one of the first navigation menu will load in block "top_menu" - options from the second menu; and option on second menu will load the content to block content.
the dynamical click I realize in the next function :
$(document).ready(function() {
$('#link_from_first_menu').click(function () {
$("#top_menu").load("first_option_from_second_menu.php");
return false;
});
});
So, that part is working, I mean, I loaded the second menu from the first perfectly, but when I have the similar function to load the content from the second menu it doesn't load the content...
$('#link_from_second_menu').click(function () {
$("#content").load("content_from_second_menu.html");
return false;
});
So the result, I have a first menu and second, but can't load the content from second. Please help me realize it or give me please other variant to do it.
Ok you can try .on('click')
$(document).on('click','#link_from_second_menu',function () {
$("#content").load("content_from_second_menu.html");
return false;
});
instead of
$('#link_from_second_menu').click(function () {
$("#content").load("content_from_second_menu.html");
return false;
});
may my answer help you .. and always used to use .on('click') instead of.click() specially after append or load
Related
I have this tabs built.
When I click on Round Trip, I want to make disappear that Flight 2 form.
But since that is needed on multi-city, I want it to show back on
multi-city.
I used this
jQuery('#rdbOneWay').attr("class","onewaybuttonchecked");
jQuery('#rdbRoundTrip').attr("class","roundwaybuttonchecked");
jQuery('#rdbMultiCity').attr("class","multiwaybuttonchecked");
jQuery('.ret_date_block').attr("id","noreturndate");
$("#noreturndate").hide();
$(".onewaybuttonchecked").on("click", function(){
$("#noreturndate").hide();
});
$(".roundwaybuttonchecked").on("click", function(){
$("#noreturndate").show();
});
$(".multiwaybuttonchecked").on("click", function(){
$("#noreturndate").show();
});
});
I used this to hide something on the One Way tab.
If:
$(".roundwaybuttonchecked").on("click", function(){
$("#noreturndate").show();
});
If I use here the correct id of Flights 2 to hide it on the Round-Trip, it does its job but when I switch between One-Way and Round-Trip it shows nothing.
This line get's in action when I go from Multi City to Round-Trip.
Any ideas?
You definitely need a conditional in here.
In your JQuery function, try something like this:
function radioButton() {
if (document.getElementById('htmlElement1').checked) {
document.getElementById('htmlElement2').style.visibility = 'visible';
} else {
document.getElementById('htmlElement').style.visibility = 'hidden';
}
Please note that since I cannot view your HTML - I am not sure what elements you are using so where i say htmlElement 1 (or 2) please fill that in with the appropriate elements.
Let me know you results!
Never mind.
I used same code as above
jQuery('#rdbOneWay').attr("class","onewaybuttonchecked");
jQuery('#rdbRoundTrip').attr("class","roundwaybuttonchecked");
jQuery('#rdbMultiCity').attr("class","multiwaybuttonchecked");
jQuery('.pnlFlight2').attr("id","pnlFlight2");
$("#pnlFlight2").hide();
$(".onewaybuttonchecked").on("click", function(){
$("#pnlFlight2").hide();
});
$(".roundwaybuttonchecked").on("click", function(){
$("#pnlFlight2").hide();
});
$(".multiwaybuttonchecked").on("click", function(){
$("#pnlFlight2").show();
});
and it did the trick, I don't know why it didn't work earlier but glad it did now.
I know this has been asked many times here, actually I found plenty of questions, each of them with a very good answer, I also followed those answers, used the different ways I found but I still don't get it to work.
What I'm trying to do is to load an image into a div, after clicking a link, instead of redirecting to a new page.
I'm using Pure Css (http://purecss.io/) to create a menu, the menu is made of a list, and each list item has a link inside it, like so:
<div class="pure-menu pure-menu-open" id="vertical-menu">
<a class="pure-menu-heading">Models</a>
<ul id="std-menu-items">
<li class="pure-menu-heading cat">Menu heading</li>
<li>Model 1</li>
</ul>
</div>
In that same html file, I have another div where I want to load the image:
<div id="model-map"></div>
I've tried the following ways, using jquery, in a separate js file:
I followed the selected answer for this question, which seemed to have the best approach (Can I get the image and load via ajax into div)
$(document).ready(function(){
console.log("ready"); //this shows on console
$('.model-selection').click(function () {
console.log("clicked"); //this doesn't show after clicking
var url = $(this).attr('href'),
image = new Image();
image.src = url;
image.onload = function () {
$('#model-map').empty().append(image);
};
image.onerror = function () {
$('#model-map').empty().html('That image is not available.');
}
$('#model-map').empty().html('Loading...');
return false;
});
});
As you see, the console.log("clicked") never executes, I'll be ashamed if it's something stupid, cause it seems that the function is not handling the click event properly.
I get the image of course, but in a new page (default behavior of clicking the href) and I want it to load on the div without being redirected. I hope you can help me.
Thanks in advance!
Edit
The code above is working, and both answers are correct, the issue was due to some code inside tags in my html ( YUI code to create the dropdowns for the menu) and it was conflicting with my js file. I moved it to the actual js file and now it works as expected.
Thanks!
You need to use event.stopPropagation();
$('.model-selection').click(function( event ) {
event.stopPropagation();
// add your code here
});
You just need to prevent the default behavior of moving to a new page for <a> tags, to do this say e.preventDefault() first:
...
$('.model-selection').click(function (e) {
e.preventDefault(); // Stops the redirect
console.log("clicked"); // Now this works
...
)};
...
Let us say i have a page http://www.abc.com/xyz.html and i am going to access this page in two ways
simple as it is
I will append some stuff to the url e.g. http://www.abc.com/xyz.html?nohome by just putting the value ?nohome manually in the code.
Now i will add some javascript code something like this
$(document).ready(function () {
if (location.search=="?value=nohome") {
// wanna hide a button in this current page
}
else {
// just show the original page.
}
});
Any help will be appreciated.
As you are using jQuery to catch the DOM-ready event, I guess a jQuery solution to your problem would be fine, even though the question isn't tagged jQuery:
You can use .hide() to hide and element:
$(document).ready(function () {
if (location.search=="?value=nohome")
{
$("#idOfElementToHide").hide();
}
// Got rid of the else statement, since you didn't want to do anything on else
});
trying to implement menu from :this tutorial, but dont know how to make when one submenu is toogle open to automaticly closed himself when another is toogle open.
thx
you can use a selector to get "Not This", on the this.click event which will return all of the other menus and will allow you to close them.
Supplying some source code will probably get you a better answer.
You could close all open toggles before the new one is opened.
$(document).ready(function(){
hideMenus();
$('.toggle').click(function(){
var menu = $(this);
hideMenus();
if (menu.hasClass('toggle-open')) {
menuHide(menu);
}else{
menuShow(menu);
}
});
});
function hideMenus(){
$('.toggle').each(function(){
menuHide($(this));
});
}
function menuHide(menu){
menu.removeClass('toggle-open').addClass('toggle-closed').empty('').append('+').parents('li').children('ul').slideUp(250);
menu.parent('.menutop').removeClass('menutop-open').addClass('menutop-closed');
}
function menuShow(menu){
menu.parent('.menutop').removeClass('menutop-closed').addClass('menutop-open');
menu.removeClass('toggle-closed').addClass('toggle-open').empty('').append('–').parents('li').children('ul').slideDown(250);
}
I am struggling with jQuery for a long time now. It is very powerful and there are lot of great things we can do with jQuery.
My problem is that I use a lot of jQuery features at the same time. E.g. I have a site that displays items, 12 items per page and I can paginate through the pages using jQuery. On the same page I implemented a thumpsUp button that uses jQuery too.
The more jQuery features I use, the harder it gets to arrange them properly. E.g.:
$(document).ready(function() {
$(".cornerize").corner("5px"); //cornerize links
$('a#verd').live('click', exSite); //open iframe
$("a.tp").live('click', thumpsUp); //thumps up
$("a#next").click(getProgramms); //next page
$("a#previous").click(getProgramms); //previous page
//for the current page reload the content
$("a#page").each(function() {
$(this).click(getProgramms);
});
//this isn't working...
$('.smallerpost').live('click', alert('test'));
});
Have a look at the last code line. I want to perform an alert when the div element is clicked. Instead of doing so the page shows me the alert when I refresh the page. A click on the div has no effect.
What am I doing wrong? What would be a strategy here to have clean and working jQuery?
Change that line to
$('.smallerpost').live('click', function () {
alert('test');
});
and while you're there...
$("a#page").each(function() {
$(this).click(getProgramms);
});
has exactly the same effect as:
$('a#page').click(getProgramms);
... but technically there should be only one element with id='page' anyway
Your code $('.smallerpost').live('click', alert('test')); calls the alert immediately and passes its return value into the live function as the second parameter. What you want to pass there is a function to call, so you want:
$('.smallerpost').live('click', function() {
alert('test');
});
or
$('.smallerpost').live('click', handleSmallerPostClick);
function handleSmallerPostClick() {
alert('test');
}
...depending on how you structure your code.