How to overwrite jqGrid's language defaults? - javascript

Assuming I can't change the language file because I want the defaults to keep the same except for this particular case.
I want to change the caption for the edit form. Assume as well that there are going to be other grids that will use different captions for that same edit form.
So far, I know that the edit form is launched calling this method:
grid.jqGrid('editGridRow', rowID, {properties});
In the Documentation Wiki, you can find a paragraph about this that says:
These options can be overwritten when passed as options to the method.
When passed to the method we should use by example bSubmit : “Submit”
and not $.jgrid.edit.bSubmit : “Submit”
But it doesn't say what method to which I have to pass the options. 'editGridRow' doesn't have an options parameter, and if I pass it as a property like so:
grid.jqGrid('editGridRow', rowID, { editCaption: "My Edit Caption" });
it doesn't work.
Thanks.

your solution should work, but lets just try this out.
$.jgrid.nav.addtext = "Add";
$.jgrid.nav.edittext = "Edit";
$.jgrid.nav.deltext = "Delete";
$.jgrid.edit.addCaption = "Add Me";
$.jgrid.edit.editCaption = "Edit Me";
you can over ride them like this, include this under your script tag before jQGrid Code, it's not tested though.

Related

How to modify attributes in annotations in TinyMCE

I am trying to modify the data-author of annotation in TinyMCE. The documentation said that :
The TinyMCE Annotations API provides the ability to add, modify, and delete annotations; listen to text selection events and retrieve all annotations with the same annotation name.
I have already annotated my selected words, using the
editor.annotator.annotate('comment', {
uid: id,
author: name
});
OUTPUT:
<span class=\"mce-annotation\" data-mce-annotation-uid=\"7\" data-mce-annotation-author=\"name1\" data-mce-annotation=\"comment\">Advice</span>
In that code, I've successfully annotated the selected words, but for some event, I want to change the author of the annotated words, and here's my code:
editor.annotator.annotate('comment', {
uid: id,
author: newName
});
OUTPUT:
<span class=\"mce-annotation\" data-mce-annotation-uid=\"7\" data-mce-annotation-author=\"name1\" data-mce-annotation=\"comment\"><span class=\"mce-annotation\" data-mce-annotation-uid=\"7\" data-mce-annotation-author=\"name2\" data-mce-annotation=\"comment\">Advice</span></span>
I thought since the selected words are already annotated, by using the code above I can change the author. but it's just creating another span inside the original span.
What I want is just to edit or change the data-mce-annotation-author value from other values on some event.
Have anyone tried this issue or experience with this? Thank you very much!
I got the solution for this.
You just need to use the Retrieving All Annotations for a Particular Annotation Name
My solution for changing attributes of specific annotator:
const comments = editor.annotator.getAll(this.name);
const comment = comments[id][0];
comment.setAttribute('data-mce-annotation-author', newName);
editor.save();

knockout: how to hide a paragraph tag using visible data bind observable?

I have a paragraph tag which i want to hide conditionally. I am unable to hide it.
This is demo code:
Fiddle demo
This is what i have tried- made one observable variable and assig:
var viewSellerBtnVisible = ko.observable(true);
viewSellerBtnVisible(false);
viewSellerBtnVisible(false) is conditional in the original code but even then its not getting hidden.
What should i do to hide this paragraph tag?
Working demo:
var viewSellerBtnVisible = ko.observable(true);
ko.applyBindings({ viewSellerBtnVisible: viewSellerBtnVisible }, document.getElementById("txtRecommendationHeading"));
viewSellerBtnVisible(false);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<h3 class="">People also liked...</h3>
<p id="txtRecommendationHeading" data-bind="visible: viewSellerBtnVisible" class="font11">View seller details in <strong>one click</strong></p>
In your code:
ko.applyBindings(viewSellerBtnVisible, document.getElementById("txtRecommendationHeading"));
var viewSellerBtnVisible = ko.observable(true);
viewSellerBtnVisible(false);
The model should be a JavaScript object, mapping names to values. viewSellerBtnVisible in your code is a value; Knockout cannot know what its name would be just from that.
You also apply bindings using a variable name that has not yet been defined. At the point where you applyBindings, viewSellerBtnVisible is not even an observable, it is undefined. Since parameters are passed by object sharing, and not by reference, the binding does not become an observable later. You need to have a proper sequence of instructions.
Finally, your Fiddle doesn't have Knockout loaded. When playing with Fiddle, you should add libraries you're using under "External resources".

form submit by clicking on anchor tag in IE11

I am trying to update some old code that works correctly on all versions of IE except IE11. When an anchor tag is clicked a javascript function is run. The function . All that the function does is that it gets certain values from the DOM and then submits a form using the post action.
I understand that IE11 submit does not work if the input element does not have a name. Here, the submit is done by clicking on an anchor tag- I tried adding a name and id to the anchor tag but it is still not working.
Any idea on how to get it to work. Following is the anchor tag.
<a class="nohigh" href="javascript:getClassDetails('<%=Id%>');">
Following is the javascript function:
function getClassDetails(a){
var classId = document.getElementById(classIdRow ).value;
var courseId = document.getElementById(courseIdRow).value;
document.getElementById('val1').value = classId
document.getElementById('val2').value = courseId
document.getElementById('clasCourseForm').submit();
}
The function that you want should be:
function getClassDetails(a){
var classId = document.getElementById(classIdRow).value; // assuming classIdRow is defined
var courseId = document.getElementById(courseIdRow).value; // assuming courseIdRow is defined
document.getElementById('val1').value = classId;
document.getElementById('val2').value = courseId;
document.getElementById('clasCourseForm').submit();
}
That's at least assuming that all the JavaScript you have up there ^ is verbatim.
[edit: removed the original answer, as the question has been changed to correct the syntax]
In addition, the JS code has other weirdness, in that the function is accepting a parameter (a) but never uses it within the function. There's almost certainly some kind of logic mistake involved there which you'll want to look into.
fixed it - by adding both a name and id to the form.

How to change dojo/dijit tab title programmatically?

For example, given the dijit.ContentPane tab below, how do I programmatically change the title "Summary" to something else?
<div id="summaryContent" class="tabClass" dojoType="dijit.layout.ContentPane" title="Summary" selected="true">
I tried:
dojo.byId('summaryContent').title
document.getElementById('summaryContent').style.title
...as well a bunch of other combinations, but it doesn't work? Any ideas?
Just two small mistakes: first, to get a dijit instance (e.g. the dijit.layout.ContentPane javascript object, not the DOM node) you have to use dijit.byId, and secondly, setting a property on a dijit is done with the set method. So:
dijit.byId("summaryContent").set("title", "My new awesome title");
.. should do the trick.
This is what worked for me, not only for title but for any property:
First include "dijit/registry" (https://dojotoolkit.org/reference-guide/1.10/dijit/registry.html)
Then in code do:
var summaryContent = registry.byId("summaryContent");
summaryContent._set("title", "new title here");
//Set something like the icon
summaryContent._set("iconClass", "summary-icon");
Get the instance of the div by using "dijit.byId".
As you have created the instance by using dijit ("dijit.byId"), so use the method 'set' to set the value to the property.
Code:
dijit.byId("summaryContent").set("title", "New Title");
*New Title: is the title which you want to set.

What's the best way to get this data to persist within Javascript event handlers using jQuery

My code is meant to replace radio buttons with dynamic ones, and allow clicking both the label and new dynamic radio element to toggle the state of the hidden with CSS radio box.
I need to send to questions.checkAnswer() three parameters, and these are defined within these initiation loops. However I always get last the last values once the loop has finished iterating. In the past I've created dummy elements and other things that didn't feel right to store 'temporary' valuables to act as an informational hook for Javascript.
Here is what I have so far
init: function() {
// set up handlers
moduleIndex = $('input[name=module]').val();
$('#questions-form ul').each(function() {
questionIndex = $('fieldset').index($(this).parents('fieldset'));
$('li', this).each(function() {
answerIndex = $('li', $(this).parent()).index(this);
prettyRadio = $('<span class="pretty-radio">' + (answerIndex + 1) + '</span>');
radio = $('input[type=radio]', this);
radio.after(prettyRadio);
$(radio).bind('change', function() {
$('.pretty-radio', $(this).parent().parent()).removeClass('selected');
$(this).next('.pretty-radio').addClass('selected');
questions.checkAnswer(moduleIndex, questionIndex, answerIndex);
});
prettyRadio.bind('click', function() {
$('.pretty-radio', $(this).parent().parent()).removeClass('selected');
$(this).addClass('selected').prev('input').attr({checked: true});
});
$('label', this).bind('click', function() {
$(radio).trigger('change');
questions.checkAnswer(moduleIndex, questionIndex, answerIndex);
$(this).prev('input').attr({checked: true});
});
});
});
Is it bad to add a pretend attribute with Javascript, example, <li module="1" question="0" answer="6">
Should I store information in the rel attribute and concatenate it with an hyphen for example, and explode it when I need it?
How have you solved this problem?
I am open to any ideas to make my Javascript code better.
Thank you all for your time.
It's not the end of the world to add a custom attribute. In fact, in many cases, it's the least bad approach. However, if I had to do this, I would prefix the attribute the with "data-" just so that it is compliant with HTML5 specs for custom attributes for forward compatibility. This way, you won't have to worry about upgrading when you want to get HTML5 compliant.
you need to say 'var questionIndex' etc, else your 'variables' are properties of the window and have global scope...
regarding custom attributes, i have certainly done that in the past tho i try to avoid it if i can. some CMS and theming systems occasionally get unhappy if you do this with interactive elements like textareas and input tags and might just strip them out.
finally $(a,b) is the same as $(b).find(a) .. some people prefer the second form because it is more explicit in what you are doing.
If the assignment of the custom attributes is entirely client-side, you must resolve this with jQuery data, something like this:
$("#yourLiID").data({ module:1, question:0, answer:6 });
for the full documentation see here

Categories

Resources