I have a view for my model, and in the initialization I use the following code
initialize: function (){
_.bindAll(this, 'render');
this.listenTo(this.model, "change", this.render);
this.$el.draggable({
opacity: 0.5,
containment: "parent"
});
this.$el.resizable();
this.$el.selectable();
},
Although draggable works, resizable and selectable do not (I haven't tested other jQuery UI interactions to check if they work). I tried placing this.$el.resizable inside the render function, but that wouldn't work either. I'm using jQuery 1.8.3 and jQuery UI 1.9.2 (I do include the necessary jquery-ui.css in my html). When the view renders, I inspect the element in my browser and it does indeed have a class of ui.draggable, ui.resizable and ui.selectable as it is supposed to, yet it's only draggable.
Trying to work around this issue, I've used CSS3 property resize: both in the class of the element I want to resize and it works just fine, but I'd really like to utilize jQuery UI for resizing, and I'm curious why it won't work.
Any ideas what I might be doing wrong?
EDIT: Added jsfiddle example http://jsfiddle.net/IgnorantUser/u7JkX/ the problem described is in the initialization of the ButtonInCanvas backbone view
ok so, apparently using this.$el.html(this.template(this.model.toJSON())); in my render function on the ButtonInCanvas view was causing the problems. The aforementioned gets the "caption" attribute of the model, and passes it into the view as html content.
There solution is to put this.$el.html(this.template(this.model.toJSON())); in the init function.
In case it's needed to be done in the render function, there should be another div, within the one we want to resize, that will get the caption property from the model. In the following JSBIN you can see a solution using a div inside the button. (thanks to user shoky, from the #jquery freenode irc channel for the implementation and his heads up)
http://jsbin.com/uxequq/1/edit
I don't really understand why the problem was occurring though (maybe this.template(this.model.toJSON()) in my render function, was causing a re-rendering of the view?) so feel free to point me out why, and help me understand further!
Cheers!
Related
I have a current page which uses JqueryUIHelpers to render JQuery UI DatePicker.
I've followed the tips on:
JqueryUIHelpers - Getting Started
Everything was working fine until I started moving the codes to a partial view.
The datepicker is no longer rendering on click.
I've read around that the same issue happens with normal JQueryUI usage, and I should move the JavaScript that renders the datepicker to the base view (something like $('#date').datepicker()).
However, the JQueryUIHelpers code is like:
#Html.JQueryUI().Datepicker("date")
Can I know if there's anyway to get it working?
Thanks to Kartikeya's suggestion, managed to get the datepicker working.
First I have the DatePicker defined:
#Html.JQueryUI().Datepicker("date")
and in the partial view's document.ready() function, I re-initialized the DatePicker once more:
$('#date').datepicker();
and now everything's working fine.
edit:
thanks to Kartikeya's suggestion again. Including the JQueryUI file in the partial view will eliminate the need to re-initialize the DatePicker once more in the document.ready() function block.
What I did was to include the line:
#Scripts.Render("~/bundles/jqueryui")
in my partial view and then everything clicks.
By the way, now I know "what to do to get it work", can I know "why does it work this way"?
Well i m explaining your problem in answer section because there is no proper space in comments section.
Yes many people think that this might be a bug in partial view in asp.net mvc but it is not so if we write #Html.JQueryUI().Datepicker("date") then somewhere internally the datepicker initialize same way as :
$(document).ready(function(){
$('#date').datepicker();
});
even if we are not required to write above jquery code but datepicker initialize this way only,so this is the case if we use datepicker in views but if we use datepicker in partial view then scenario changes because partial views are generally used for dynamic content for ex :- if we want to change some html dynamicaly then we use partial view and the dynamic html returned by partial view is displayed inside view,so here the problem arises because for partial view no document.ready() event fire to initialise the datepicker so this problem occurs and my two comments and your two answers can solve it.In above lines i m again and again writing dynamic html because this problem is because of this dynamic html only in order to overcome this we can also use event delegation i.e .on() in jquery or intialize datepicker as(give all datepicker textboxes a class say 'textbox') :
$('body').on('focus',".textbox", function(){
$(this).datepicker();
});
Thanks..!!
I've been trying to create an horizontal radiobutton horizontal list, but somehow I don't get the same visual result as when done with the data-* attributes.
If I do it with code I get squared buttons, while using the attributes I get a nice rounded corner toolbar.
Here is the code I use for creating the button list:
$(element).controlgroup({ mini: true, type: "horizontal" });
which should be the same as the one I use with the data-* attributes:
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
I've posted a jsfiddle to show the result
http://jsfiddle.net/simonech/zeDt4/3/
Can someone shad some light on this strange behavior?
Thx
Simone
To make them look the same, try this:
$("#mycontrolbox").controlgroup({ mini: true, type: "horizontal"});
$("#mycontrolbox").attr("data-role", "controlgroup");
updated jsFiddle - http://jsfiddle.net/zeDt4/4/
Now, why is this.
I think that jQuery mobile is actually not build upon jQuery UI even though it is currently very close. jQuery mobile is using those data-** attributes to select what is going to be a role of each tag. When the element is added to the html, jqm reads the content and based on what is in these data-role attributes, it decorates / replaces / the current content with its own. This is more about what is done to the element in order how it looks.
On the other hand, when you call
$("#mycontrolbox").controlgroup();
This does create a jQuery component allowing you to use the methods of that component. etc.
This is close to how the component behaves from the script point of view. This does not, however, add data-role attribute to the element itself.
I'm having an odd problem with jQuery draggable this morning, I wonder if anyone else has come across this.
I have many small divs inside a large div. They are absolutely positioned: "position:absolute" in CSS for their class, with the actual position itself calculated and set in JS on demand.
Now I'm adding functionality to allow these divs to be draggable.
But, as soon as I make one draggable, it is given "position:relative" directly on the element, which as you might imagine, seriously messes up the on screen position.
Does anyone know why it changes the "position" like this or how to tell it not to?
EDIT:
Just realised there is a rather obvious answer staring me in the face - !important on my position:absolute! This seems to fix it. BUT I'm still interested if anyone knows why it sets "position: relative" like this (and doesn't either make it configurable or check first if it needs position)...I'm wondering what problems I've just stored up for myself ;-)
"I came across the same problem today. The reason was I was applying draggable() on a dynamically created element. I was 'later' appending it to dom. The element should be in dom when you apply draggable() (if style is being applied by a class). In short, when it finds no position attached with the element , it adds relative." - Jashwant
Firs do: .append(jElement) Then: jElement.draggable()
For some reason Jashwant put his answer in the comment to the question. So I thought it will be convenient to other to repost it here.
It also happened to me, but only on Chrome. Reason?
It was like this:
$("#div-popup").draggable({ handle: ".top", containment: 'document'});
Then I removed the containment parameter, like this:
$("#div-popup").draggable({ handle: ".top"});
So it's about the Browser (Chrome in this case), which sets position to Relative when you specify which containment the element will be draggable.
in my case it seems to be a race condition between the stylesheets and javascript loading...
i realized i'd made the mistake of including the stylesheets AFTER the javascript in the document head. they should be included BEFORE the javascript because $(document).ready() does not account for the CSS being loaded by the browser: https://stackoverflow.com/a/1324720/3633109
I need to be able to dynamically replace the radio buttons in a controlgroup. I've come up with a solution, but I'm wanting to make sure I'm going about it the right way. Here's a jsFiddle.
Should I be manually modifying the classes after calling .checkboxradio() on each of the newly-created radio buttons, or is there a method in jQuery Mobile somewhere that will help me accomplish this?
Please note that the jsFiddle here works as I need it to. I'm asking if there's an easier (or more idiomatic) way to update the dynamically-created radio buttons' visual styles to conform to the controlgroup style.
Content should be added to the DOM before jquery mobile enhancement, for instance by binding to the page beforecreate event instead of the page pagebeforeshow. This way your content will be properly enhanced.
As for dynamic content, you can enhance it as soon as it has been inserted in the DOM. See this modified fiddle.
try this:
$('#creneauListPage #fieldcontain input').checkboxradio();
$('#creneauListPage #fieldcontain .ui-btn').removeClass('ui-btn-corner-all');
$('#creneauListPage #fieldcontain .ui-btn:first').addClass('ui-corner-top');
$('#creneauListPage #fieldcontain .ui-btn:last').addClass('ui-corner-bottom ui-controlgroup-last');
I am trying to get a simple jQuery UI dialog to work in an ASP.Net project. I have some buttons inside the dialog's <div>, but they weren't posting back. Upon closer inspection, for whatever reason when making the <div> a panel it moves it in the DOM so that it is the last tag before </body>. This would all be fine and dandy except for it also moves it outside of the <form> tag which is needed so that the buttons can do a postback.
What is the purpose of this behavior and how can I override it?
An example is here: http://jsbin.com/olumu4/
Looking at Firebug though I get this:
alt text http://img80.imageshack.us/img80/9049/dialog.png
This is a common problem with jQuery/ASP.NET.
After you assign your modal like this
$(".modal-window").dialog({
modal: true
});
do this
$(".modal-window").parent().appendTo($("form:first"));
If you have more than one modal on a page, I've found it doesn't work as expected, so in that case when you call the open method on the modal, do this:
$('.modal-window').dialog('open').parent().appendTo($('form:first'));
If you want to have it auto-open. You can append it right after the model is assigned.
$(".modal-window").dialog({
modal: true
}).parent().appendTo($('form:first'));
Hope this helps,
Marko
I have had this problem before, an option is to setup an even on the $(form).submit that appends what is in the dialog to the form.