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.
Related
I'm getting this appearance in my form buttons - notice the double text. I'm using a style sheet generated from jQuery Mobile Download Builder (navigation, location push and transitions selected only). It seems to be jQuery Mobile that is causing this. I've tried data-enhanced="false" on the page div but doesn't seem to do anything. I don't want any styling from jQuery, just the navigation for graceful degradation. For styling, I'm using Bootstrap.
See button - http://ma.rtyn.biz/bizness/homepage2/form_button.png
<button type="submit" class="btn btn-default">Add</button>
Can anyone tell me how I can stop this from happening? I'd prefer to use a button tag rather than a link as I want it to submit the form without JavaScript.
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
Im developing an HTML generator using jQuery through a drag & drop interface. Currently the user drags "block" elements onto an invisible div overlaying an iFrame (so that it appears to be dropping onto the iframe). When the element is dropped on this invisible div, the corresponding HTML is appended to the iFrame body.
Next, i want to give the user the ability to select an element in the iFrame, and change the properties of the selected element.
I have appended CSS imports and the jQuery/jQueryUI scripts into the iFrame head.
The issue I am facing is when the appended iFrame element is clicked, the jQuery select lasso only appears when the mouse leaves the iFrame, and on it appears outside of the iframe.
The reason I am using the iFrame is so when the code is "generated" for the user, i can just append the iFrame body content to a dialog box.
Has anyone faced issues with the iFrame and jQuery before? and is there any documentation/javaScript library that can assist me in this process?
Thanks!
Rory
The "fix" around this issue is convoluted, but works in my situation.
I created a click event on each added element in the iframe like so:
$('iframe').contents().find('.elem'+blockVal).on('click', function(){
$('iframe').contents().find('.selected').removeClass('selected');
$(this).addClass('selected');
//alert('you have selected the block with class element'+ blockVal);
});
blockVal is a variable passed in from the function that appends the html to the iframe. The above function just adds a click listener to each element appended to the iframe. When any of the elements are clicked, they are given a class of 'selected', and any other element that already has that class, loses it.
Im sorry if that doesn't make any sense.
My advice to anyone doing something similar: Don't use an iframe.
As I was developing an application with jQuery (latest version), my firefox browser decided to update itself to version 6. Right after that, I got the standard jquery ui "sortable" function not working properly. I tried on the jquery website and same thing. Tried with the demo files downloaded with the jquery ui bundle => same result. No hacks, no custo, just vanilla.
Here are the symptoms: starting the sorting (by clicking and dragging the mouse around), the sortable element sticks to the mouse pointer. Fine until there. But when releasing the left mouse button, the sortable element drops on its final position and suddenly, as I move the mouse elsewhere (no mouse buttons clicked) the last sorted element sticks back to the mouse and moves with the pointer.
Clicking somewhere on the page moves the sortable element back to the final dropped position but as soon as I move again the mouse, that element sticks again and does not drop.
Has anyone come over such a bug with firefox 6?
FYI, this sortable function was working like a charm on FF 5.0
All right guys!! I found the root cause of such a weird behaviour!!! Its name is "FireQuery 1.0" addon for Firefox.
When I saw Guntram telling me that he is using FF6 with the latest version of jQuery + jQuery-UI with no issues at all, I wondered if that could come from an addon. So I disabled everything and re-activated them, one by one, with a restart after each enabling. I found the guilty addon: FireQuery 1.0.
Not saying that this addon is not good but at least, if you ever come with the same issue as mine, at least now you may know the root cause. ;)
to me the sorting works alright.
the elements dont move unexpectedly.
when i have an item in an element, like a button or a textfield, nothing happens.
if i right-click into the field or button the cursor appears (the button is clicked).
and when i escape the windows right-click options menu i can type into the text field...
so still strange behaviour. i don't know how it works on ff5, i am on ff6, latest jquery version.
EDIT:
after i found this:
http://weblogs.asp.net/jeffwids/archive/2011/01/31/jquery-textbox-in-sortable-is-not-clickable-selectable.aspx
i took a closer look at the cancel option provided by the jquery-sortable.
i finally could solve it like this:
<ul id="sortable">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><input type="text" value="text" ></input></li>
<li class="ui-state-default" style="height: 70px;"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><textarea cols="20" rows="3">textarea</textarea></li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><button>button</button></li>
</ul>
<script>
// initialize the sortable including the cancel option
$( "#sortable" ).sortable({cancel: 'input,button,textarea'});
</script>
I have the same problem. After a day's worth of testing I have found out what the issue is and what kicks this behaviour off.
Let me first show you what we're using the sortable class on.
-----------
| Header |
-----------
| |
|Contents |
-----------
Header is draggable. If you quickly or erratically move the mouse cursor while dragging and the mouse cursor somehow gets moved off the header (e.g. onto the contents), the div sticks to the cursor.
To re-pin the div back onto the page, you can again quickly move the cursor and try to get it back on the header. Then it seems the events are re-attached and you can place the div back on the page.
To sum up, the mouse shifts off the div with the sortable events attached so the object is not seeing the mouseup or click events that place the object back on the page.
Unfortunately, I have no idea how to fix this.
EDIT
We implemented a solution which works for us, but may not be ideal for everyone. Simply .trigger("mouseup") on the draggable element when a click event occurs on any element that should not be dragable. This will snap the draggable element back onto the page.
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.