I have a table which displays results like the image posted below. Now I need to do some actions on each row by selecting it. There are two options I can think of,
1) We can provide a radio button for each row & a drop down on the right side to perform an action. But here i need to generate this code dynamically from a javascript file like below
function getMessage(result){
for (var j = 0; j < result.invocationResult.resultSet.length; j++) {
var tmp = "<tr>";
var resSet = result.invocationResult.resultSet[j];
for(res in resSet){
tmp += "<td>" + resSet[res] + "</td>";
}
$("#mytable > tbody").append(tmp+"</tr>");
$('#AppBody').hide();
$('#AuthBody').hide();
$('#ResTable').show();
}
}
2) Provide a link to a particular item in the row like Dispute Number & when clicked it should take me to another page where I can perform those action with a drop down. But here the links should be applied dynamically to the items in the rows. As per my knowledge we should not navigate using href as i am using worklight.
Please help me with approach and also examples.
Thanks.
So I'm not sure what is the issue you are facing with option 1...
As for option 2,
There is no problem navigating to another "page" using Worklight and jQuery Mobile, as long as you're doing it responsibly (definitely not use href). That is, not lose the Worklight context, at which point stuff will stop working.
The idea is this:
In the app's index.html you (will/should) have a <div data-role="page"> and in the case of Worklight, you will need to switch its contents with another from some other HTML file.
Here's a simplified Worklight 6.2 sample project: https://github.com/IdanAdar/Multipage-Navigation-Using-jQM
In the HTML:
load page1
In the JavaScript:
function changeToSomePage() {
$(':mobile-pagecontainer').pagecontainer('change','somepage.html');
}
Related
Gerrit used to show the ID as the first column in the UI. I'm on version 2.9 (yeah, I know, oldish, but we can't upgrade at the current time), and it's no longer visible. I know I can click on a change and see the ID or hover over a change and see it in the URL in the browser status line, but I really need to be able to see a bunch of them at a glance.
Is there any way to augment the URL I use to add it?
Go to your preferences (i.e. your-gerrit.com/#/settings/preferences) and check the Show Change Number In Changes Table option.
As I can see in this issue it was introduced in 2.10 but I remember using it earlier, if I'm not mistaken.
EDIT:
The change that itroduces it is here and it's included in 2.10. You will have to update in order to get the Change-Id column in the list.
EDIT 2:
I have created a simple JS script that will show the column with ChangeId. Just paste it to the URL bar when you are viewing the changes list:
javascript:var cols = document.getElementsByClassName("cSUBJECT"); for (var i = 0; i < cols.length; i++) { var id = cols[i].children[0].getAttribute('href').substr(cols[0].children[0].getAttribute('href').lastIndexOf('/') + 1); cols[i].insertAdjacentHTML('beforebegin', '<td>' + id + '</td>'); } document.getElementsByClassName("iconHeader")[0].insertAdjacentHTML('afterend', '<td class="iconHeader"></td>');
You can add it as bookmark if you wish and click it when you want change numbers displayed :-) Might need some tweaking, though.
I have a page that contains multiple topics in accordion.
How can I post a link (on social media or other places) so when the user clicks it can view the topic I want without making him choose the desired one to view it?
The website is built in Joomla 2.5 using its native (mootools) accordions.
A temporary solution came to my mind is to make single pages containing only the content I want, but it won't help them view the other topics contained in the same page, unless the user clicks the same category.
MooAccordion has a display option. You could use like:
window.addEvent('domready', function () {
var index = window.location.search; // get query string
index = index.replace("?", ''); // remove the ?
index = index.length ? index : 0; // in case there in no query, display first
var myAccordion = new Fx.Accordion($('accordion'), '#accordion h2', '#accordion .content', {
display: index // the actual behavior you are looking for
});
});
Read more at Mootools docs
So you could try these links as demo:
http://jsfiddle.net/brM2v/show/?0
http://jsfiddle.net/brM2v/show/?1
http://jsfiddle.net/brM2v/show/?2
http://fiddle.jshell.net/kBFU7/2/
In the code, I have created a dynamic table through jQuery.
I also have a div for each table cell.
I wish to store and access data of this div, eg, the row and column for each of it.
I would hence like to ask for some recommendations on how I should go about storing this data.
I have tried creating a span for each div to store info in it following the suggestions from this link http://time2hack.blogspot.sg/2012/11/jquery-store-access-relative-info-within-HTML-element.html#axzz2Ee3iLxCt but it did not seem appropriate and I have failed at accessing back the info.
I would appreciate it if someone could just give me some recommendations which I could try out.
So basically you want to create a dynamic table and access each of the TDs and its data.
In order to do that, you don't need any div or span to place inside those TDs to access their content (if that is all that you want). The simplest way to do so is to assign an id to each of these TDs according to their Row and Column position. That way you can access each of them in a loop or directly or what not.
below I've written a super simple way to achieve it. Of course you can customize or enhance it according to your need. but then you should get the idea right?
(I am using ur code to do that)
$(document).ready(function() {
createTable($("#tb1"));
function createTable(tbody){
if (tbody == null || tbody.length < 1) return;
for(var r=0;r<5;r++){
var trow=$("<tr>");
for(var c=0; c<5;c++){
var tcol=$("<td>")
tcol.attr("id","row"+r+"col"+c); /// assign id to each td
var cellText = "row " +r + " col " +c
$("<div>")
.text(cellText)
.appendTo(tcol)
tcol
.appendTo(trow)
}
trow.appendTo(tbody);
}
}
});
so basically you did this:
<td id="row1col1"></td>
<td id="row1col2" ></td>
now whenever you want to access any of the cells do this
$('#row1col1').text();
or
$('#row1col1').html();
you can access the cells in a loop like
for(var r=0;r<5;r++){
for(var c=0;c<5;c++){
var cellValue= $('#row'+r+"col"+c).text() // or .html()
makeAjaxRequest(cellValue); /// send to server or whatever
}
}
when create a div add an unique id:
.attr("id","cell-" + r+ "-" + c)
try this code on a button with input:
$("#btn").bind("click", function(){
var r = $('#row').val();
var c = $('#column').val();
var data = $('#data').val();
$('#cell-' + r + '-' + c).text(data);
});
Try it on my fiddle:
http://jsfiddle.net/kBFU7/4/
you'll have to pass this value as array and have to receive it on back-end
go on this link
http://www.aspdotnet-suresh.com/2012/07/aspnet-save-dynamically-created-control.html
To access the data attributes in the elements; there can be two ways. the jQuery access that data by
$('#table_cell_div').data('info');
But this function only works if the DOM is created before
$(document).ready();
i.e the document elements created by JS are not accessible in data() function of jQuery
But to access those elements and attributes after the DOM has become ready; you can access that data by following code
$('#table_cell_div').attr('data-info');
This question already has answers here:
Dynamic controlgroup and checkboxes unstyled
(6 answers)
Closed 8 years ago.
This is my code:
http://jsfiddle.net/YKvR3/34/
I would create a controlgroup with values that are in my array (name).
The problem is that when I click load button the values are added in a controlgroup but the jquery-ui styles are not loaded like in the image.
The controlgroup is not styled with jquery-ui mobile css.
$("#load").click(function(){
var name=["one","two"];
var html='<fieldset id="listPlayers" data-role="controlgroup"><legend><h1>Choose as many players as youd like to remove:</h1></legend>';
for ( var int = 0; int < 2; int++) {
html+='<input type="checkbox" name="checkbox-'+int+'a" id="checkbox-'+int+'a" class="custom" /><label for="checkbox-'+int+'a">'+name[int]+'</label>';
}
alert('<legend><h3>Choose as many players as you would like to remove:</h3></legend>'+html+'</fieldset');
$("#list").html(html+'</fieldset');
//$("#list").page();});
What I am doing wrong?
Thanks.
$("#list").trigger('create');
From: jqm docs
if you generate new markup client-side or load in content via Ajax and inject it into a page, you can trigger the create event to handle the auto-initialization for all the plugins contained within the new markup. This can be triggered on any element (even the page div itself), saving you the task of manually initializing each plugin (listview button, select, etc.).
I do applogies if this post is too old and if my post isn't by the correct standard since it's the first time ever posting so please correct me if it's horribly bad :-]
But in case someone else comes across it, I had similar problems with how the dynamic data is displayed and I used the jsfiddles and comments above as a help, and this is what got mine to work, well somewhat near my solution, I don't have a button to load the data it's loaded automatically when the page is loaded.
Updated In my .html-file:
<div id="members"></div>
<input type="button" id="load" value="test"/>
Updated In my .js-file:
$("#load").click(function(){
var name = ["NameOne","NameTwo", "NameThree"];
var fset = '<fieldset data-role="controlgroup" id="members-ctrlgroup"><legend>This is a legend:</legend>';
var labels='';
for ( var i = 0; i < name.length; i++) {
labels += '<input type="checkbox" class="checkbox" id="c'
+ i
+ '"><label for="c'
+ i
+ '" data-iconpos="right">'
+ name[i]
+'</label>';
}
$("#members").html(fset+labels+'</fieldset>');
$("#members").trigger("create");
});
I know the "field" looks a bit weird how I divided it but I find it somewhat easier when it comes to getting the whole html-string correct in these cases.
Updated In order to have the rounded corners and have it as one controlgroup you'll have to have this approach instead. Just like the former posters showed.
Do note that the id with the checkbox and the label for= can tend to screw the output if they're not the same :-]
fiddle
In order to replace the content you should use .html(); instead of .append(), which adds the new content after the existing one.
After adding content to a jQuery Mobile Page you need to enhance the content, using for instance $("input[type='radio']").checkboxradio();
I was using
for( var i=0 ; i < html.length ; i++ ){
var spline = html[i].split("|");
inHTML = inHTML + " <input type=\"checkbox\" name=\"checkbox-"+i+"a\" id=\"checkbox-"+i+"a\" class=\"custom\" /> <label for=\"checkbox-"+i+"a\">"+ spline[0] +" , "+ spline[2] +"</label> ";
}
jq("fieldset#myFieldSet").empty();
jq("fieldset#myFieldSet" )
// Append the new rows to the body
.append( inHTML )
// Call the refresh method
.closest( "fieldset#myFieldSet" )
// Trigger if the new injected markup contain links or buttons that need to be enhanced
.trigger( "create" );
I have a webpage with multiple jqgrids each with inline editing enabled, "action" column (edit icons) enabled and pager disabled. I need to handle the delete event for each row so that I can process the delete without reloading server-side data. I've looked at the approach mentioned in jqGrid Delete a Row and it's very helpful except I have two questions that are stumping me -
Are there more details around the rp_ge parameter in the delOptions.onClickSubmit event?
My column has the delOptions set as this -
delOptions: {onclickSubmit: function(rp_ge, rowid) {return onRowDelete(rp_ge,rowid);}},processing:true }},
Is there a way to get the grid id from within that event? I'd like to have a generic function that I can use to handle delete events from all the grids on the page. The rp_ge parameter has a gbox which sometimes contains the grid id appended? But I have no idea what it is since i'm not able to figure out when it's populated, when it's not.
function onRowDelete(rp_ge, rowid) {
//hardcoded grid id.. don't like it.
var gridid = '#Grid_X';
//what is this gbox?? can i get grid id predictable from it?
//var gridid = rp_ge.gbox.replace("#gbox_", "");
var grid = $('#Grid_X');
rp_ge.processing = true;
var result = grid.delRowData(rowid);
if (result) {
$("#delmod" + grid[0].id).hide();
}
return true;
}
In the jqGrid Delete a Row approach, the code $("#delmod"+grid[0].id).hide(); is hiding the popup delete confirmation dialog manually. What I noticed is that when the dialog pops-up, jqgrid de-emphasizes the background page (makes it light greyish). But after the popup is manually closed (hidden actually?), the background remains de-emphasized. So it looks like the page doesn't have focus (or even disabled). Any way this can be fixed? This can also be seen on the demo that Oleg wrote.
Any help would be appreciated.
(PS - I would've commented on the same post but I don't have enough points to comment on someone else's answer yet.)
In answer to your second point.
Several examples by Oleg such as this one have the following modification.
$("#delmod" + grid[0].id).hide();
is replaced with
$.jgrid.hideModal(
"#delmod"+grid_id,
{gb:"#gbox_"+grid_id,jqm:rp_ge.jqModal,onClose:rp_ge.onClose}
);
This will return focus after the delete operation.