I would like to do the following:
1. tab-1 is selected when page load at first time
2. After clicking tab-2, form is submitted and page need to stay on the tab-2
I have tested two code snippets. However, both of them have errors (see at below):
<form id="target">
<ul>
<li>Tab-1</li>
<li>Tab-2</li>
<li>Tab-3</li>
</ul>
<div id="tabs-1">
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
</form>
code 1-
It works with point2 and doesn't work with point 1
<script>
$(function() {
var $tabs = $('#tabs').tabs();
$tabs.tabs( "option", "selected", 1 );
$('#tabs-B').click(function() {
$('#target').submit();
});
});
</script>
code 2-
It works with point1, but form doesn't submit after clicking tab-2
var $tabs = $('#tabs').tabs();
$('#tabs-B').click(function() {
$('#target').submit(function() {
$tabs.tabs( "option", "selected", 1 );
});
});
use the [select][1] method
$( "#tabs" ).tabs({
select: function(event, ui) {
var data = $("#from1").serialize();
console.log(data);
// submit the for via ajax here
/*$.post("/path",{data:data},function(){
//clear the form fields or what ever you want to do
});*/
}
});
http://jsfiddle.net/5RMxZ/16/
Related
This is probably a simple question, but how can I replace the thing I am dragging with html from an ajax call?
So, if the draggable items are just 'text' items (as below in the html snippet), and when I drag the thing I use a 'image' via the helper method, how can I 'on drop' not use either of them but insert the html as returned from a ajax call.
Where do I make the call (btw, using the 'input-type' value to the ajax call to get the correct html)?
How to I prevent the default 'dragged item' from being inserted? I.e. I don't want the div put in or the helper method image....
Do I need to add like a droppable or do I do this in the sortable on like the received event (kind of works, can't remove image but from help method)??? (I have been trying both, and whilst the ajax call worked and I get the data etc, given that I don't know how to prevent the default stuff being dropped I am not sure 'what' I am replacing with the 'result' from the call...)
$("#desktoplayout").sortable({
receive: function (event, ui) {
$(this).append('<div>html from ajax call</div>'); // kind of works... but the image from the 'helper method' on the 'draggable' is still there.
}
}); // A sortable list of stuff into which things are dragged.
var input-type;
$("#draggableItems .item").draggable({
connectToSortable: "#desktoplayout",
helper: function (event) {
return "<div class='item'><img src='/Images/Header.png' /></div>";
},
start: function (event, ui) {
input-type = $(this).find('.preview').data("input-type");
},
drag: function(e, t) {
},
stop: function(e, t) {
}
});
and
<div id="draggableItems">
<div class="item">
<div class="preview" data-input-type="1">
TEXT
</div>
</div>
</div>
Update
This seems to do what I wanted... is calling remove on the helper the correct way of doing this?
receive: function(event, ui) {
ui.helper.remove();
var $this = $(this);
$.get("somewhere", function(data) {
// Note: presume more logic here.....
$($this).append(data);
});
}
Here is a working example of one solution:
https://jsfiddle.net/Twisty/zh9szubf/
HTML
<div id="draggableItems">
<div class="item">
<div class="preview" data-input-type="1">
TEXT
</div>
</div>
</div>
<ul id="desktoplayout">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
JQuery
$(function() {
$("#desktoplayout").sortable({
receive: function(event, ui) {
var newItem;
$.post("/echo/html/", {
html: "<li class='newItem'>From Ajax</li>"
}, function(data) {
ui.helper.replaceWith(data);
});
}
});
var inputType;
$("#draggableItems .item").draggable({
connectToSortable: "#desktoplayout",
helper: function (event) {
return "<div class='item'><img src='/Images/Header.png' /></div>";
},
start: function(event, ui) {
inputType = ui.helper.find('.preview').data("input-type");
}
});
});
This will work with $.get() too, but for the example, it had to be $.post(). Basically, whatever you want top be the result, That code should be in the ui.helper.replaceWith() section.
Ex:
<div class="droppable">
<div class="except_this_div"></div>
</div >
I have a jquery ui droppable event for the above example in which the drop should not happen for
$('.droppable').droppable({});
I need to exclude the droppable only for <div class="except_this_div"></div>
You can accomplish this by using the jquery ui draggable revert function.
HTML
<div class="droppable">
<div class="except_this_div"></div>
</div>
<div class="draggable">
JQuery
var revert;
$('.droppable').droppable({
drop: function( event, ui ){
revert = false;
}
});
$('.except_this_div').droppable({
greedy: true
});
$('.draggable').draggable({
revert: function(){
return revert;
},
start: function(){
revert = true;
}
});
Fiddle:
https://jsfiddle.net/qL0tb12h/2/
I have a fixed header on my jQuery mobile project that is set to data-tap-toggle="true".
<div data-role="header" data-position="fixed" data-fullscreen="true" data-id="hdr" data-visible-on-page-show="false" data-tap-toggle="true">
<h1>My Title</h1>
</div><!-- /header -->
The header correctly toggles when tapping on the screen. The problem is that when I tap on a link to open a panel, the header also displays.
Test
Here's my panel:
<div data-role="panel" id="mypanel" data-position="right" data-display="overlay" data-theme="b">
<div class="ui-panel-inner">
<p>Content</p>
</div>
</div><!-- /panel -->
I've tried to blacklist the panel button like so:
$( document ).on( "pageinit", "#demo-page", function() {
$("[data-role=header],[data-role=footer]").fixedtoolbar({ tapToggleBlacklist: "a, button, input, select, textarea" });
});
I've also tried to create my own click event that changes the header tapToggle option to false as well as opening only the panel.
$('#panel_link').on('click', function (event) {
$("[data-role=header]").fixedtoolbar( "option", "tapToggle", false );
alert('test');
$( "#mypanel" ).panel( "open" );
event.stopPropagation();
});
try this:
$('#panel_link').on('click', function (event) {
$( "#mypanel" ).panel( "open" );
event.stopImmediatePropagation();
});
See the difference between stopPropagation and stopImmediatePropagation jquery: stopPropagation vs stopImmediatePropagation
When I introduce new elements to my slideToggle they look fine and are active (expanded by default) however if I click a pre-existing element all elements collapse and I cannot expand the new ajax elements. Essentially the new ajax elements are not part of the slideToggle group because that was constructed before the elements were introduced. How do I rebuild the toggle on the fly or make the new elements behave as expected?
** jQUERY
$('div.menu_body:eq(0)').show();
$('.acc .head:eq(0)').show().css({color:"#2B6893"});
$(".acc .head").click(function() {
$(this).css({color:"#2B6893"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({color:"#404040"});
});
** Ajax
<script type="text/javascript">
jQuery(document).ready(function() {
setInterval("showNewFeeds()", 10000);
});
showNewFeeds() {
$.ajax({
type: 'POST',
url: 'feed.php',
data : {uid : '145', mid: '22', nid: 56'},
success: function(response) {
$('#feedNote').html(response).fadeIn('slow');
},
error: function (xhr, ajaxOptions, thrownError) {
//alert(xhr.status);
//alert(thrownError);
}
});
}
</script>";
** HTML
<div class="widget acc" id="feedNote">
<div class="head"><h5>Header 1</h5></div>
<div class="menu_body">
<div>HTML 1</div>
</div>
<div class="head"><h5>Header 2</h5></div>
<div class="menu_body">
<div>HTML 2</div>
</div>
</div>
Try :
$(document).on('click', '.acc .head', function() {
$(this).css({color:"#2B6893"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({color:"#404040"});
});
instead of .click(function(){...})
I'm trying to add an additional class to my jQuery dialog with the dialogClass property. Here's the javascript:
$(function(){
$( "#toogleMAmaximized" ).dialog({
title: 'Missions and Achivments',
autoOpen: false,
height: 500,
width: 700,
modal: true,
dialogClass: 'noPadding',
buttons: {
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
})
$( "#toogleMAminimized" ).click(function() {
$( "#toogleMAmaximized" ).dialog( "open" );
$( "#toogleMAmaximized" ).dialog({dialogClass:'noPadding'});
});
})
<div id="toogleMAminimized" style="" class="noPadding">
<div class="" style="cursor: pointer;position: absolute;right: 0;top: 45px;"><img src ="images/MAminimized.png" alt="missions and achivments"/></div>
</div>
Just in case you need it, my html code
<div id="toogleMAmaximized" >
<div id="missions">
<div id="mission1" missiontitle="A new home!" missionpoint="1" missionicon="images/missions/icon/anewhome-icon.png" missionimage="images/missions/anewhome.png" made="f" class="mission notDone"> </div>
</div>
<div id="achivments">
<div id="achivment1" achivmenttitle="Lucha sin cuartel!" achivmentpoint="10" achivmenticon="images/achivments/icon/1.png" achivmentimage="images/achivments/icon/luchasincuartel-plata-ico.png" made="t" class="achivment done"> </div>
</div>
</div>
As you can see, I've tried to add the class in many ways, I've tried all possible combinations but keep getting the same result: no noPadding class
Your noPadding class is being added successfully to the dialog. I have confirmed this by placing your markup and scripts within a fiddle, and loading jQuery UI 1.8.16 (the version you were testing with). This test is available online at http://jsfiddle.net/QHJKm/3/.
I suspect the confusion here is with the expected effect noPadding is going to have on the dialog itself. It could be that you interpreted its lack of effect as an indication it wasn't added to begin with. As you'll note in my example, I've got with a rather bold style, a red background. This quickly confirms that the class is indeed being added to the dialog.