I'm not entirely sure how to post this question, but here goes...
I have a web app that has a list of sortable items. I sort them ajax style using Sortable. That works like a charm. I can drag and drop the items till my heart is content.
At the same time, there is a button that allows for the creation of new items on my list. This is also ajaxified and works for the most part. The new item appears on my list anyway, and firebug shows that the code being rendered is exactly the same as the other list items. Oh and it is contained in the correct list.
The problem is that the new item is not draggable/sortable/whatever. I can't do anything with it unless I refresh the page. Any ideas why this is the case or how I can get around it? I'd really like to solve this.
I tried to paste code in here, but couldn't quite make it work, so I went with pastie. Anyway, here is the code for a page with 2 sortable items. This is a fresh load and everything works as expected.
http://pastie.org/432585
In this one, I have clicked the button that creates a new section, but not refreshed. So the first 2 sections are DnD-able, but the new one is not...
http://pastie.org/432591
I'm using ruby and rails to do the ajaxing here and admittedly, I'm not very familiar with how it should work. But I believe this behavior comes from prototype.js and maybe dragdrop.js.
On completion of the ajax call that causes the new element to be injected into the page, the new element, I imagine, needs to be bound to the DOM, and delared as a Sortable.
Would be great if you could show us some code, or at least let us know which library(s) you are using for ajax and Sortable elements.
Related
DISCLOSURE: Until this project, I hadn't coded anything since 2000. While I am a quick study, a lot has changed. So, go easy on me?
I'm working on tweaking the UI for my web store. On both the cart page and on the item pages there are events (i.e.: change of quantity and add to favorites) that have to refresh elements of the DOM, like the total price. The issue is that when it refreshes that, there are other elements like the action button or a couple of the DIV containers like the table that the quantities are in get refreshed too.
I'm using CSS and JQuery to tweak the UI since I only have front-end access to editing anything. If I edit things through CSS I'm fine, but any JS work is thrown out. I'm adding classes to existing elements and removing the ones I don't want.
When they are refreshed, the original classes come back and mine are gone.
For example, here's a link to the page: https://billingsley.orderprintnow.com/ProductDetails.aspx?TemplateOrderItemId=0a491fc1-d9c2-44b4-9a16-32ab3ee89b08&PortalId=1f5a8f5f-344e-40da-aa93-387e73c1c82c
the button is pink at first, but if you click on a radio button to change the quantity or click the heart at the top to add/remove from favorites the button will change to the default Bootstrap version. I don't want that to happen.
Any ideas on what to even research to find a workaround? Feels like if I could mark certain elements to be isolated from the refresh life would be easier. Thanks in advance!
I've been stuck in this problem. I am using fuelux treeview to display a list of categories and folders. What I want is to display the expanded treeview on page load. I can't seem to achieve this. I have found out that the tree folder must be clicked before the folder items are populated. So i tried to use
$('.tree-folder').trigger('click');
to trigger a click so that it may expand automatically. But this doesn't seem to work. I've tried
$('.tree-folder').click();
but it wont work too.
So how do you automatically trigger a click or just how do you automatically expand the fuelux treeview? Any ideas? Thanks in advance.
You'll want to makes sure you are triggering the click event on the correct element.
https://github.com/ExactTarget/fuelux/blob/3.2.1/js/tree.js#L35-L42
For Fuel UX 3.2.1 (current as of answer) run the following in the console on http://getfuelux.com/javascript.html#tree-usage for an example.
$('#treeIllustration .tree-branch-name').trigger('click')
This triggers the openFolder method which you could call directly.
https://github.com/ExactTarget/fuelux/blob/3.2.1/js/tree.js#L198
At this point after loaded.fu.tree triggers a method could be created/called to climb the tree recursively and call openFolder
This would be a nice enhancement. Please submit an issue so that it can be prioritized. If you come up with a good solution feel free to submit a pull request.
https://github.com/ExactTarget/fuelux/issues/new
I am trying to help a friend troubleshoot some strange javascript issues in SharePoint 2010, but I'm confused so far.
I have a simple page with several divs, each of which has a header and starts displayed. Some simple jQuery adds an event handler to the header such that when it is clicked, the text of its matching div is hidden. This all seems to work fine. However on checking in changes to a page, very large attributes are added to each div that seem to correspond with some sort of jQuery event handler. This happens every time a page is checked in (a new attribute is added each time there is a check-in, not replacing the old one).
For example, in one div, as one of checkin:
jquery110106221769366327998="47"
appears. Since there have been several checkins, there are tons of these. Other divs are populated with lots of 'sizzle' attributes like below.
sizzle-1386877979872="[object Object]"
A div either has sizzle or jquery attributes but not both. The 'sizzle' attributes have only been appearing as of a few months ago, it was only jquery before.
I found a similar problem at Sharepoint 2010 / Jquery - Multiple attributes added in content Editor webpart edit / save, however the only answer seems to be fairly messy script solution that does not seem to address the root of the problem.
Has anyone run into this issue before / have a sense of where these attributes are coming from and how to prevent them? They seem to be serving very little tangible purpose, and make pages large and tedious to edit. Any help is greatly appreciated.
I'm new to Ajax and was told need to use it for what I'm trying to accomplish here.
Here is the website... http://modocom.ca/gillons
If you scroll down up will see a section called Find an Office with drop down menu in it. What I need is for when someone click on for example Emo in the dropdown menu the location info from.... http://modocom.ca/gillons/emo goes under the dropdown and so on for each location in the dropdown and also when your on the Emo page for example you click on the dropdown menu and can choose different location and get new info as well for selected location.
Hope that makes sense and hopefully someone could give me a hand.
Thanks,
Mike
OK, I'm not going to write code as it looks as though you haven't actually tried anything yourself yet.
However, the sequence of events, one version of them anyway, might look like this.
Using jQuery, put a change event on your dropdown.
When the event triggers, and this depends on your backend as you have not spcified APS.Net, MNV, Java etc, you need to post back to a code file of some sort and pass in the value within the dropdown.
From there, in your c#, java, pythod, whatever, code, take that value, generate some HTML and return that HTML to the client.
At the client, you accept the HTML and fill say a DIV with the returned HTML.
If you are using MVC, you can return a PartialView which is a better design.
I have a simple rails app with a model Task, which has 10 rows. It does not matter what's inside this table. On the index page I can see all 10 elements and I need to arrange them in proper sequence, when I did this, I should see a message "Done".
If I understand correctly this should be implemented in javascript, because page should not be reloaded, right?
I want to be able to rearrange the elements via drag and drop.
How I can realize that function?
I would start with here -> http://jqueryui.com/demos/sortable/
You can sort and its quite simple as there great examples on the site how to do this and hook into events.