How to create Table plugin dynamically using javascript api's in jquery mobile.
Now i'm creating table plugin using append method in javascript, but i want create this in javascript api's.
Html
<table data-role="table" data-mode="columntoggle" class="ui-responsive table ui-shadow" id="today_app">
<tr><th>Name</th><th>Duration</th></tr>
</table>
javascript
for (var i = 0; i < serviceName.length; i++) {
$('#today_app').append('<tr><td>'+serviceName[i].name+'</td><td>'+serviceName[i].from+'</td></tr>');
}
Code without jquery mobile append...
var = document.getElementById('today_app');
for (var i = 0; i < serviceName.length; i++) {
var row = document.createElement("tr");
// create table cells
var td1 = document.createElement("td");
var td2 = document.createElement("td");
td1.innerHTML = serviceName[i].name;
td2.innerHTML = serviceName[i].form;
// adding cells to row
row.appendChild(td1);
row.appendChild(td2);
tableObj.appendChild(row);
}
Related
I created table with data using JSONModel
var oModel = new sap.ui.model.json.JSONModel(query);
oTablePrio = sap.ui.getCore().getControl("idTablePrio2");
oTablePrio.setModel(oModel, "Prio2");
Everythink look and work good.
Now i have added new column(prio) where i will change value. After changing i would like to save every rows( in the SAP ztable ) after clicking buton save .
I made something like this
var oModel = new sap.ui.model.odata.v2.ODataModel(gServiceUrl);
oModel.setUseBatch(true);
for (var i = 0; i < data.length; i++) {
sEntry.Matnr = data[i].Matnr;
sEntry.Bbynr = data[i].Bbynr;
sEntry.Prio = data[i].Prio;
oModel.update("/WielosztSet('"+data[i].Bbynr+"')", sEntry, {
method: "PUT", function(){
alert('Data Updated Successfully');
location.reload(true);
},function(){
sap.m.MessageToast.show('Update failed',{duration:1000});
}});
}
Now only it sends data only with the last row.
I wrote that i cannot update more than one row in this way and I need to make batch.
I connot find how to create working batch for uploding data with sap.ui.model.odata.v2.ODataModel
Please give me some advice.
Before the call of the oModel.update assign the UseBatch to true:
oModel.setUseBatch(true);
Make your for:
for (var i = 0; i < data.length; i++) {
sEntry.Matnr = data[i].Matnr;
sEntry.Bbynr = data[i].Bbynr;
sEntry.Prio = data[i].Prio;
oModel.update("/WielosztSet('"+data[i].Bbynr+"')", sEntry, {
method: "PUT", function(){
alert('Data Updated Successfully');
location.reload(true);
},function(){
sap.m.MessageToast.show('Update failed',{duration:1000});
}});
}
At the end of for put the submitChanges.
oModel.submitChanges();
oModel.setUseBatch(false); // Make false if you reuse this oModel.
Regards.
Hello I am creating a application using office.js which will be used in excel and word application addIn and I have written some code that actually gives the text of entire row cell by cell. but as my requirement was to maintain styles and of every cell and store them in database so that when again addin runs it should load the data in same format it was stored. Currently it is just text i am getting in response. I have asked a similar question like this which was to get the text with styles from current cell that really works great.
How do I get the formatting the Current cell of the table in Word using office.js
There is another thing if it is possible to get the cell html by row and column position that will also solve the problem.
Thank you!
Hi i found the solution of my problem but this is solution for word only this is not working in excel but this was working for me so i am writing here :-
function Addtable() {
var document = Office.context.document;
var headers = [["Cities"]];
var rows = [['<b>Hello there</b> <ul><li>One</li><li>Two</li></ul>'], ['Roma'], ['Tokyo'], ['Seattle']];
var html = '<table>';
html += '<thead>';
for (var i = 0; i < headers.length; i++) {
html += '<tr>';
var cells = headers[i];
for (var j = 0; j < cells.length; j++) {
html += '<th>' + cells[j] + '</th>';
}
html += '</tr>';
}
html += '</tr>';
html += '</thead>';
html += '<tbody>';
for (var i = 0; i < rows.length; i++) {
html += '<tr>';
var cells = rows[i];
for (var j = 0; j < cells.length; j++) {
html += '<td>' + cells[j] + '</td>';
}
html += '</tr>';
}
html += '</tbody>';
html += '</table>';
Office.context.document.setSelectedDataAsync(html, { coercionType: Office.CoercionType.Html }, function (asyncResult) {
document.bindings.addFromSelectionAsync(Office.BindingType.Table, function (result) {
console.log(result);
var binding = result.value;
binding.addHandlerAsync(Office.EventType.BindingSelectionChanged, onBindingSelectionChanged);
});
});
}
The above is the function that i call when i want to generate a table with html values in it.
and bellow is is code that i am using to get the value of the current cell and replacing with some dummy value.
var onBindingSelectionChanged = function (results) {
if (!isExecuted) {
Word.run(function (context) {
var tableCell = context.document.getSelection().parentTableCell;
context.load(tableCell);
return context.sync()
.then(function () {
if (tableCell.isNull == true) {
//selection is not within a cell.....
console.log("selection not in a header");
}
else {
// the selection is inside a cell! lets get the content....
var body = tableCell.body;
var html = tableCell.body.getHtml();
var tableHtml = tableCell.body.getHtml();
context.sync()
.then(function () {
var cellHtml = html.value;
var newHtml = "<table><tr><td><ul><li>yellow</li></ul></td></tr></table";
// Option 1
body.insertHtml(newHtml, Word.InsertLocation.replace);
// Option 2
//body.clear();
//body.insertHtml(newHtml, Word.InsertLocation.end);
return context.sync().then(function () {
console.log('HTML was successfully replaced.');
}).catch(function (e) {
console.log(e.message);
});
}).catch(function (e) {
console.log(e.message);
});
}
}).catch(function (e) {
console.log(e.message);
});
});
isExecuted = true;
}
else {
isExecuted=false;
}
};
Thank you!
I need to replace multiple value in JSONStore of IBM Worklight.
In this way is saved only first value. Why?
.then(function() {
for (var index = 0; index < elencoSpese.length; index++) {
var spesa = elencoSpese[index];
var spesaReplace = {_id: spesa.id, json: spesa};
spesa.id_nota_spesa = idNotaSpesa;
spesa.checked = true;
WL.JSONStore.get(COLLECTION_NAME_SPESE).replace(spesaReplace);
}
})
You want to build an array of JSONStore documents and pass it to the replaceAPI. For example:
.then(function() {
var replacementsArray = [];
for (var index = 0; index < elencoSpese.length; index++) {
var spesa = elencoSpese[index];
var spesaReplace = {_id: spesa.id, json: spesa};
spesa.id_nota_spesa = idNotaSpesa;
spesa.checked = true;
replacementsArray.push(spesaReplace);
}
return WL.JSONStore.get(COLLECTION_NAME_SPESE).replace(replacementsArray);
})
.then(function (numOfDocsReplaced) {
// numOfDocsReplaced should equal elencoSpese.length
})
I assume this happens in the JavaScript implementation of the JSONStore API, if that's the case the answer is in the documentation here. The JavaScript implementation of JSONStore expects code to be called serially. Wait for an operation to finish before you call the next one. When you call the replace multiple times without waiting, you're calling the API in parallel instead of serially. This should not be an issue in the production environments (i.e. Android, iOS, WP8 and W8).
I'm trying to generate a list dynamically from database. The results can be retrieved, however, jquerymobile style and data-role property seem to be lost. I see an ugly list instead of nicely rendered list:
I've tried to reproduce it using the simplest list item:
In my index.html, I have:
<ul data-role="listview" data-theme="d" data-divider-theme="d" data-inset="true" id="thisweekexpenselist"></ul>
In the javascript file, I have
function getExpenselist_success(tx, results) {
$('#busy').hide();
var len = results.rows.length;
for (var i=0; i<len; i++) {
var expense = results.rows.item(i);
$('#thisweekexpenselist').append('<li>Test Simplest</li>');
}
db = null;
}
It does not render correctly at all.
Try calling $('#thisweekexpenselist').listview('refresh'); at the end of the getExpenselist_success() function.
This helps:
$(document).bind('pagechange', function() {
$('.ui-page-active .ui-listview').listview('refresh');
});
I have a webpage with prettyPhoto and a youtube video inside the web page.
With jquery I do:
$("#youtubevideo embed").attr("wmode", "opaque");
also tried $("#youtubevideo embed").attr("wmode", "transparent");
In firefox image is over the youtube video, but the corners of pretty photo are missing. Not really missing because if I scroll up ad down they are shown. But still they don't appear correctly.
In Chrome video is still on top of the images :( Is there a way to fix this? Thanks
after 2 days of searching the web for the answer i've found a pure JS function that fix it in all browsers!
there you go:
function fix_flash() {
// loop through every embed tag on the site
var embeds = document.getElementsByTagName('embed');
for (i = 0; i < embeds.length; i++) {
embed = embeds[i];
var new_embed;
// everything but Firefox & Konqueror
if (embed.outerHTML) {
var html = embed.outerHTML;
// replace an existing wmode parameter
if (html.match(/wmode\s*=\s*('|")[a-zA-Z]+('|")/i))
new_embed = html.replace(/wmode\s*=\s*('|")window('|")/i, "wmode='transparent'");
// add a new wmode parameter
else
new_embed = html.replace(/<embed\s/i, "<embed wmode='transparent' ");
// replace the old embed object with the fixed version
embed.insertAdjacentHTML('beforeBegin', new_embed);
embed.parentNode.removeChild(embed);
} else {
// cloneNode is buggy in some versions of Safari & Opera, but works fine in FF
new_embed = embed.cloneNode(true);
if (!new_embed.getAttribute('wmode') || new_embed.getAttribute('wmode').toLowerCase() == 'window')
new_embed.setAttribute('wmode', 'transparent');
embed.parentNode.replaceChild(new_embed, embed);
}
}
// loop through every object tag on the site
var objects = document.getElementsByTagName('object');
for (i = 0; i < objects.length; i++) {
object = objects[i];
var new_object;
// object is an IE specific tag so we can use outerHTML here
if (object.outerHTML) {
var html = object.outerHTML;
// replace an existing wmode parameter
if (html.match(/<param\s+name\s*=\s*('|")wmode('|")\s+value\s*=\s*('|")[a-zA-Z]+('|")\s*\/?\>/i))
new_object = html.replace(/<param\s+name\s*=\s*('|")wmode('|")\s+value\s*=\s*('|")window('|")\s*\/?\>/i, "<param name='wmode' value='transparent' />");
// add a new wmode parameter
else
new_object = html.replace(/<\/object\>/i, "<param name='wmode' value='transparent' />\n</object>");
// loop through each of the param tags
var children = object.childNodes;
for (j = 0; j < children.length; j++) {
try {
if (children[j] != null) {
var theName = children[j].getAttribute('name');
if (theName != null && theName.match(/flashvars/i)) {
new_object = new_object.replace(/<param\s+name\s*=\s*('|")flashvars('|")\s+value\s*=\s*('|")[^'"]*('|")\s*\/?\>/i, "<param name='flashvars' value='" + children[j].getAttribute('value') + "' />");
}
}
}
catch (err) {
}
}
// replace the old embed object with the fixed versiony
object.insertAdjacentHTML('beforeBegin', new_object);
object.parentNode.removeChild(object);
}
}
}
now you can just run in when the page loads with jQuery:
$(document).ready(function () {
fix_flash();
}
Also you can add ?wmode=transparent to each youtube link
So if you have code like:
<iframe src="http://www.youtube.com/embed/aoZbiS20HGI">
</iframe>
You need to change it to:
<iframe src="http://www.youtube.com/embed/aoZbiS20HGI?wmode=transparent">
</iframe>