$(document).on("click",".class_name",function() not working - javascript

Here is the HTML
<div id="menu" class='rmm' data-menu-title="Description">
<ul>
<li>Description</li>
<li>Features</li>
<li>Ratings</li>
<li>Activate</li>
</ul>
</div>
jquery portion to change menu title
function getMobileMenu() {
/* build toggled dropdown menu list */
$('.rmm').each(function() {
var menutitle = $(this).attr("data-menu-title");
if ( menutitle == "" ) {
menutitle = "Menu";
}
else if ( menutitle == undefined ) {
menutitle = "Menu";
}
var $menulist = $(this).children('.rmm-main-list').html();
var $menucontrols ="<div class='rmm-toggled-controls'><div class='rmm-toggled-title'>" + menutitle + "</div><div class='rmm-button'><span> </span><span> </span><span> </span></div></div>";
$(this).prepend("<div class='rmm-toggled rmm-closed'>"+$menucontrols+"<ul>"+$menulist+"</ul></div>");
});
}
I just want the menu title to be changed when I click the menu.
I tried the below but it won't work
$(document).on("click",".rmm_li_item",function()
var ctxt=this.innerHTML;
$(".rmm-toggled-title").text(ctxt);
})
complete design : responsivemobilemenu.com/en/

the code may syntax error you have missed callback function stating braket {, try this code
$(document).on("click",".rmm_li_item",function(e){
e.preventDefault();
var ctxt=this.innerHTML;
$(".rmm-toggled-title").text(ctxt);
})
Although add e.preventDefault() to stop reloading page

There seems to be some error in your on Click event.General syntax is for onClick event is
$( "#target" ).click(function() {
alert( "Handler for .click() called." );
});
According to the question is this what you need?
$(document).on("click",".rmm_li_item",function(e){
e.preventDefault()
var ctxt=this.innerHTML;
$(".rmm").text(ctxt);
})
IF not please make a JSFIDDLE and share the link I could not comprehend what you said

Related

Remove parent element jQuery

How can I remove all elements including its parent when click. The tabs is generated dynamically. What I tried so far is:
I'm using bootbox for the confirmation.
function remove() {
bootbox.confirm("Are you sure?", function(result) {
if( result != false ) {
var anchor = $(this).siblings('a');
$(anchor.attr('href')).remove();
$(this).parent().remove();
$(".nav-tabs li").children('a').first().click();
}
});
}
The tab that I will remove is generated through this:
$(document).on('submit','#pop-form', function(e) {
// make an ajax request
$.post('../admin/FLT_add_tab.do',
$('#pop-form').serialize(),
function( data ) {
// if data from the database is empty string
if( $.trim( data ).length != 0 ) {
// hide popover
$('#popover').popover('hide');
//append new tab and new tab content
var id = $(".nav-tabs").children().length - 1;
$('#popover').closest('li').before('<li>' + data + ' </li>');
$('.tab-content').append('<div class="tab-pane" id="tab_' + id + '"> <c:import url="flt-pis.html"></c:import> </div>');
} else {
// error handling later here
}
}
);
e.preventDefault();
});
UPDATE:
remove() is called by appending <i> when the user hover the tab
$(document).ready( function() {
$(document).on('mouseenter', 'a.g-tabs', function() {
$( this ).append( $('<i class="icon-clear-remove" onClick="tabRemove();"></i>') );
});
$(document).on('mouseleave', 'a.g-tabs', function() {
$( this ).find( ".icon-clear-remove:last" ).remove();
});
});
The JS that concern if the page is refreshed
<!-- Other tabs from the database -->
<c:forEach var="tabNames" items="${ allTabs }">
<li>${ tabNames.key } </li>
</c:forEach>
Popover for adding new tab
<!-- Add new tab -->
<li>New <i class="icon-plus-sign"></i></li>
The main problem is remove method does not know on which element it is getting called, I've changed the remove to use jQuery handler instead of inlined click handler.
Try
$(document).on('mouseenter', 'a.g-tabs', function () {
$(this).append($('<i class="icon-clear-remove"></i>'));
});
$(document).on('mouseleave', 'a.g-tabs', function () {
$(this).find(".icon-clear-remove:last").remove();
});
jQuery(function () {
$(document).on('click', '.icon-clear-remove', function () {
var $this = $(this);
bootbox.confirm("Are you sure?", function (result) {
if (result != false) {
alert('delete:' + $this[0].tagName)
var $a = $this.closest('.g-tabs');
alert($a.length)
$($a.attr('href')).remove();
$a.parent().remove();
$(".nav-tabs li").children('a').first().click();
}
});
})
})
I can't tell exactly how you are implementing this but if my guess is right this should work.
If it doesn't work, you should consider setting up a fiddle.
function remove() {
bootbox.confirm("Are you sure?", function(result) {
if (result) { $(this).remove(); }
});
}

Hover on dynamic link generated

I want to create a hover similar to the example here in the jQuery. But the link is dynamically generated so I'm really having a hard time figuring this out.
I tried this:
$(document).ready( function() {
$('a.g-tabs').on('hover', 'a', function() {
$( this ).append( $('<i class="icon-clear-remove" onClick="tabRemove();"></i>') );
},
function() {
$( this ).find( ".icon-clear-remove:last" ).remove();
});
});
But its not working. Seems like my selector is the problem. How can I select it properly?
UPDATE:
This JS is handles for the view to not refresh if the tab is created:
$(document).on('submit','#pop-form', function(e) {
// make an ajax request
$.post('../admin/FLT_add_tab.do',
$('#pop-form').serialize(),
function( data ) {
// if data from the database is empty string
if( $.trim( data ).length != 0 ) {
// hide popover
$('#popover').popover('hide');
//append new tab and new tab content
var id = $(".nav-tabs").children().length - 1;
$('#popover').closest('li').before('<li>' + data + '</li>');
$('.tab-content').append('<div class="tab-pane" id="tab_' + id + '"> <c:import url="flt-pis.html"></c:import> </div>');
} else {
// error handling later here
}
}
);
e.preventDefault();
});
Not this one is the HTML that handles the tabs if the user goes to this page in first hand:
<!-- Other tabs from the database -->
<c:forEach var="tabNames" items="${ allTabs }">
<li> ${ tabNames.key }</li>
</c:forEach>
<!-- Add new tab -->
<li>New <i class="icon-plus-sign"></i></li>
As requested the server side code:
#ResponseBody
#RequestMapping( value = "/admin/FLT_add_tab", method = RequestMethod.POST )
public String createNewTab( #RequestParam
String newTab, HttpServletRequest request )
{
HttpSession session = request.getSession();
String returnVal = Credentials.checkSession( session );
if( returnVal != null )
{
return returnVal;
}
String tabName = null;
try
{
DataSource dataSource = DatabaseCommunication.getInstance().getDataSource();
QuestionnaireDAO qDAO = new QuestionnaireDAO( dataSource );
if( qDAO.getTabName( 0, newTab ) == null )
{
qDAO.insertQtab( newTab );
tabName = newTab;
}
}
catch( Exception e )
{
// no logger yet
e.printStackTrace();
}
return tabName;
}
If it is dynamically created the you have to use the delegate
$(document).on('mouseenter', 'a.g-tabs', function() {
$( this ).append( $('<i class="icon-clear-remove" onClick="tabRemove();"></i>') );
});
$(document).on('mouseleave', 'a.g-tabs', function() {
$( this ).find( ".icon-clear-remove:last" ).remove();
});
try this code
$('a.g-tabs').on({
mouseenter: function() {
$( this ).append( $('<i class="icon-clear-remove" onClick="tabRemove();"></i>') );
},
mouseleave: function() {
$( this ).find( ".icon-clear-remove:last" ).remove();
}
}, "a");
this code from Is it possible to use jQuery .on and hover
use CSS.
.g-tabs a>.icon-clear-remove
{
display:none;
}
.g-tabs a:hover>.icon-clear-remove
{
display:inline-block;
}
E > F Matches any F element that is a child of an element E.
E:hover Matches E during user hovers E.
So, E:hover>F means that while user hovers E, apply rule to F.
Try it here http://jsfiddle.net/7bVTj/

Jquery Mobile Listview Autocomplete: how to trigger function when user presses enter?

I’m following the jquery mobile remote autocomplete demo:
http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/listviews/listview-filter-autocomplete.html
My list is being dynamically populated from my datasource fine and I can do things when the user clicks on a result from the list.
However I also need it to trigger a function when the user hits enter (or clicks “Go” on the phone)... How can I do this? Here's my current code:
$( document ).on( "pageinit", "#myPage", function() {
$( "#autocomplete" ).on( "click","li",function() {
// do stuff when user clicks on item in list
alert('Doing stuff!');
});
$( "#autocomplete" ).on( "listviewbeforefilter", function ( e, data ) {
var $ul = $( this ),
$input = $( data.input ),
value = $input.val(),
html = "";
$ul.html( "" );
if ( value && value.length > 2 ) {
$ul.html( "<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>" );
$ul.listview( "refresh" );
$.ajax({
url: "http://mywebservice/"+$input.val(),
dataType: "json",
crossDomain: false
})
.then( function ( response ) {
$.each( response, function ( i, val ) {
html += "<li><a href='#'>" + val.display_name + "</a></li>";
});
$ul.html( html );
$ul.listview( "refresh" );
$ul.trigger( "updatelayout");
});
}
});
});
I've been searching alot for help, but most results have been talking about the jquery autocomplete and not the jquery mobile listview autocomplete...
Any help would be much appreciated -thanks!
Hey I used a local autocomplete jQM widget but this will work the same for ya -
HTML -
<div data-role="page" id="carPage">
<div data-role="content">
<ul id="autocomplete" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Find a car..." data-filter-theme="d">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
<li>Ferrari</li>
<li>Honda</li>
</ul>
</div>
</div>
JS -
$(function () {
$('#carPage input[data-type="search"]').on('keydown', function(e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13) { //Enter keycode
alert('enter key was pressed');
}
});
});
jsFiddle Demo
/Update
Regarding the go button - Because the autocomplete widget wraps a form element around your content the go button will trigger a submit on the form. This means you can listen to the enter key press and go button press with this simple event handler like this below -
$("#carPage form").submit(function() {
// this will handle both the enter key and go button on device
});
I updated the jsFiddle demo with both approaches above. I like the second approach best because it handles both scenarios the easiest.

jquery .show() .hide() puzzle

I'm writing a simple jquery animation to show/hide a block of stuff when the title is clicked.
The markup looks like this:
<section class="infoblock off">
<h2><span class="sectiontitle rounded-right">TITLE (click to show/hide)</span></h2>
<div class="info"></div><!--info-->
</section>
My javascript looks like this:
$(".infoblock h2").click( function(event) {
//console.log('show info');
if ( $(this).parent( $('.infoblock') ).hasClass('off') ) {
$(this).parent( $('.infoblock') ).removeClass('off');
$(this).parent( $('.infoblock') ).addClass('on').children( $('.info') ).show(300);
console.log( 'On function. Parent class= '+$(this).parent( $('.infoblock') ).attr('class') );
} else if ( $(this).parent( $('.infoblock') ).hasClass('on') ) {
$(this).parent( $('.infoblock') ).removeClass('on');
$(this).parent( $('.infoblock') ).addClass('off');
$(this).parent( $('.infoblock') ).children( $('.info') ).hide(300);
console.log( 'Off function. Parent class= '+$(this).parent( $('.infoblock') ).attr('class') );
}
});
This works BUT when I click the title the second time to hide the .info <div> the title gets hidden as well. WHY?!
I think you are confused about how to specify selectors. For example, where you have
$(this).parent( $('.infoblock') ).hasClass('off')
I think you want
$(this).parent('.infoblock').hasClass('off')
Here is a working example
demo : http://jsfiddle.net/RQ2Cw/1/
instead of parent use closest, and instead ofchildren use find
$(".infoblock h2").click(function(event) {
//console.log('show info');
if ($(this).closest('.infoblock').hasClass('off')) {
$(this).closest('.infoblock').removeClass('off');
$(this).closest('.infoblock').addClass('on').find('.info').show(300);
console.log('On function. Parent class= ' + $(this).closest('.infoblock').attr('class'));
} else if ($(this).parent('.infoblock').hasClass('on')) {
$(this).closest('.infoblock').removeClass('on');
$(this).closest('.infoblock').addClass('off');
$(this).closest('.infoblock').find('.info').hide(300);
console.log('Off function. Parent class= ' + $(this).closest('.infoblock').attr('class'));
}
});​
or :
$(".infoblock h2").click(function(event) {
var _parent = $(this).closest('.infoblock');
if (_parent.hasClass('off')) {
_parent.removeClass('off').addClass('on').find('.info').show(300);
} else if (_parent.hasClass('on')) {
_parent.removeClass('on').addClass('off').find('.info').hide(300);
}
});​
If you don't use the 'info' class anywhere else, you could use it directly as a selector:
$('.info').show(300)
$('.info').hide(300)
If you do use the class somewhere else, you could give it an ID <div id="info" class="info"></div> and select it using $('#info')
Also, if the condition only purpose is to switch between hide() and show() (if there is no css associated with the classes), try using the toggle() function.
Store a reference to the parent element and make use of jQuery's function chaining, like this:
$(".infoblock h2").click( function(event) {
//console.log('show info');
var $parent = $(this).parent('.infoblock');
$parent.toggleClass("off").toggleClass("on").children($('.info')).toggle(300);
if ($parent.hasClass('on')) {
console.log( 'On function. Parent class= '+$parent.attr('class'));
} else if ($parent.hasClass('off')) {
console.log( 'Off function. Parent class= '+$parent.attr('class'));
}
});
You can do this in two lines:
$( '.infoblock' ).on( 'click', 'h2', function () {
var $elem = $( this ).closest( '.infoblock' ).toggleClass( 'on off' );
$elem.find( '.info' )[ $elem.hasClass( 'on' ) ? 'show' : 'hide' ]( 300 );
});
Live demo: http://jsfiddle.net/dpdvg/1/

JQuery Toggle & Image

I have a + icon and a - icon. When someone clicks the + icon a box appears and the icon changes to a - icon. If they click again the box disappears and the icon changes to a + icon.
Here is the code I tried but its not working...
$("#box").toggle(function(e){
$("#icon").attr ("src","/images/icon_expand.png")
},
function(e) {
$("#icon").attr("src","/images/icon_retract.png")
}
);
Any ideas?
Thank you!
The .toggle() function attaches click handlers to the element, not event handlers for then an element is toggled visible, it should be attached to #icon, like this:
$("#icon").toggle(function(){
$("#box").hide();
this.src = "/images/icon_expand.png";
}, function() {
$("#box").show();
this.src = "/images/icon_retract.png";
});
$.togle () toggles the visibility of the matched element(s). So you are using it completely wrong.
You'll have to do something like this:
$( '#icon' ).click ( function () {
var $this = $( this );
var $box = $( '#box' );
$box.toggle ();
if ( $box.is ( ':visible' ) === true ) {
$this.attr ( "src", "/images/icon_retract.png" );
} else {
$this.attr ( "src", "/images/icon_expand.png" );
}
} );
i think, there will be a correction in Nick code and then it will work fine.
you have to first show the box and on second click you have to hide it, if is it so,
then try this
$("#icon").toggle(function(){
$("#box").show();
this.src = "/images/icon_expand.png";
}, function() {
$("#box").hide();
this.src = "/images/icon_retract.png";
});

Categories

Resources