I'm trying to save the state of a jQuery toggle in a Rails app with little success. How would I store it in a session? Or would I store it in a cookie? Thanks for your help.
Here's the jQuery that handles the toggle:
$(function() {
function showHideDocuments() {
$("#accordion").toggle("blind", 500);
};
$("#finalised-documents").click(function() {
showHideDocuments();
return false;
});
});
I don't really know how to proceed from here. Thanks!
For anyone else struggling with this, here's a solution. Use the jQuery cookie plugin with this code:
$(document).ready(function() {
$('#finalised-documents').click(function () {
if ($('#accordion').is(':hidden')) {
$('#accordion').slideDown(500);
$.cookie('forgetmenow', 'showing');
} else if ($('#accordion').is(':visible')) {
$('#accordion').slideUp(500);
$.cookie('forgetmenow', 'hidden');
}
});
if($.cookie('forgetmenow') == 'hidden') {
$('#accordion').hide();
};
});
Enjoy.
Related
JQueryMobile 1.4 has deprecated the pageshow event and instead recommends using pagecontainershow; however, while I'm able to get the pagecontainershow event at a document level, I can't bind a function to a particular page.
<div id="page1" data-role="page">
...
<script>
$( "#page1" ).on( "pagecontainershow", function( event, ui ) {
console.log("page1 pagecontainershow");
} );
</script>
</div>
Demonstration: http://jsbin.com/IFolanOW/22/edit?html,console,output
I also considered using the alternative form of the jQuery "on" function where we use a selector, but that would need to be a parent of the page div, and that might include other pages, so that doesn't work.
As a workaround, I've done this, but it is very inefficient:
function registerOnPageShow(pageId, func) {
var strippedPageId = pageId.replace("#", "");
var e = "pagecontainershow." + strippedPageId;
// TODO why isn't it working to use $(pageId) instead of $(document)?
$( document ).off(e).on(e, null, {page: strippedPageId, f: func}, function(e, ui) {
if ($(":mobile-pagecontainer").pagecontainer("getActivePage")[0].id == e.data.page) {
e.data.f(e, ui);
}
});
}
You can get the page ID like this.
$(document).on('pagecontainershow', function(e, ui) {
var pageId = $('body').pagecontainer('getActivePage').prop('id');
});
There is currently no way to have a show/hide event on a specific page.
Here is what I'm using (jqmobile >1.4):
$(document).on("pagecontainershow", function () {
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
var activePageId = activePage[0].id;
switch (activePageId) {
case 'loginPage':
...
break;
case 'homePage':
...
break;
case 'groupPage':
...
break;
default:
}
});
$(document).on("pagecontainershow", function(event, ui) {
var pageId = $('body').pagecontainer('getActivePage').prop('id'),
showFunc = pageId+'_show';
if (typeof MobileSite[showFunc] == 'function') {
MobileSite[showFunc]();
}
});
MobileSite is contained in an external .js file with all the show() functions.
$(document).on("pagecontainerbeforeshow", function (event, ui) {
if (typeof ui.toPage == "object") {
var crrentPage = ui.toPage.attr("id")
}
});
and you must use this code before calling Index.js !!
Is there equivalent code for jQuery UI 1.10?
This works fine in previous versions but ajaxOptions are deprecated now.
$('#mytabs').tabs({
ajaxOptions: {
dataFilter: function(result){
var data = $.parseJSON(result);
return data.myhtml;
}
},
});
Try this:
$('#TheTab').tabs({
beforeLoad: function( event, ui ) {
ui.ajaxSettings.dataType = 'html';
ui.ajaxSettings.dataFilter = function(data) {
return $(data).find('#MYCONTENT').html();
};
ui.jqXHR.fail(function(data) {
ui.panel.html('<b>Something went wrong with the TABS-documentation ;)</b>');
});
}
});
I'm just exploring the Validate plug-in for JQuery. During implementing in my webapp made with JQueryMobile I stumbled over the fact that validating such an element is not so simple like usual input-elements.
So the Question is: How to enable validation for select?
The trick consists out of two parts:
Validate is by default ignoring :hidden. But that's what JQM does with an <select>: hide it and placing a div-span-wrapper on top. Solution is to redefine the ignore-selector:
{ignore: ":hidden:not(select)"}
To inform the user about the invalid field you have to show the error right on the wrapper:
$(error.element).closest('.ui-select').attr("title", error.message).addClass("invalidInput")
And now in an working example:
$.validator.setDefaults({
debug: true,
ignore: ":hidden:not(select)",
submitHandler: function() { alert("submitted!"); },
showErrors: function(map, list) {
$(this.currentElements).each(function() {
if(this.nodeName == "SELECT") {
$(this).closest('.ui-select').removeAttr("title").removeClass("invalidInput");
return true;
}
$(this).removeAttr("title").removeClass("invalidInput");
});
$.each(list, function(index, error) {
if(error.element.nodeName == "SELECT") {
$(error.element).closest('.ui-select').attr("title", error.message).addClass("invalidInput");
return true;
}
$(error.element).attr("title", error.message).addClass("invalidInput");
});
}
});
$('div[data-role="page"]').bind('pageinit', function(event) {
var rules = {};
$('input:not(:button)').each(function() {
rules[this.name] = {required:true};
});
$('#fzgherst').each(function() {
// revalidates the select when changed, other elements gets revalidatet onblur
$(this).on('change', function() {$(this).valid();});
rules[this.name] = {required:true};
});
$("form").validate({
rules: rules
});
});
That's all folks!
Below is my jquery code. It selects the corresponding tabs and according to that. It sends the html data
$(document).ready(function(){
var $tabs = $(".tabs").tabs();
$tabs.bind('tabsselect', function(event, ui) {
if(ui.index==0)
{
var data=$('div.display').html();
$.post("echo.php", {index:data},function success(dat){
// returnedData
alert(dat);
});
}
else if(ui.index==1)
{
var data=$('div.map').html();
alert(data);
}
else if(ui.index==2)
{
var data=$('div.system').html();
alert(data);
}
else if(ui.index==3)
{
var data=$('div.control').html();
alert(data);
}
});
});
My php (echo.php):
<?php
echo $_POST["index"];
?>
I'm posting the html code too:
<div class="tabs">
<ul>
<li><span><div class="display">DISPLAY DATA</div></span></li>
<li><span><div class="map">MAP</div></span></li>
As brief i have to get the value display data in $_POST["index"]. Any other suggestions are welcome. Why is not working?
Use browser console for debug client-side requests (firebug, dragonfly, etc) and do some debug actions on server e.g. file_put_contents('log.txt', serialize($_POST));
You callback in $.post should be an anonymous function. Try this:
$.post("echo.php", {index:data}, function(dat){
// returnedData
alert(dat);
});
How use submit and ajax functions on click event? I need send input hidden to server using a link but no found in click event.... any solution? please help!
p.d. sorry for my english xd
$('#delete_link').click(function() {
$('#myform').submit(function() {
if ($('#codigo').val().length < 1) {$('#notice').html('Error'); return false; }
$.ajax({
type: "POST",
url: 'mantenimiento.php?action=Eliminar',
data: $(this).serialize(),
success: function(data) {
switch(data){
case 'success':
window.location.reload();
break;
default:
$('#notice').html('<p class="error">'+data+'<\/p>');
break;
}
}
});
return false;
});
});
this bit:
$('#delete_link').click(function() {
$('#myform').submit(function() {
is only binding the function to the submit event on #myform (when #delete_link is clicked), but doesn't actually trigger the event.
I think what you want is something like:
$('#myform').submit(function() {
// stuff to do when submit
});
$('#delete_link').click(function() {
$('#myform').trigger('submit');
});
You're adding a handler to the submit event which makes your AJAX request.
You need to make the AJAX request directly, without involving the submit evemt.