I am trying to add/delete repeated grid items by Javascript because of repeat control DOM has to be customized and placed in other place.
Is there any way to do this inserting or deleting by javascipt?
I have tryied this without success:
ORBEON.xforms.Document.dispatchEvent(
{
targetId: 'my-enclosin-reapeated-section',
eventName: 'xforms-insert'
}
);
Here is the entire form source code: https://pastebin.com/P3VK4hKm
In this case I am trying:
ORBEON.xforms.Document.dispatchEvent(
{
targetId: 'section-3-iteration',
eventName: 'xforms-insert'
}
);
Orbeon version is 2018.2.3 PE
Related
I'm using some AJAX (ASP.NET Web Forms) to add new selectable elements on my site but the newly created ones aren't selectable. I guess this has to do with some events. Maybe it can be solved by using .on on those functions but I don't know how to do it. Anyone know how to fix that?
Here's my code:
$(".selectable").selectable({
filter: '.ui-widget-content',
stop: function () {
var result = $("#select-result").empty();
$(".ui-selected", this).each(function () {
var index = $(this).attr('id');
index = index.substring(12, index.length);
result.append(" #" + index);
});
}
});
when you load your page, jquery assign respective functions to each html tags. when you create some new div/html tags you should re-initialize the function because jquery doesn't know about your newly created html tags,
for the respective query
try re initializing the jquery function after adding new selectable element
hope this help..
I am writing a piece of code, where i have a jqgrid and a filter with a textbox on the top, i have used the jquery ui autocomplete functionality, everything works fine, but i need to customize the functionality now i.e on autocomplete results when i select a option it should filter the grid with the result selected. Following is the example given below:
// i am doing a search on the textbox with auto complete feature
grid.jqGrid('setColProp', 'Name',
{
searchoptions: {
sopt:['cn'],
dataInit: function(elem) {
$(elem).autocomplete({
source:getUniqueNames('Name'),
delay:0,
minLength:0,
matchContains: true,
autoFill:true,
select:function(event,ui){
grid.setGridParam('postData', ui.item.value);
//grid.jqGrid('clearGridData');
grid.trigger('reloadGrid');
return false;
// need to write the code which will trigger the reload here on selection
}
});
}
}
});
On select function i need the selected option to be loaded in the jqgrid, how can i do it. Please suggest solution.
If you have implemented server side sorting and paging for your jqgrid then this should be easy, you simply need to reload the jqgrid.
To reload the grid see this, use this line of code
$("#grid1").trigger("reloadGrid", [{current:true}]);
this will reload the jqgrid, where you can pass in the paramters using postData: and get the filtered data.
I'm trying to dynamically populate a select tag at load time (latest jQM version) using a custom template filling function.
If the fn is called in the "pagebeforechange" event, the select tag is properly initialized. Since this event is called on every page transition, I thought of moving the fn to the 'pageinit' event. This does not work, presumably because the DOM is not yet fully available. How can I coerce jQM to inject content in a page only once? Currently, I am using a kludge. There surely must be a smarter way. Thanks for any suggestions.
$(document).bind('pageinit', function () {
InitSelTagTest("#selActTag", "tplTag"); // Does not work.
});
$(document).bind("pagebeforechange", function (e, data) {
if ($("#selActTag").children().size() === 0) {
InitSelTagTest("#selActTag", "tplTag"); // Kludge, but it works
}
});
function InitSelTagTest(el,tpl) { // Append all tags to element el
var lstAllTags = JSON.parse($("#hidTag").val()); // Create tag array
// Retrieve html content from template.
var cbeg = "//<![" + "CDATA[", cend = "//]" + "]>";
var rslt = tmpl(tpl, { ddd: lstAllTags }).replace(cbeg, ").replace(cend,");
$(el).html(rslt).trigger("create"); // Add to DOM.
}
EDIT
In response to Shenaniganz' comment, it seems that the "pagebeforecreate" event could do the trick ie.
$("#pgAct").live("pagebeforecreate", function () {
// Populate tag select. Works. Traversed only once.
InitSelTag("#selActTag", "tplTag");
});
I'm not sure I fully understand your question but I'll throw a few things out there and you let me know if I can extend further.
To make something trigger only once on page load you can try to implement a regular JQuery $(document).ready(function(){}) aka $(function(){}) for the exact reason why JQuery Mobile users are told not to use it. It triggers only once on DOM load. Further pages don't trigger it because they're being switched via Ajax.
Other than that, on regular dynamic content loading you take a look at the following example I put together for someone else earlier:
http://jsbin.com/ozejif/1/edit
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.
After working on with master detail with JQGrid , I am trying to get partial view data added to a div block.
what I am trying to do is
afterEditCell: function () {
$.ajax(
url: "/order/Selected/",
type: "GET",
success: function (response, status, xhr) {
var jqContainer = $('.right');
jqContainer.html(response);
)
},
I am using inline cell editing
jQuery('#list10_d').jqGrid('editRow', id, true,);
ONce I edit value in cell it does send the update to server wher I am able to update selected dataitems with value.
Once this is done I want to load partial view which contains information about selected data item
afterEditCell event never fires.
I have checked the ajax call by adding it to $().ready.
Am I using the right event. Is there a better way to add partial view after row has been edited?
Regards,
Mar
There are a misunderstanding because jqGrid is a grid which can do probably too many things. The problem is that Inline Editing, Form Editing and Cell Editing are three absolutely different implementation of jgGrid editing. You can combine Inline Editing and Form Editing. There are some common grid settings used during all of editing modes. The events used by editRow can be defined as parameters of editRow. You can use succesfunc or aftersavefunc for your purpose. The Events of the cell editing will be
not fired by editRow which is the part of Inline Editing.
I may have got one solution from another post on SO
jqgrid reload grid after successfull inline update / inline creation of record
added
jQuery(document).ready(function () {
function updateSelected(rowid, result) {
alert("Hello");
return true;
}
and inside JQGrid script
jqGrid('editRow', id, true, '', updateSelected, '', '', '');
Though it works for me I will stillwant to know if it is possible to do so using cell events?
Regards,
Mar