I am working on a Grails project where I have this dropdown:
<li class="dropdown">
</span>
<ul class="dropdown-menu" role="menu">
<li>
<g:remoteLink controller="todo" action="getTodos" update="dynamic" method="GET" id="${category.id}" onSuccess="dynamics()">Ver
</g:remoteLink>
</li>
<li>Modificar</li>
<li><a>Eliminar</a></li>
</ul>
</li>
and this function on JS:
function dynamics(){
$("#dynamic").addClass("dynamicSet").removeClass("dynamicBefore");
$(".dropdown-toggle").dropdown();
}
The problem is: After the ajax call, the jscode $(".dropdown-toggle").dropdown(); the dropdown works normally but after performing another ajax call right after, the dropdown collapses and won't work unless I reload the whole page.
Anyone knows how to fix this problem
Thanks in advance.
As #Fernando recommened to implement my own ajax call instead of using <g:remotelink>, I changed my code to this:
<li class="dropdown">
</span>
<ul class="dropdown-menu" role="menu">
<li><a data-id="${category}" onclick="dynamics('${category.id}')" class="button">Ver
</a></li>
<li>Modificar</li>
<li><a>Eliminar</a></li>
</ul>
</li>
function dynamics(id){
$.get("<g:createLink controller='todo' action='getTodos' />", {"id":id}, function(respuesta){
$("#dynamic").addClass("dynamicSet").removeClass("dynamicBefore").html(respuesta)
;});
;}
The problem was that I had declared the function $(".dropdown-toggle").dropdown(); inside the function dynamics but after two ajax calls the boostrap drowdowns would not work, then I found the solution to this problem by declaring the mentioned function inside the $(document).ready(function() like this:
$(document).ready(function() {
$("#dynamic").addClass("dynamicBefore");
$(".dropdown-toggle").dropdown();
});
Related
there is my html code for switch user to some pages in my php website
<div class="nav">
<ul onChange="showUser(this.value)">
<li class="active">
<div class="fix">
<span class="ico"><img src="image/ico7.png"></span>
<span class="value">manager</span>
</div>
<ul>
<li>chenge pass </li>
<li>search</li>
<li>exit</li>
</ul>
</li>
<li class="active">
<div class="fix">
<span class="ico"><img src="image/ico3.png"></span>
<span class="value">show user</span>
</div>
</li>
</ul>
</div>
it work good but i want to learn how can I transform between pages with ajax code, by click on a list item codes calling from page b and show in page a. so it will be faster than html code
how can i do it?
You can use .load function of jquery to load a page in a div like this
function LoadPage(url){
$('#yourMainDiv').load(url, function (response, status, xhr) {
//you can put you logic here
});
}
Here url will be url of page which you want to load in the div.
You will call it like
LoadPage('chengePass.php');
Or you can do like say in first answer but add href="#" onclick="LoadPage('chengePass.php');return false;"
link
or
<li onclick="LoadPage('chengePass.php');return false;">link</li>
<ul class="dropdown-menu">
<li>Deutsch</li>
<li>Denmark</li>
I want to find out with jQuery what point of the dropdown menu was clicked.
I tried it so:
<ul class="dropdown-menu">
<li>Deutsch</li>
<li>Denmark</li>
jQuery:
$("#changeLanguage").click(function(){
alert($(this).attr("requestLanguage"));
});
But only the first dropdown point (german) calls the jQuery Event. Denmark has no function.
How I can realize it?
An id can only be used once on the page. Change them to a class like so:
HTML
<ul class="dropdown-menu">
<li>Deutsch</li>
<li>Denmark</li>
</ul>
JS
$(".changeLanguage").click(function(e){
e.preventDefault()
alert($(this).attr("requestLanguage"));
});
FIDDLE
I'm trying to create a click event on a jQuery fly out menu. Once you hover to the 2nd or 3rd layer is where I need the event to take place.
I'm also new to jQuery so forgive me if the code isn't up to standards.
I have a sample here: http://jsbin.com/makoreficexe/1/edit
If I understood it right, you just want to have a click event inside the sub items of menu.
To do that, you need to find a way to identify the tag that was clicked, and there are a lot of ways.
I'll show you just 3 examples, but there are a lot...
1 - you can have a class for every tag that you want to click.
HTML - specifying a class
<li>Home
<!-- This is the sub nav -->
<ul class="listTab">
<li><a class="About" href="#">About This Template Here</a></li>
<li><a class="Flash" href="#">Flash</a></li>
<li><a class="Jquery" href="#">jQuery</a></li>
</ul>
</li>
Js
$(document).ready(function($) {
$(".About").click(function(){
alert("clicked")
}),
$(".Flash").click(function(){
alert("clicked")
})
});
The problem in this case is that is difficult to manage a lot of classes.
2 Using Id's
<li>Home
<!-- This is the sub nav -->
<ul class="listTab">
<li><a id="About" href="#">About This Template Here</a></li>
<li><a id="Flash" href="#">Flash</a></li>
<li><a id="Jquery" href="#">jQuery</a></li>
</ul>
</li>
JS
$(document).ready(function($) {
$("#About").click(function(){
alert("clicked")
}),
$("#Flash").click(function(){
alert("clicked")
})
});
The problem is that could be harder to manage a lot of ids as well. but i guess that is the better approach for your simple scenario
3 - You can get it using nth child. the problem is that if you change the structure of your html file, it can "break" your jquery selector.
$("#navList li:nth-child(2)").click(function(e){
alert(e);
})
Here is a list with a lot of types of jquery selector .
http://www.tutorialspoint.com/jquery/jquery-selectors.htm
Hope it helps.
$('.listTab a').click(function(e){...});
One approach would be to add "data" attributes to your a tags (http://api.jquery.com/data/).
For example, in the html for your first flyout:
<li><a data-whatever="This is in data-whatever" href="#">About This Template Here</a></li>
And in your jQuery ready bit, add this:
$('.listTab li a').click( function (e){
e.preventDefault(); // this prevents the href="#" in your a tag from firing
console.log($(this).data('whatever'));
});
You can then use the 'data-whatever' attribute in your click function to trigger what needs to happen.
http://jsbin.com/budoqizumuja/3/edit?html,css,js,console,output
I've got the following html code:
<div id="menuItems" class="hidden">
<ul>
<li><a class="fgMenuItem" href="#">MenuItem #1</a></li>
<li>
<a class="fgMenuItem" href="#">MenuItem #2</a>
<ul>
<li><a class="fgMenuItem" href="#">SubItem #1</a></li>
<li><a class="fgMenuItem" href="#">SubItem #2</a></li>
</ul>
</li>
<li><a class="fgMenuItem" href="#">MenuItem #3</a></li>
<li>
<a class="fgMenuItem" href="#">MenuItem #4</a>
<ul>
<li><a class="fgMenuItem" href="#">SubItem #3</a></li>
<li><a class="fgMenuItem" href="#">SubItem #4</a></li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
$(function() {
$(".fgMenuItem").bind("click",function() {
alert('test');
});
});
</script>
I'm using Filament Group's iPod menu and the menus are working fine, but my jQuery code is not working. I'm trying to make it so that when an item is clicked, it executes my alert('test');.
I suspect the problem may be that Filament Group is overriding my click event handler, but I'm not sure how to fix it. I tried going into their javascript file and changing all the .click(function() { to .bind("click", function() {, but this didn't seem to make any difference. Any suggestions would be great!
Just tested and all working fine for me, you are including jQuery at the top of your document right?
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script>
</head>
$(function() {
$(".fgMenuItem").on("click",function() {
alert('test');
});
});
JSFiddle: http://jsfiddle.net/jv584/
EDIT: If you're able to set up a fiddle or provide more code (working demo page perhaps?) then I'll take another look and see if I can spot the problem
I'm trying to register a click event for a menu list button identified by a class, but it doesn't seem to be firing. My code is as follows:
<body>
<!-- jQuery Simple Drop-Down Menu http://javascript-array.com/scripts/jquery_simple_drop_down_menu/# -->
<div id="dropDownDiv" style="width: 908px; height: 24px; margin: auto auto; background: #324143;">
<ul id="jsddm">
<li>Item 1
<ul>
<li><a class="btn myOtherClass" href="#">Button 1</a></li>
<li><a class="btn myOtherClass"href="#">Button 2</a></li>
</ul>
</li>
<li>Item 2
<ul>
<li><a class="btn myOtherClass" href="#">Button 3</a></li>
<li><a class="btn myOtherClass" href="#">Button 4</a></li>
</ul>
</li>
</ul>
</div>
</body>
And in my script I have the following:
/* Register the click event for menu buttons */
$('.btn').click(function () {
alert("You clicked a button");
});
The alert never fires and I'm not sure why, any help is appreciated.
UPDATE:
The code in the link works for me to, not sure why it's not working in my project. I'm in an Eclipse PHP Project environment with Java resources enabled. I tried my project in Chrome and Firefox, not working for either. I'll check the rest of my script.
UPDATE 2:
Looks like Shef's recommendation about wrapping in a .ready function did the trick. I still don't understand why it needs that to work, "c=smiles"'s link worked without it.
Works fine for me, check it out. Maybe you didn't include jQuery? Or, you are not wrapping your event listener bind code inside a document ready like this:
$(document).ready(function(){
$('.btn').click(function () {
alert("You clicked a button");
});
});
are you using stopPropagation or return false in another click event that may have prevented the click event from happening?
Is the jQuery used after jQuery has been loaded?
Is the in the DOM at the time of binding? (use delegate instead of click if not, or bind after loading)