ValidationSummary hyperlink doesn't change tab - asp.net-mvc

Im using devexpress Html.DevExpress().ValidationSummary in my mvc project. My form contains a devexpress page control with 3 tabs. When there are client-side validation errors validation summary shows them, and every error is hyperlink. If you click it, the field with error is focused, but if the field is on other tab nothing happens. So the field is focused if it is on active tab. I'd like it to change the active tab and focus appropriate field. Is there a way to make it work right?

My colleague solved this problem using javascript and jQuery:
var nameControlTab = "myPageControl"; //name of your pagecontrol here
$(document).ready(function () {
$("tbody").on('click', 'a[href*="javascript:_aspxVSOnErrorClick("]', function () {
var url = $(this).attr("href");
url = url.substring(url.indexOf("'") + 1);
url = url.substring(0, url.indexOf("'"));
var idTab = $("#" + url + "_ET").parents('div[id*="' + nameControlTab + '_C"]').not(nameControlTab + '_CC')[0].id;
var indexTab = idTab.substring((nameControlTab + '_C').length);
SetTab(indexTab);
return true;
});
});
function indexOf(array, value) {
if ([].indexOf)
return array.indexOf(value);
else {
for (var i = 0; i < array.length; i++)
if (array[i] == value)
return i;
return -1;
}
}
function SetTab(indexTab) {
this[nameControlTab].SetActiveTabIndex(indexTab);
}

Related

photoswipe returning to initial hash of current page instead of last scroll position

On IOS, when I close photoswipe to return to the page, it wont return to the scroll position I was at when I clicked the thumbnail.
Instead the page scrolls back to the # which was specified when I initially called the page.
For example if photoswipe is on www.somepage.html, and I navigate to the page using:
www.somepage.html#footer
and then scroll up and click a thumnail in #middle of page, on closing photoswipe, the page scrolls back down to the footer.
I've tried disabling history in the photswipe options, and i've also tried clearing the hash data from the url using:
//clear hash
//$(document).ready(function (e) {
// window.location.hash = '';
// window.history.pushState("", document.title, window.location.pathname);
//
//});
But none of it seems to work. If I navigate to the page without the # in the page, everthing is fine.
I'm guessing I may have to pass a variable in the url instead of the # and scroll to the div in question via javascript?
I already have the javascript in place to scroll, but I'm not sure how to read the variable from the url and then use it's value in Javascript.
If this is likely to be the best fix for the issue, could anyone give an example of the javascript code needed?
Here's my current scroll code:
$(function () {
$('a[href*=#]:not([href=#],[data-toggle],[data-target],[data-slide])').click(function () {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
If anyone else has the same issue, I've managed to fix this by passing the div id to the page in the query string rather than using a #.
Here's the code:
$(window).ready(function () {
if (document.location.search.length) {
target = getUrlVars()["id"];
scrollToID('#' + target, 750);
} else {
return;
}
//target = $url().param('id');
//if (target == '') return;
});
function getUrlVars() {
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for (var i = 0; i < hashes.length; i++) {
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
// scroll function
function scrollToID(id, speed){
var offSet = 100;
var targetOffset = $(id).offset().top - offSet;
var mainNav = $('#main-nav');
$('html,body').animate({scrollTop:targetOffset}, speed);
if (mainNav.hasClass("open")) {
mainNav.css("height", "1px").removeClass("in").addClass("collapse");
mainNav.removeClass("open");
}
}
if (typeof console === "undefined") {
console = {
log: function() { }
};
}

Jstree, get_checked, pass value to div onselect event

i'm using an MVC c# asp.net 4.0 project with Jstree, but i have a small problem i have a jstree that's populated witha a JSON array.
My problem is I need to catch the value of the checkboxes in jstree when checked to a div in my view.
OK, i finally got this working this is the solution i hope it Help's someone :)
first you must bind:
.bind('check_node.jstree', function (e, data) {
$("#listSelectedActives").html(BuildList());
})
.bind('uncheck_node.jstree', function (e, data) {
$("#listSelectedActives").html(BuildList());
then the use this function:
function BuildList() {
var checked = $("#demoTree").jstree("get_checked", null, true);
var output = "";
$(checked).each(function (i, node) {
var id = $(node).attr("ID");
var text = $(node).attr("NodeText");
output += "<p>ID: " + id + " TEXT: " + text + "</p>";
})
return output;
}
If this is too confusing please let'me know :)

jquery mobile alternate button theme for dynamically populated buttons?

I want to display jquery mobile alternate button's with different color. The code which I am using now is only able to change the button theme to 'e' but I want 'theme b'. What can be the problem? Below is the code.
$(document).delegate('[data-role="page"]', 'pagecreate', function(e) {
var db = openDatabase("Database", "1.0", "PhoneGap Demo", 200000);
db.transaction(function(tx) {
tx.executeSql("SELECT id FROM DEMO", [],
function(tx, results) {
var len = results.rows.length,
i;
//If no result Found
for (i = 0; i < len; i++) {
var test = results.rows.item(i).id % 2; //to get the alternate row's
if (test == 0) {
var id = "color" + results.rows.item(i).id;
$("#" + id).attr('data-content-theme', 'e').removeClass('ui-body-d').addClass('ui-body-e').trigger('create'); // Change to theme e
}
}
});
});
});
I am changing the button theme as per the id of dynamically populated buttons.
If you could post some HTML code it would help a lot.
You could try the following to see whether it solves the issue:
$("#" + id).attr('data-content-theme', 'b').removeClass('ui-body-a ui-body-b ui-body-c ui-body-d ui-body-e').addClass('ui-body-b').trigger('create');

Adding 'Data-Filter' True in code to UL, but doesnt show up on page

So I want to add the data filter to the UL if there are certain number of LI's. I get the attr to add correctly, but nothing shows up on page.
else
{
$('#presentations').attr("data-filter", "true");
$('#presentations').html('');
for (var i = 0; i < results.rows.length; i++) {
$('#presentations').append(
'<li>' + results.rows.item(i).presentName + ''
+ 'delete</li>');
}
}
$('#presentations').listview('refresh');
$.mobile.changePage($('#dashboard'), {reloadPage: "true"} );
$('#dashboard .message').text('Your presentations');
}
I'm guessing its a caching issue but I can't figure out how to work around it. Help?
I've tried to re-initialize, recreate or refresh the listview but none of it works.
The only way I can get it working is by doing:
$('#listview').listview('option', 'filter', true);
$('#listview').trigger("listviewcreate");
So you trigger manual the listviewcreate event and before that you set the filter to true. (setting with attr(), data() or jqmData() also doesn't work)
Example:
http://jsfiddle.net/N7Z9e/143/
Here is the code in action - thanks Gerjan!
else {
// don't create duplicate/double filter
$(".ui-listview-filter").remove();
if (results.rows.length > 3) { //Add filter search if more than 3 presentations.
$('#presentations').listview('option', 'filter', true);
}
$('#presentations').html('');
for (var i = 0; i < results.rows.length; i++) {
$('#presentations').append(
'<li>' + results.rows.item(i).presentName + ''
+ 'delete</li>'
);
}
$('#presentations').listview('refresh');
$('#presentations').trigger("listviewcreate");
$.mobile.changePage($('#dashboard'), { reloadPage: "true" });
$('#dashboard .message').text('Your presentations');
}

jQuery UI portlets - toggle portlets to save to a cookie (half way there!)

I'm a bit of a jQuery n00b so please excuse me if this seems like a stupid question. I am creating a site using the jQuery UI more specifically the sortable portlets. I have been able store whether or not a portlet is has been open or closed to a cookie. This is done using the following code. The slider ID is currently where the controls are stored to turn each portlet on and off.
var cookie = $.cookie("hidden");
var hidden = cookie ? cookie.split("|").getUnique() : [];
var cookieExpires = 7; // cookie expires in 7 days, or set this as a date object to specify a date
// Remember content that was hidden
$.each( hidden, function(){
var pid = this; //parseInt(this,10);
$('#' + pid).hide();
$("#slider div[name='" + pid + "']").addClass('add');
})
// Add Click functionality
$("#slider div").click(function(){
$(this).toggleClass('add');
var el = $("div#" + $(this).attr('name'));
el.toggle();
updateCookie(el);
});
$('a.toggle').click(function(){
$(this).parents(".portlet").hide();
// *** Below line just needs to select the correct 'id' and insert as selector i.e ('#slider div#block-1') and then update cookie! ***
$('#slider div').addClass('add');
});
// Update the Cookie
function updateCookie(el){
var indx = el.attr('id');
var tmp = hidden.getUnique();
if (el.is(':hidden')) {
// add index of widget to hidden list
tmp.push(indx);
} else {
// remove element id from the list
tmp.splice( tmp.indexOf(indx) , 1);
}
hidden = tmp.getUnique();
$.cookie("hidden", hidden.join('|'), { expires: cookieExpires } );
}
})
// Return a unique array.
Array.prototype.getUnique = function() {
var o = new Object();
var i, e;
for (i = 0; e = this[i]; i++) {o[e] = 1};
var a = new Array();
for (e in o) {a.push (e)};
return a;
}
What I would like to do is also add a [x] into the corner of each portlet to give the user another way of hiding it but I'm unable to currently get this to store within the Cookie using the code above.
Can anyone give me a pointer of how I would do this?
Thanks in advance!
Gareth
Have you tried adding another selector to the click function?
$("#slider div, #slider div > span.ui-icon-x").click(function(){
$(this).toggleClass('add');
var el = $("div#" + $(this).attr('name'));
el.toggle();
updateCookie(el);
});

Resources