I have two questions. I am using jquery selectable ui for a checkbox.
http://jsfiddle.net/skeR4/4/
1.) How can i change the script, so on click of a different <li> it also highlights that element, instead of deselecting what was previously highlighted. and to deselect an element the user reclicks the element. this way the user can select multiple elements by clicking each one individually without having to ctrl+click to select multiple.
<div class="demo">
<ol id="selectable">
<li class="ui-state-default">1<input type="checkbox" value="something"></li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default">4</li>
</ol>
</div>
<script>
$(function() {
$( "#selectable" ).selectable();
});
</script>
$("#selectable").bind("mousedown", function(e) {
e.metaKey = true;
}).selectable();
DEMO
Related
Got a problem with my WordPress menu. After I insert the jquery my links (in the menu and in sidebars won't work. What to do? Thank you!
My code:
HTML
<ul class="menu">
<li class="menu-item">
Link text
<ul class="sub-menu">
<li><a>Text</a></li>
<li><a>Text</a></li>
<li><a>Text</a></li>
</ul>
</li>
</ul>
jQuery
$(document).ready(function(){
$('li.menu-item').each(function() {
var $dropdown = $(this);
$($dropdown).click(".menu-item a", function(e) {
e.preventDefault();
$ul = $("ul.sub-menu", $dropdown);
$('ul.sub-menu').toggle();
$("ul.sub-menu").not($ul).hide();
return false;
});
});
$('html').click(function(){
$("ul.sub-menu").hide();
});
});
There might be a problem with the event propagation. If a link within a sub-menu is clicked the click event propagates to the surrounding menu-item and triggers your JS code.
Please try to add this code to prevent the propagation effect:
$( "ul.sub-menu a" ).click(function( event ) {
event.stopPropagation();
});
please fix the issue by replacing below script
<li class="menu-item> to <li class="menu-item">
I have the following layout
<div id="tabs">
<ul>
<li>Create Username</li>
<li>View Search Logs</li>
<li>Assign Values Table</li>
<li>Edit Values Table</li>
<li>Create Values Table</li>
</ul>
<div id="tabs-1">
<h2>Create Username</h2>
</div>
<div id="tabs-2">
<h2>View Search Logs</h2>
</div>
<div id="tabs-3">
<h2>Assign Values Table</h2>
</div>
<div id="tabs-4">
<h2>Edit Values Table</h2>
</div>
<div id="tabs-5">
<h2>Create Values Table</h2>
</div>
</div>
Each tab has a form in it, when the form is submitted and the page reloads I want the visible tab to still be the tab the user was last on (instead of it going back to the first).
Each form has a hidden field that contains the index of that tab. I then use the below:
<script type="text/javascript">
$(function() {
$("#tabs").tabs({
selected: <?php echo (isset($_POST['selected_tab']) ? $_POST['selected_tab'] : 1)?>
});
});
</script>
This results in showing the right thing e.g
<script type="text/javascript">
$(function() {
$("#tabs").tabs({
selected: 2
});
});
</script>
However the first tab is still the tab that is shown.
$("#tabs").tabs({
selected: 2
});
Should be:
$("#tabs").tabs({
active: 2
});
Tabs uses active property and not selected property.
Also note that the index is base 0, so if you want to select the 2nd tab, your value needs to be 1.
One option would be to include jquery-cookie.js an use tabs like this:
$( "#tabs" ).tabs({
cookie: {
expires: 1
}
});
And this will automatically manage your last open tabs with cookie.
In my code which is using bootstrap, I got a problem.
I am using JS code shown as below.
$( "li:eq(1)" ).click(function() {
$.get("./test.php")
.done(function(data) {
$('#middle').html(data);
});
It is to control the div.
<div class="container" id=header-nav>
<a class="brand" href="index.php"></a>
<div class="nav-collapse collapse" >
<ul class="nav">
<li class="active">Home</li>
<li>test</li>
.......
<div class="container" id="middle"> </div>
When I click the test button, the link will change to test.php# but nothing change. Click again, it can load into the test.php.
The problem is the link is test.php, the code not work. when test.php# , it work. And I would like to know why.
Thanks a lot.
The problem is because you have attached the handler to the li element, but the a element is clicked, and then transfers the page. Try this instead:
$("li:eq(1) a").click(function(e) {
e.preventDefault();
$.get("./test.php")
.done(function(data) {
$('#middle').html(data);
});
});
The preventDefault() stops the default behaviour of the link, meaning your AJAX request gets executed as required.
since you want to use $.get (AJAX), you don't have to give the url to <a> element inside your <li> element,
you have to give the attribute href inside <a> element this value: javascript:void(0) Or #,
your html code would be:
<div class="container" id=header-nav>
<a class="brand" href="index.php"></a>
<div class="nav-collapse collapse" >
<ul class="nav">
<li class="active">Home</li>
<li>test</li>
.......
<div class="container" id="middle"> </div>
or you have to prevent default action for the element to prevent reloading url by adding:
event.preventDefault() in you onclick event and your js code would be:
$( "li:eq(1)" ).click(function(e) {
event.preventDefault();
$.get("./test.php")
.done(function(data) {
$('#middle').html(data);
});
I'm quite sure this has never been asked before.
I am new to jQuery and found jqmPhp very easy to use. However, I am trying to achieve a few things that I find very complicated to implement.
I need to filter list items (like here) and enable the user to check/uncheck several list items to delete. I am trying to implement a similar feature to what Gmail mobile is doing (with a checkbox on the left, where selecting it will make the relevant row highlight and allows users to just click a button to delete checked rows).
Is it possible at all to do that with jqmphp? If so, can anyone assist me with more information, links or code?
I made a Demo for you, by converting list-view into check-able list items.
http://jsfiddle.net/Palestinian/vcXmK/
HTML
<div data-role="page">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<ul id="list-view-test" data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
<li>Adam Kinkaid
</li>
<li>Alex Wickerham
</li>
<li>Avery Johnson
</li>
<li>Bob Cabot
</li>
<li>Caleb Booth
</li>
<li>Christopher Adams
</li>
<li>Culver James
</li>
</ul>
Delete
Reset
</div>
<div data-role="footer">
<h1>Footer</h1>
</div>
</div>
Code
// Change icons
$('#list-view-test').find('span.ui-icon').each(function () {
if ($(this).hasClass('ui-icon-arrow-r')) {
$(this).removeClass('ui-icon-arrow-r').addClass('ui-icon-checkbox-off');
}
$('#list-view-test').listview('refresh');
});
// toggle "checked/unchecked"
$('#list-view-test').on('click', 'li', function (event) {
event.preventDefault();
$(this).find('span.ui-icon').removeClass('ui-icon-checkbox-off').addClass('ui-icon-checkbox-on');
});
// Delete selected
$('#del').on('click', function () {
$('span.ui-icon').each(function () {
if ($(this).hasClass('ui-icon-checkbox-on')) {
$(this).closest('li').remove();
$('#list-view-test').listview('refresh');
}
});
});
// Clear selection
$('#reset').on('click', function () {
$('span.ui-icon').each(function () {
if ($(this).hasClass('ui-icon-checkbox-on')) {
$(this).removeClass('ui-icon-checkbox-on').addClass('ui-icon-checkbox-off');
}
});
});
I use a simple jquery code for tabs, the idea of it: in each tab I have a form when i submit each form the code will give me values from mysql . The problem is when i submit a form in for example tab 3 it will redirect me to the first tab (default tab), before I show any result.
any suggestion to solve this problem.
thanks in advance,
My Code :
<script type="text/javascript">
$(function() {
$( "#tabs" ).tabs();
});
</script>
HTML code :
<div id="tabs">
<ul>
<li>tab 1</li>
<li>tab 2</li>
<li>tab 3</li>
</ul>
<div id="tabs-1">
<p>tab 1 content</p>
</div>
<div id="tabs-2">
<p>tab 2 content</p>
</div>
<div id="tabs-3">
<p>tab 3 content</p>
</div>
</div>
If you use php, you could use for e.g. hidden html-field in form which contains number of the tab. When submitting form you could parse that variable and use it in jQuery-code. If you use php inside jQuery code could look like this:
$("#tabs").tabs({
selected: <?php echo (isset($_POST['selected_tab']) ? $_POST['selected_tab'] : 1)?>
});
You jest use this code
$( ".selector" ).tabs( "load", 2 );
after loading call this one so you can select 2 tab.
Try it!!
You can pass parameters to tabs() function (http://api.jqueryui.com/tabs/)
<script type="text/javascript">
$(function() {
$( "#tabs" ).tabs({active: 2});
});
</script>
you said "forms" if you submit the form, the page will send data and refresh itself. Just use a button and when the button is clicked, send the ajax.