I'm using best_in_place 2.1.0 in a rails 3.2 app.
I have a set of best in place fields whose values are dependent on each other.
Because modifying one changes the values for all of them, I need to disable editing for all of them when an AJAX request is sent from any of them.
If you notice, best in place already disables one field while it's waiting for the AJAX request to finish. I just want to extend this so that it disables all of them.
I tried overriding the onclick
$('.best_in_place').bind("onclick", function(e){
e.stopPropogation();
e.cancelBubble();
return false;
});
but that didn't work. Sometimes it appeared to be called prior to the creation of the best in place field, but other times it appeared to occur after. Either way, it didn't work for me.
I also thought about using the "best_in_place:activate" jQuery trigger, but that is called after this.activateForm() in BestInPlaceEditor.prototype{.. activate: } so that doesn't work.
I'm not really sure what to do. Anything that will disable all, or a selection of, best in place fields dynamically will work for me.
If someone is still looking for a solution for that, I went with adding a class to the element, and canceling events via css:
in the js:
$('.best-in-place.parent-setting').on("ajax:success", function(e, t) {
var enable = $(this).data('bip-value');
var childrenSettings = $(this).data('children-setting');
$('.best-in-place.'+childrenSettings).toggleClass('disabled', !enable);
});
in the css:
.best-in-place.disabled{
opacity: .5;
pointer-events: none;
}
Related
Here is what I am trying to do.
If the user makes a selection from the suggested options then I display a div tag using jquery. I use onCompleteTopics to fire this event.
Now when the user makes any changes to the text box I want to hide the div tag again unless the user makes a selection from the suggested options.
How to fire the text changed event on jquery struts2 autocompleter.
I make a div tag visible when the user selects something from the suggestions using onCompleteTopics.
However if the user changes the text in the field I want to hide the div tag again.
But I am not able to find the right event for the same.
After trying a lot of permutation and combination I managed to figure out the solution. Its not straightforward maybe not the ideal solution but it works.
Struts Code
<sj:autocompleter
theme="simple" name="userName" id="idautocomplete"
href="%{fetchList}" onSelectTopics="complete" onSearchTopics="textchange"
loadOnTextChange="true" loadMinimumCount="3" />
Note I have used onSelectTopics and onSearchTopics but this itself do not solve the problem. I have to use some jquery along with this.
jquery
var gvar;
$.subscribe("complete", function(event, data) {
gvar = data;
setTimeout(delayfunc, 0);
});
$.subscribe("textchange", function(event, data) {
$('#idBizAccess').css("display","none");
});
function delayfunc() {
$('#idBizAccess').css("display","table-row");
}
The unusual part here is setTimeout with delay 0. I tried calling the function directly but it doesn't fetch the selected value instead it just fetches the value that is typed in the autocompleter field.
Now it works as per the requirement.
I have seen many techniques and advice for getting deep linking to work in jQuery Mobile, but my situation requires just the opposite.
I have a multi-page document, completely self-contained. I want the entry point to the app to be the first page, and to disable any deep links (edit: by "deep links" I mean bookmarks , or simply the ability to return) to the other pages in the document. I also do NOT want navigation within the app to affect the hash tag. In other words, if the user is in my app, and they hit their browser's back button, I want them to go to whatever page they were looking at before they entered my app, even if they are not on my first page.
What I have tried is to set the changeHash option on the mobile.changePage method to "false" on all my internal backward and forward navigation. But the result is that when they use their browser's back button, they go TWO pages back. Furthermore, this technique has not disabled deep linking, as I wanted it to do.
I'm hoping that someone else can advise without the necessity of me providing code examples, since my code is otherwise rather complex.
You can disable changeHash completely on mobileinit event. Modifying global defaults should be placed in head after jQuery.js and before jQuery Mobile.
<script src="jquery.js"></script>
<script>
$(document).on("mobileinit", function(){
$.mobile.changePage.defaults.changeHash = false;
$.mobile.hashListeningEnabled = false;
});
</script>
<script src="jquery.mobile.js"></script>
And then, you need to listen to back button on navigate event and take user through history, using window.history.back().
$(window).on("navigate", function (event, data) {
if (data.state.direction == 'back') {
window.history.back();
return false;
}
});
Demo
I have a ValidationSummary that works pretty well, although it doesn't go away after the last of the form errors are rectified.
I'm not sure if this is default behavior or a bug. It seems more towards the latter, since they don't go away after my form has been submitted.
The only thing I suspect might be impacting the functionality is that the form is created through Ajax.BeginForm().
Even still, shouldn't the ValidationSummary disappear right as I hit the submit button?
You can make it hide on form submit in your javascript. If you inspect element on your validation summary, you'll notice it changes styles from .validation-summary-valid to .validation-summary-errors if there are any errors. So this makes it easy to hide.
e.g.
$('#formName').submit(function() {
if ($(this).valid()) { // checks form is valid.
$('.validation-summary-errors').hide(); // hides it
}
});
This is an example of something I've used prior, hopefully it helps anyone who finds this. I kinda disagree with the accepted answer as it breaks the usability of the summary later.
$("form#AJAX_FormA").on('submit', function (e) {
e.preventDefault();
$(this).validate();
if ($(this).valid()) {
$('.validation-summary-errors ul li').attr("style", "display:none"); //Hide
$('.validation-summary-errors').removeClass("validation-summary-errors").addClass("validation-summary-valid");
ajaxGenerateList($(this).serialize());
}
});
With the arrival of jQuery Mobile 1.3, the .navigate() function has been added. I've heard that is the recommended way to change pages, and it seems they addressed the issues of transferring data between pages.
The problem is, since it has been simplified, how do I access the other options that changePage offered? I would really like to use the {data} portion of the .navigate() but I would also like to set a few options that I do normally with changePage (such as transition, direction, etc).
I currently have a "router" that listens for all navigate events, then passes along any data that it receives on to the next page (doing some other simple logic as well, like setting up the views controller).
Is there some hidden properties in the [,options] that I would be able to set up simple things like direction and transition?
$.mobile.navigate is still a new function, according to code comments it is also a work in progress.
Transition is active among hidden options;
$.mobile.navigate( "#bar", { transition : "slide", info: "info about the #bar hash" });
Working example: http://jsfiddle.net/Gajotres/g5vAN/
On the other hand, change to direction reverse is still not implemented, default false value is applied.
The other way would be to use:
$.mobile.pageContainer.pagecontainer("change", "target",
{transition: "flow", changeHash: false, reload: true})
Link
Use the Pagecontainer widget added in v1.4.
$(":mobile-pagecontainer").pagecontainer("change", "jquerypageIdentifier",{ options in key value format } );
e.g
$(":mobile-pagecontainer").pagecontainer("change", "#nextpage",{ transition: "slide",role: "dialog" } );
I added the following code to change the hash to the tab name:
$("#tabs > ul").tabs({
select: function(event, ui){
window.location.hash = ui.tab.hash;
}
} );
This works fine in FF3 but in IE7 it moves down the page (depending on the tab selected anywhere from somewhere near the top of the page all the way down to the very end of the page).
I tried changing it to:
$("#tabs > ul").tabs();
$("#tabs > ul").bind("tabsshow", function(event, ui) {
window.location = ui.tab.hash;
})
This leads to identical behavior in both IE7 and FF3, which moves the page down to the top of the selected tab.
I would like the tab to be changed, the hash to be updated, but the page not moved at all, which is how it works in FF3 in my first example, but not in IE7.
Thanks.
Notes: JQuery 1.3.1 / JQuery-UI 1.6rc6
If there's an element on the page that has the same id as what you're setting the hash to, for instance you're trying to set the browser hash to #cars and there's already a div#cars on the page, the browser will scroll you down to where that div is.
To my knowledge, there are 3 possible workarounds
1) Change the browser hash to something else such as #thecars.
2) Change your existing markup in some similar manner.
3) On some event, changing the id of your similarly named markup, then changing the browser hash, then rechanging the name of markup back to it's original value should also theoretically work. This is obviously a bad and slow workaround, just thought I'd mention it.
You could try having a "return false;" after you set the window location but I can't be sure.
Unfortunately, your problems won't end there. There are other issues with navigating back and forth across multiple browsers--nothing may change, page may reload, page state might be mangled, javascript may get reinitialized etc.
You may want to have a look at Tabs v2 which uses the History/Remote plugin though it has not been updated for jQuery 1.3+.
This demo is easier to understand. If you look at the javascript source, you'll notice the use of iframes to handle states.
There is also the History Event plugin and the jHistory plugin to achieve what you want.
Would like to hear back how things turns out and what solution you went with.
What Chris suggested worked for me, had no clue even a div could link via the #. So my solution is quite simple, in the show: event handler, I do the following, it's not perfect in that back button won't be in history, but that's another job for BBQ history plugin. All my divs simply have id="tab-cars", id="tab-trucks"... strip out the 'tab-' part and put it into the url hash.
var name = ui.panel.id.substr(4);
location.hash = '#'+name;