my div toggling script works if there is only one set of elements to toggle, but not when there are multiple instances per page. need multiple divs to toggle independently/separately.
http://jsfiddle.net/pixeloco/2zCe5/
$(function(){
$('.showFull').click(function() {
$('.targetDiv').hide();
$('#div' + $(this).data('target')).show();
});
});
because the final code will be output dynamically via the wordpress loop, a solution using data-id's (such as in this threads accepted answer How to create multiple instances of show/hide div in jquery?) appeals to me because i could populate that with the post id.
unfortunately i don't have enough JS knowledge to tweak that solution to fit my needs, hoping someone can help point me in the right direction. thanks!
Use Jquery traversing to go up to the parent 'storeitem' level and then work your way back down. This way, all the toggling stays within the given storeitem:
http://jsfiddle.net/2zCe5/1/
$(function(){
$('.showFull').click(function() {
$(this).parents('.storeitem').find('.targetDiv').hide();
$(this).parents('.storeitem').find('#div' + $(this).data('target')).show();
});
});
There's probably of more graceful way to write it but this is the idea.
Related
Excuse the confusing language but hopefully this makes sense: (see code for more clear explanation)
I have a requirement to display a list of "spare parts" in an sap.m.Table but there is the ability if one of these "spare parts" has a related "spare part" (e.g. A heavy duty version, a light version, etc) , that you can click a button on the row and display these related "spare parts" by inserting them immediately below the "spare part" in question.
While I can get the sap.m.Table doing what I want to do, I would like to take advantage of templates and binding to create a temporary sap.m.Table; bind it to the relationship that returns these alternate spare parts; and reuse the template for a row to give me an array of ColumnListItems which I can insert into the Table at the right place.
Unfortunately, doing this, a sap.m.Table has a feature that if it is not displayed, it doesn't actually make the Odata call and leverage the template function.
To explain possibly much clearer, refer to this jsbin:
http://jsbin.com/sihofu/4/edit?html,js,output
Any better ideas on how to generate template output for a binding without using a sap.m.Table; or alternative, getting the sap.m.Table to make the call without placing it on the screen visible (temporarily)?
The specific code to look at is as follows:
var oTable2 = new sap.m.Table();
oTable2.attachUpdateFinished(function() {
console.log("But this one doesn't");
// What I'm trying to do here is insert these entries below Key 1
});
oTable2.bindAggregation("items", {
path: "/ExampleSecondaryValues",
template: oTemplate,
});
Thanks,
Matt
Back from Holidays now and solved this problem with a bit of brute force by simply enhancing/extending the sap.m.table control slightly.
The problem was if the control was invisible, nothing was rendered, and some optimisation within UI5 core means that in the case nothing is rendered, the AfterRender event is not called on the control and this event is what fires the UpdateFinished event.
I won't debate whether that optimisation is appropriate or not, but to fix this I simply extended the table control with a new control which looks like as follows:
sap.m.Table.extend("my.InvisibleTable", {
renderer: function(oRm, oControl) {
oRm.write("<span");
oRm.writeControlData(oControl);
oRm.write("></span>");
}
});
e.g. Simply always rendering something in the render function, causes the AfterRender event to be called; which in turns allows the sap.m.Table to fire the UpdateFinished event which allows me to then safely get the rendered template items to insert in my visible table.
Would love to know a much better way of doing this (possibly using the template control or similar), but this works okay to solve the problem.
Cheers,
Matt
I have divided form in to two sections: sec1 and sec2. Each section is part of a div named as sec1Div and sec2Div. Based upon some selection one of div is hidden. But the problem is that still fields in hidden section are submitted. Please suggest a way so that all of fields in a div are not submitted on submit.
There are several ways to do that. You can hook a function to the form submit's event, or you can remove the name attributes of the fields inside the hidden div. You can also disable the fields, by setting disabled="disabled".
If you are using jQuery, you can do those examples.
To disable all fields in the hidden div, you can do something like:
function hideDiv(el) {
$('input', el).each(function(){
$(this).attr('disabled', 'disabled');
});
$(el).hide();
}
And, the appropriate show div function:
function showDiv(el) {
$('input', el).each(function(){
$(this).removeAttr('disabled');
});
$(el).show();
}
Please remind that this is just a code example. But you can take the idea from that.
The reason this is happening is because the elements are still within the form element. Hiding a div using CSS won't change this - they're still present in the DOM.
It would likely be easiest to add a hidden input field to each div that can be used to identify server side which one you should be processing. You can then simply ignore the data from the hidden form.
If you really must stop the data from being posted, it's a little messy but you could move the hidden div's contents outside of the form element so that the fields won't be submitted. If you wanted to display the div again, you'd then need to move the fields back in. Depending on how complex your CSS is, this could cause problems in some browsers, so I'd advise using my first suggestion.
I have a problem with my firefox extension
I have a XUL popup panel with a hbox for the tag cloud, and a JS code to add divs to this hbox:
<hbox id="tag_base" ondblclick="alert('done')"/>
JS:
var root = document.getElementById('tag_base');
var tag = document.createElement('div');
tag.textContent = 'test';
root.appendChild(tag);
var rect = tag.getBoundingClientRect()
alert(rect.top)
I need to get the dimensions of each added div, however, getBoundingClientRect simply refuses to work.
If I remove alerts, it's always zero.
With alerts the story is different:
The first time the alert is called it returns zero, although the div appears on the screen.
Any subsequent alerts return the correct coordinates.
If I set a breakpoint in Chromebug, everything is reported correctly.
If I do not interupt the execution in any way, and run a loop, only zeroes got returned.
This has got me quite confused.
Calling "boxObject" produces the same results, while "getClientRects[0]" is undefined on the first call.
Any hints on what might be causing this will be greatly appreciated.
Note :
Caution, if you use getBoundingClientRect with an element which has display:none then it will return 0, anywhere in the dom.
Although I can't find any documentation on this seemingly fundamental issue, the problem you noticed is most likely because the layout (aka "reflow") process has not yet run by the moment you ask for the coordinates.
The layout/reflow process takes the page's DOM with any styles the page has and determines the positions and dimensions of the elements and other portions of the page (you could try to read Notes on HTML reflow, although it's not targeted at web developers and probably is a bit outdated).
This reflow process doesn't run synchronously after any change to the DOM, otherwise code like
elt.style.top = "5px";
elt.style.left = "15px";
would update the layout twice, which is inefficient.
On the other hand, asking for elements position/dimension (at least via .offsetTop) is supposed to force layout to return the correct information. This doesn't happen in your case for some reason and I'm not sure why.
Please create a simple testcase demonstrating the problem and file a bug in bugzilla.mozilla.org (CC me - ***********#gmail.com).
My guess is that this is related to XUL layout, which is less robust than HTML; you could try creating the cloud in an HTML doc in an iframe or at least in a <description> using createElementNS to create real HTML elements instead of xul:div you're creating with your current code.
Be sure the DOM is ready. In my case, even when using the getBoundingClientRect function on click events. The binding of the events needed to happen when the DOM is ready.
Is it possible to create Ajax.ActionLink which has instead of text, the whole DIV?
I'd like to map div on Ajax.ActionLink
I don't think that this will work using the standard MVC Ajax scripts. I believe that the MVC javascript is created to use an <a> element by default. On a different note, embedding a div tag within an <a> is not valid XHTML. What are you trying to achieve?
Using Jquery is probably the easiet way you want to go. As an example:
<div onclick="SomeAjaxFunction()">some div content</div>
function SomeAjaxFunction()
{
$.get('<%= Url.Action("SomeAction", "InSomeController") %>', function(data) {
$('.result').html(data); // assuming a partial view
alert('Load was performed.');
});
}
However, if you are dead set on using MS Ajax, to work with divs, you need to possibly look at the Sys.Mvc.MvcHelpers._asyncRequest function and do some of your own re-wrapping to make it usable. I have not tried or tested this, so use at your own risk. (Stick with the Jquery, there is far better help and support available.)
The CollapsiblePanelExtender seems primarily designed to collapse/expand things in response to user mouse events. Is there also a good way to get the extender to collapse/expand things in response to client-side javascript?
In my particular case, I have a number of CollapsiblePanelExtenders (and their corresponding Panels) on a page, and I'm wondering if I could implement an "expand all panels" button by doing something like this strictly on the client side:
for each CollapsiblePanelExtender on this page, call somethingOrOther(extender)
I can implement this logic server-side instead if I did a full postback, but my page takes a long time to load, and so this doesn't seem like it would provide a very slick user experience. Thus I am interested in doing expand/collapse client-side.
It seems like this isn't a use case the AJAX Control Toolkit people had in mind, but I thought I'd check.
Write the following code in the OnClick event of Image/button
<asp:Image ID="img1" runat="server" OnClick="ExpandCollapse()"/>
function ExpandCollapse() {
$find("collapsibleBehavior1").set_Collapsed(true);
$find("collapsibleBehavior2").set_Collapsed(true);
}
Hope this helps!
I have a partly working solution now.
I followed Ian's suggestion and looked through the toolkit source. In CollapsiblePanelBehavior.debug.js, you can that expandPanel() is apparently intended as part of the public interface for the behavior. There's also a get_Collapsed(). The key to accessing these behaviors in javascript seems to be setting the BehaviorID property on your CollapsiblePanelExtender tags in ASP.NET.
I modified the repeater on my page so that the BehaviorIDs are predictible, along these lines:
<ajaxToolkit:CollapsiblePanelExtender
BehaviorID="<%#'collapsebehavior'+DataBinder.Eval(Container.DataItem,'id')%>"
ID="CollapsiblePanelExtender" runat="server" />
This results with behaviors named collapsebehavior1, collapsebehavior2, collapsebehavior3, etc..
With this done, I'm able to expand all the collapsible panels on the client as follows:
function expandAll() {
var i = 0;
while (true) {
i++;
var name = 'collapsebehavior' + i;
var theBehavior = $find(name);
if (theBehavior) {
var isCollapsed = theBehavior.get_Collapsed();
if (isCollapsed) {
theBehavior.expandPanel();
}
} else {
// No more more panels to examine
break;
}
}
}
I'm sure using $find in a loop like that is really inefficient, but that's what I have so far.
Also, it doesn't work on Firefox for some reason. (On FF only the first element expands, and then there's a Javascript error inside the Control Toolkit code.)
This will all seem extremely ugly to all you javascript pros. Maybe I'll clean things up later, or you can help me out.
You can also just toggle the panels to switch between collapsed/expanded states:
function toggle() {
var MenuCollapser = $find("name");
MenuCollapser.togglePanel();
}