Are there any issues surrounding the use of contenteditable div elements in jQuery UI that lead to the caret not appearing. Here is a bit of code to show what I mean
<div id='diaHTMLEd' style='display:none'>
<div id='divRTE'></div>
<!--iframe src='xrte.html' height='300' width='500'></iframe-->
</div>
function openHTMLEditor( {
$('#diaHTMLEd').dialog({
height:200,
width:450,
modal:true,
open:addRTE
});
}
function addRTE() {
$('#divRTE').html("<div contenteditable='true'>Testing</div>");
return;
}
Explanation - I am opening up a modal jqUI dialog and in its :open event am adding a contenteditable div element to an inner div in the dialog. The text shows up but it does not become editable when clicked. If I replace that code and use the commented out iframe instead which contains an contenteditable drive everything works just fine.
It looks like there is something that stops content from becoming editable inside the dialog.
This question may be lacking in some detail but given the complexity of my application I am not really in a position to provide more representative code. Any help would be much appreciated.
A note for anyone running into this thread. After much work I eventually discovered the issue. Using contenteditable with jQuery UI dialogs is not by itself a problem. The problem in my case came down to some sort of conflict with the excellent jstree plugin which I am using.
As a general rule - in complex applications that use multiple plugins you are probably better off sandboxing contenteditable content inside an iframe
Related
I am stuck on this, I am trying to unhide / hide jquery mobile flip switches using knockout. When knockout action is applied the jquery mobile controls stopped working. Could you please help me on this
here is the code
target.formattedValue(target());
return target;
and jsFiddle where the third control would hide if female selected but when male selected again the control disabled and not working
http://jsfiddle.net/FU7Nq/45
San.
When inspecting the rendered DOM of the following element:
<div data-bind="if: isMale">...</div>
you can see that after the radio button is changed to female, then the entire rendered HTML of that DIV is removed. Then, when switching back to the male, the content of that DIV is rendered back, but is this means that events are still attached to those slider HTML elements? I'm not sure how the way jQuery mobile attached the events, but it seems to me that this is the problem, cause you are clicking on the slider, but no action is taken. You can workaround this by recreating the Slider again:
$("#select-ifmale").slider()
Eventually this can be a bug in jQuery mobile. Sorry for suggesting this as an answer, but I don't have enough points, just to comment on your question.
I thought my external panels (jQM 1.4) were working great, until I added more content to them, and now, I can see the external panel underneath my app's home page.
If they are short, it's fine, but once they reach a certain height, you can scroll down on the home (first) page and see the panel's contents.
The new docs aren't much help :/
I've tried a lot of variations... but here's a basic example that will trigger it:
<div data-role="panel" id="imExternal" data-theme="a">
<div style="height: 1200px; background: #000;">
<p>this is the panel, code is tight and outside of any containing page divs.</p>
</div>
</div>
*update: I'm specifically seeing it in my app with a popup open, and then clicking on an input field to show the Android keyboard. It seems to resize the page, which shows content from another page (external panel) underneath it.
You should enhance External widgets manually, as they don't get enhanced when page is created.
$(function () {
$("[data-role=panel]").panel();
});
Also, elements / widgets inside External panel should be enhanced as well.
$(function () {
$("[data-role=panel]").panel().enhanceWithin();
});
Actually... DON'T use popups in external panels. Ultimately, that was the root cause of this.
I solved this by setting the css height of the page in question to the window height, which prevented the underlying panel from showing below it.
$('#page').css('height', $(window).height());
This is more of a proof of concept for myself, to fool around and learn what I can and can't do with jQuery, and I have had partial success.
I created an accordion that contains two spans, which serve as name and description, as well as a button that is independently click-able (ie, it does not open or close the accordion.)
Taking that concept, I decided to try and make the name and description editable by turning the name and description spans into text inputs / text areas, which worked fairly well.
The problem however is that when I take the same technique I used on the button and use it on the input and textarea, clicking it does not allow you to move the cursor to different positions. There does not seem to be a way for me to get around this behavior.
I tried event.preventDefault(), which does not work at all.
I tried event.stopPropagation(), which gives the partially working behavior.
and I tried return false, which worked the same way as stopPropagation.
I was wondering if anyone could provide any insight on this issue.
I included the jQuery javascript below, but for a much more concise example I will provide a jsfiddle link here (http://jsfiddle.net/Rakshasas/xFhN3/) which gives you a much more clear example of what I am doing. Note that when you click the accordion to expand it, the spans are hidden and inputs are shown. Clicking the inputs does not close the accordion, but it also does not allow you to position the cursor.
Also, if you do attempt to change the text in the inputs, closing the accordion does indeed update the spans which is the intended result. This is why I am saying my concept partially works.
Thank you.
$(function() {
$(".accordion").accordion({
header: 'h3',
collapsible: true,
active: false,
change: function(event, ui) {
var id = ui.newHeader.find('input:last').val();
$("#status").text(id);
ui.newHeader.find('div.headerContainer input.name').val(ui.newHeader.find('div.headerContainer span.name').text());
ui.newHeader.find('div.headerContainer textarea.desc').val(ui.newHeader.find('div.headerContainer span.desc').text());
ui.oldHeader.find('div.headerContainer span.name').text(ui.oldHeader.find('div.headerContainer input.name').val());
ui.oldHeader.find('div.headerContainer span.desc').text(ui.oldHeader.find('div.headerContainer textarea.desc').val());
ui.newHeader.find('div.headerContainer span').hide();
ui.newHeader.find('div.headerContainer input, div.headerContainer textarea').show();
ui.oldHeader.find('div.headerContainer span').show();
ui.oldHeader.find('div.headerContainer input, div.headerContainer textarea').hide();
}
});
$('input.name, textarea.desc').click(function(event){
event.stopPropagation();
});
$(".delButton").button({
icons: {primary: 'ui-icon-trash'},
text: false
}).click(function(event) {
//Display user friendly text
return false;
});
});
If someone is facing this issue, this is a little trick that worked for me.
PROBLEM: nested jquery accordions with input/textareas elements, cannot gain focus with normal click in Firefox (if you use jquery accordions with NO nested accordions on it, everything works fine). Confirmed by above users.
The sympton relates only to normal click (left click). If you try optional click (right click), the element (input/textarea) WILL gain focus. Weird.
SOLUTION: Just declare this in your document ready function
$(function() {
//some code ...
$("input, textarea").click( function(){
$("input, textarea").blur();
$(this).focus();
});
//more code ...
});
Confirmed (by me) working on IExplorer, Firefox and Chrome.
Seems to work fine in Chrome. This might be browser dependent.
"Clicking the inputs does not close the accordion, but it also does not allow you to position the cursor"
Also fine in Chrome.
I was wondering - is it possible to apply the jQuery UI CSS to an entire site without having to apply it individually upon elements?
So, for example, instead of having to do:
<input type="button" value="Submit" class="ui-state-default ui-corner-all" />
to all my buttons, I instead have some sort of class applied at at top-level DIV which will change the entire site whenever it can be (any element that jQuery UI can handle). If it's not possible, it's no big deal, but it would be great if it is.
Yes. You can just call
$('button').button()
from your script to select all button elements using jQuery and apply the jQuery UI button theming to them. See, for example, the sample code on the jQuery UI button demo.
I suppose you could apply it on the $(document).ready(function(){$("*").addClass("ui-state-default")});
This is not tested, so don't take my word for it.
I use this in my Index.aspx:
<%= Html.StandardOverlayCreateButton() %>
<div class="apple_overlay" id="overlay">
<div class="contentWrap">
</div>
</div>
Which is translating into this:
<button type="button">Create</button>
<div class="apple_overlay" id="overlay">
<div class="contentWrap">
</div>
</div>
When you press the button the popup with the Create.aspx occurs. Look at this -> Loading external pages into overlay
For me it seems that the overlay performance is slow.
And there is some strange behaviour, because I can nearly everytime see the old values in the popup. If I click the edit button and then close the popup and click another edit button, I can see the old values for a short time.
Is there a better approach of doing a popup using ASP.NET MVC and jQuery?
Are there tutorials?
Everything is being done client-side so the performance is purely down to JavaScript and jQuery code and nothing to do with any server-side code such as ASP.NET MVC.
You're using quite a few sophisticated effects with that popup, I see <div /> resizing animations, transparency, drop-shadows, the works. JavaScript performance has come on leaps and bounds with recent browsers, but it's performance but still be slow for doing very extravagant visual effects. Have you tried tuning down the visual effects with whatever modal popup JavaScript library you're using.
"And there is some strange behaviour,
because I can nearly everytime see the
old values in the popup. If I click
the edit button and then close the
popup and click another edit button, I
can see the old values for a short
time."
I assume the pop-up is actually loading an iframe which points to the 'Employee/Create' page. My guess is that when the pop-up is closed and then re-opened again with a different page, the previous page will still be sitting in the pop-up's iframe, and the "load-new-page/url" event isn't fired until the pop-up re-appears, hence why you're seeing the old page very briefly.
I had a similar problem to this, you need to tune the modal pop-up behaviour slightly so that it first loads the new page then opens the pop-up, rather than the other way around which is what it's currently doing. My solution to this was a bit hacky in that the page inside the iframe has an $(document).ready({}); event that called some JavaScript function the the iframe's parent to load the pop-up. eg. put this in your page that sits inside the iframe:
<script type="text/javascript">
$(document).ready(function()
{
window.parent.openPopup();
});
</script>
Then you need to define the 'openPopup()' JavaScript method in the iframe's parent (ie. the main page the lists your records).
do you really need the animation?
maybe you don't need the effect: 'apple' attribute?
Effects are slow, especially on IE.
http://flowplayer.org/tools/overlay/index.html#api
Look here - different post but answer is related to your question about MVC & jQuery.