I am creating an information dashboard to show the results of various actions for a web app.
I would like to show data in tables, organized by tabs, ie each tab is different category with corresponding table. The trouble is these tabs and tables need to be created on the fly based on an ajax response.
Right now I have this skeleton for the tabs in my html:
<div id="tabs">
<ul></ul>
</div>
From my ajax request I get all of the categories and all of the data as JSON, and in javascript:
function(data){
//making the tab links and content divs
$.each(data.cat, function(){
$('#tabs ul').append('<li>'+this.name+'</li>');
$('#tabs').append('<div id="'+this.id+'"></div>');
}
//making the tab content
//cycle through all results, adding each to the table in div of its category
$.each(data.results function(){
var selector = '#' + this.catid + ' table tbody';
$(selector).append('<tr><td>'+this.something+'</td><td>'+
this.somethingelse + '</td></tr>');
}
$( "#tabs" ).tabs();
}
This is "working" right now. It appropriately puts the data into the right divs that is creating, but the styling when I call tabs() is not taking place so I just have divs underneath each other. I know the problem -- these divs are new to the DOM and jquery isn't seeing them, but I have no idea how to fix it!
jQuery is seeing the modified DOM by the time you are calling .tabs(), if tabs is being called before you call your ajax, then using the .tabs('add'...) is the correct method to be using (see below). On a side note, you have some Javascript errors in your code, but it does work: as you posted: http://jsfiddle.net/highwayoflife/AcV3H
For adding new tabs, you should use the .tabs('add' ...) method.
.tabs( "add" , url , label , [index] )
Add a new tab. The second argument is either a URL consisting of a fragment identifier only to create an in-page tab or a full url (relative or absolute, no cross-domain support) to turn the new tab into an Ajax (remote) tab. The third is the zero-based position where to insert the new tab. Optional, by default a new tab is appended at the end.
NOTE: Tabs created dynamically using .tabs( "add", ... ) are given an id of ui-tabs-NUM, where NUM is an auto-incrementing id.
So your code may look something like...
function(data) {
$('#tabs').tabs();
...
$.each(data.cat, function() {
$('#tabs').tabs('add', this.id, this.name);
});
}
Related
I have a table on my website. I would like to give the user the possibility to easily add comments to each of the row.
For that i found a nice looking comment view on the internet.
here is an example:
<div class="popover-markup">
Popover link
<div class="content hide">
code
</div>
</div>
$('.popover-markup>.trigger').popover({
html: true,
title: function() {
return $(this).parent().find('.head').html();
},
content: function() {
return $(this).parent().find('.content').html();
}
});
http://jsfiddle.net/dzr521qs/424/
This is basically exactly what i would like to have. But... I need a form inside of the comment view to post data to my server. And since i have around 50-300 Entries in the table, it would generate a ton of code if i have to place the code for the popover for every single row.
so my question is:
is it possible to define the popover once and show always the same popover but with different content for every row?
I would like to have a small icon on every row whith which i can open the popover and give over an id to the popover to load dynamic content.
hope someone have an idea.
thanks
You can add additional attribute to your popover link (say data-target) that will point to an element you want to display as content.
You can extract data attribute value inside content() callback and use it to display different content.
Example:
// inside popover(...)
content: function() {
var contentSelector = $(this).data("target");
if (contentSelector && $(contentSelector).length > 0) {
return $(contentSelector).html();
} else {
return "<div class='alert alert-warning'>Please specify data-target attribute pointing to element in page</div>";
}
}
// in your trigger add `data-target` attribute
<a ... data-target=".content">...
Here's an updated fiddle demonstrating that solution
I want to implement a custom and simple check of the number of items that I have in the cart.
First, I load my page with a place holder div in one of my menu elements:
<div id="items_count" style="display:none;">(count)</div>
Then in my javascript file (application.js) I have the following code:
$(document).ready(function () {
$items_count_element = $("#items_count");
if ($items_count_element.length > 0 )
{
$.ajax({
url: '/get_items_count',
type: 'GET',
dataType: 'json',
success: function (response) {
// Construct the new string to display
items_count_new_content = "(" + response.items_count + ")";
// Printout to verify that we point to the correct div
alert($("#items_count").text());
// Verify the new string to display
alert(items_count_new_content);
// Empty the div element and replace the content with the new string
$("#items_count").empty().text(items_count_new_content);
// Remove display : none
$("#items_count").show();
}
});
}
});
The AJAX requested is executed with success, and the alerts display the expected text ( "(count)" and lets's say "(3)", which means i have 3 items in the cart ).
But $("#items_count").empty().html(items_count_new_content); and $("#items_count").show(); seem to not work at all, even if the functions are simple enough. Moreover, I've used them many times in the past with success...
I've tried to replace text() with html() with no success.
Any ideas what may be the problem here ?
Thanks
In jQuery, you can change a value with val:
$("#items_count").empty().val(items_count_new_content);
After debugging, i noticed that i had 2 menus on the page instead of one ( the normal menu and the sticky menu ). So my problem was the usage of the idas the selector my element. This caused that the jQuery replaced the content only for the sticky menu ( Which is invisible in the top of the page ), since we are supposed to have unique ids for each element in the DOM.
I fixed my issue by replacing $("#items_count") by $(".items_count_div")
I hope it'll help whoever encounter similar problem.
I'm writing an web application which uses twitter bootstrap and aria. I have table with sort option which looks: .
My content is dynamically loading into #content div with jQuery.html() function. When I hit F5 everything works fine, but after I load content by jQuery to my div which contains these tables, something goes wrong. Tables loses their search options and pagination bars.. like this: .
There are few functionality which stop working too. How should I load dynamic content into my #content div?
My current code:
this.getContent = function(page){
var self = this;
$('#center-column').removeAttr("class");
if (page.indexOf('&') > 0)
$('#center-column').addClass( page.substr(0, page.indexOf('&') ) );
else $('#center-column').addClass( page );
$.get( $('body').attr('id')+".php?page="+page+"&mode=ajax",
function(data){
self.fetchData( data );
}, "json");
}
this.fetchData = function(data){
if (data.redirect_url != null)
window.location = data.redirect_url;
$("#content").html( data.html );
}
Is there any method aria has and I should call after I change content of my div dynamicly?
after I load content by jQuery to my div which contains these tables, something goes wrong. Tables loses their search options and pagination bars
Use .wrap to add dynamic content around the existing markup:
$("#content").html( $(data.html).wrap("#content") )
Is there any method aria has and I should call after I change content of my div dynamicly?
Use the aria-live attribute to indicate the content is dynamic, and assertive as the value.
$("#content").attr("aria-live", "assertive")
References
JSON-ARIA
Using ARIA role=alert or Live Regions to Identify Errors
Choosing Between Special Case Live Regions
aria-live (property)
ARIA Practices: Managing Dynamic Changes
The Situation
In Sharepoint 2010 I can click on an item in a list:
And then the Read/Edit view becomes visible in that page:
My Goal
I have a WebPart on another Page where I show some items coming from this and several other lists and I want to add a read or edit link to each of them.
How can I do that?
I'm searching for a function like EditListItem('ItemId', 'ListId', ...) which will open the edit div window.
What have I tried
The a tag generated by Sharepoint on "Test Item" above is like this:
<a onfocus="OnLink(this)"
href="http://{mysharepointsite}/_layouts/listform.aspx
?PageType=4
&ListId={D0FDB54F-1DDF-4C5E-865B-ABDE55C1125}
&ID=1
&ContentTypeID=0x010800ED5176D13CCEFC4AA8D62A79985DE892"
onclick="EditLink2(this,49);return false;" target="_self">Test Item</a>
So I digged a bit into the Sharepoint JS files and found EditLink2 calling _EditLink2 which calls ShowPopup from the context (the 49) is the context no and seems to be dynamic.
I tried to fake the context but there are billions of variables and I think I can't get that to work stable.
On that page where you need to open dialog just write simple JS function for showing modal dialog, for example:
function openMyItemDialog( itemId ) {
var options = {
url: "http://{mysharepointsite}/_layouts/listform.aspx?PageType=4&ListId={D0FDB54F-1DDF-4C5E-865B-ABDE55C1125}&ID=" + itemId + "&ContentTypeID=0x010800ED5176D13CCEFC4AA8D62A79985DE892&IsDlg=1",
width: 500,
height: 500,
title: "Item view/edit"
};
SP.UI.ModalDialog.showModalDialog( options );
}
Note the &IsDlg=1 param at url
And then modify href link where you display your items.
For example:
Test item
Replace 35 to ID of your item
I know this is an old question, but there's another way to achieve what the OP was trying to do.
In a XSLT ViewWebPart, there is a global parameter named $ViewCounter.
This is the context number required by the _EditLink2 function.
So, in order to add a link to the display form and have it opened in a dialog, wrap the item in an <a> tag like this:
your item
Notice the variables $HttpVDir, $List, $thisNode/#ID and $ViewCounter (no need to hard-code any value).
My question is very similar to this topic. I'm trying to use jquery, so that when you click on a table row, it loads certain information from another page and insert as a new row below the one clicked on.
If I didn't have to load the data from another page, I could just use something like:
clicked.after('<tr><td>Something</td><td>Something</td></tr>');
If I wanted to load and insert into something other than a table, I could use something like:
clicked.after($('<div>').load("Page2.aspx"));
So how do I go about combining these two together? If I have on the first page:
clicked.after($('<div>').load("Page2.aspx"));
And have Page2.aspx returning:
<tr><td>Something</td><td>Something</td></tr>
I would get this:
<tr><td>...</td><td>...</td></tr><div><tr><td>Something</td><td>Something</td></tr></div>
Which is not valid HTML.
Any suggestions?
Use after in the callback of a get rather than load.
$('.clicked').click( function() {
var $clicked = $(this);
$.get('Page2.aspx', function(html) {
$clicked.after(html);
});
});