I am using js-grid as my grid and i want to enable the print functionality just like datatables (https://datatables.net/extensions/buttons/examples/print/simple.html).
I searched js-grid and found nothing about the print functionality. How can i add this feature to js-grid?
You can create a separate page, add jsGrid with the same data on it with simplified printing-friendly styling (turn off editing and filtering etc).
On the body of this page open print dialog:
<body onload="window.print()">
...
</body>
Then add a button that will open this new page in a new tab.
Related
I have a headache problem regarding the ck editor of zendesk ticket.
I am going to update the ck editor manually in chrome extension by using jQuery.
I can get the HTML value and class name and also add class name into this ck editor.
But when I change the content of this ck editor, it is never changed.
let editable_content = $("#editor-view").find("div[data-test-id='omnicomposer-rich-text-ckeditor']");
editable_content.html("<p>Test Ck Editor</p>");
editable_content.addClass("test-editor");
const editorValue = $("#editor-view").find("div[data-test-id='omnicomposer-rich-text-ckeditor']").html();
The class is added to this content successfully and the value of editorValue is "Test Ck Editor", but the content of ck editor doesn't changed.
zendesk.com/agent/ticket/1 is the URL that contains ck editor.
Please help me to fix this issue.
Thanks.
According to the CKEditor docs, you can get the CKEditor instance from a DOM element using the ckeditorInstance property.
If your HTML is like this:
<!-- The editable element in the editor's DOM structure. -->
<div class="... ck-editor__editable ..." contenteditable="true">
<!-- Editable content. --></div>
Then you can grab the CKEditor instance like this:
// A reference to the editor editable element in the DOM.
const domEditableElement = document.querySelector( '.ck-editor__editable' );
// Get the editor instance from the editable element.
const editorInstance = domEditableElement.ckeditorInstance;
// Use the editor instance API.
editorInstance.setData( '<p>Hello world!<p>' );
For ckEditor 5 (that is currently used by zendesk), all the changes need to be done via the model.
In order to access the model, you have the ckeditorInstance property on the domElement that contains it.
The ckeditorInstance appears only in a background script that is ran with the world as main.
chrome.scripting.executeScript({world: 'MAIN', ...otherOptions})
Once you are able to access the model, then it is as simple (or complex) as writing JS code to change the ckEditor contents.
I have a wordpress page where I want to create custom events.
I would like to measure how many people click on different links/entries on my page.
I have been reading and I should create in HTML an on click DOM event for those entries/links, but I am not sure how to set this up.
Then I also require the DOM selector.
Would somebody give me an example of how to do this?
Below is an example of how it looks an entry on HTML:
-Shoes: Click acá!
Thanks very much.
Sabrina C.
I think this is what you're asking for:
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick
A better solution might be:
<a onclick="log(this)" href="https://www.paruolo.com.ar/" rel="nofollow noreferrer">Click acá!</a>
<script>
function log(e){
alert(e.href);
alert(e.innerHTML);
}
</script>
This would allow you to pass the item to a fetch call that you replace the alert with to log on your server or on the page. Just replace the alert with another function that handles your data and handle by link or the text in the link.
I have a selectable field that uses the django-select2 library. I am currently trying to copy the behaviour of the "add another" functionality present in the admin forms of Django.
I added a "+" icon to my regular form template and opened a popup so that the user can register a new item. This part works, now I wish to select the newly added item automatically once the popup is closed. I cannot seem to add a new option to the selectable, though.
I read the original dismissAddAnotherPopup() code and the select2 docs on that, but appending a new Option(...) to the element does not have the desired effect - in fact it adds as many options as I want, but they appear under the select box instead of in the dropdown menu, as if they were completely different things.
I looked at the html result and it seems the select2 field is not using <option ...> for the options rendered with Django, but rather some deeper nested elements for the options.
What is the correct syntax for adding new options in this situation?
What solved it for me was this answer:
let opt = "<option value=" + myValue + " selected='selected'>" + myValueText + "</option>";
$('#mySelect').html(opt);
$('#mySelect').val(myValue).trigger("change");
It looks a bit ugly to just replace the html, but as I mentioned in the question, appending a new Option(...) to the element did not work.
Not fully client side, but might be helpful: you can use the django-addanother wrapper, like:
widgets = {
'somefield': AddAnotherWidgetWrapper(Select2Widget, reverse_lazy('somefield_add')),
}
This will render a "+" next to the Select2 field; when pressing a popup will be opened which allows to add a new object. Once saved, the Select2Widget will be automatically populated with this newly created object.
I am wanting to customise the edit form in jqGrid so that instead of using the table structured layout provided I would like to use my own custom css structured layout for the form elements. How should I go about modifying the edit form to allow me to use my own custom look?
You can definitely achieve this by jquery ui dialog. However I can not put full code for you but helps you in the steps you have to do.
1 design your custom form whatever CSS and style you want to apply.
Suppose this is youe custome form
<div id="dialog-div">
<input type="text">
</div>
2 on jquery dialog open the dialog on your jqgrid editbutton click
$("#edit").click(function(){
var rowdata = $("#coolGrid").jqGrid('getGridParam','selrow');
if(rowdata){
$("#dialog-div").dialog('open');
var data = $("#coolGrid").jqGrid('getRowData',rowdata);
alert(data);
}
});
by default it will close as-
$("#dialog-div").dialog({
autoOpen: false,
});
Now as you get data in variable you can put in your edit form and of jquery dialog button save it according to your logic.
Hope this helps you.
I would recommend you first of all to read (or at least look thorough) the code of form editing module which implement the part which you want to replace. You will see that it consist from more as 2000 lines of code. If you write "I would like to ..." you should understand the amount of work for implementing what you ask. If you are able to understand the code and if you are able to write your modification of the code even using libraries like jQuery UI then you can decide whether it's worth to invest your time to do the work. The main advantage of using existing solutions is saving of the time. What you get in the way is not perfect, but using existing products you could create your own solutions quickly and with acceptable quality. The way to study existing products which you can use for free seems me more effective as large investments in reinventing the wheel.
http://guriddo.net/?kbe_knowledgebase=using-templates-in-form-editing
Using templates in form editing
As of version 4.8 we support templates in the form editing. This allow to customize the edit form in a way the developer want. To use a template it is needed to set the parameter template in the edit add/or add options of navigator. This can be done in navigator or in the editing method editGridRow :
$("#grid").jqGrid("navGrid",
{add:true, edit:true,...},
{template: "template string for edit",...}
{template: "template string for add",...},
...
);
and in editGridRow method:
$("#grid").jqGrid("editGridRow",
rowid,
{template: "template string",...}
);
To place the CustomerID field in the template the following code string should be inserted in the template string
{CustomerID}
With other words this is the name from colModel put in { }
The usual problem with table layouts is when you have columns with different widths, especially with those very wide.
I solved my problem adding the attr colspan to wide columns in the beforeShowForm event.
for example
"beforeShowForm":function() {
$('#tr_fieldnameasinColModel > td.DataTD').attr('colspan',5);
}
It's not fancy but it worked for me. Perhaps there is a more elegant way to do the same.
I could arrange the fields in several columns without having to make the form extrawide.
When user click on edit button the page navigate to another page, based on Id get the details of a row and you can display the values..
Previous answer of Creating a link in JQGrid solves your problem.
We have a Magento Shop with some products that have custom options as radio buttons. Every non required option has the first button checked by default but not the required ones. How can I make them checked?
I've allready installed the extension Dependent Custom Options (gallery). That gives me the option to set which custom option should be checked by default but that doesn't update the price to the right value.
Thanks for evey help
This solution may not be the best for you, but I had this same problem, and just fixed it.
First I had to use a convoluted method for installing jQuery correctly in Magento. Part of the problem, I believe comes from the Spriptaculous Effects file being outdated with the latest Magento build. So I went to the site www.script.aculo.us and downloaded the latest version. I then pulled out the effects.js file and used it to overwrite the effects.js in:
[Magento]/js/scriptaculous
Then I downloaded jQuery from the jQuery site and made a folder called jquery in:
[Magento]/js/
And dumped the jquery file in there.
Then I opened the file:
[Magento]/app/design/frontend/default/default/layout/page.xml
And found a list of lines that look like this:
<action method="addJs"><script>scriptaculous/effects.js</script></action>
I copied one of these and replaced the path to that of the jquery file like this.
<action method="addJs"><script>jquery/jquery-1.6.1.min.js</script></action>
Now jQuery will be included in all your pages.
Important! You have to run jQuery in noConflict() mode. So this is what the JS looks like that (for me) worked to select the first radio button on any page with custom options.
var $j = jQuery.noConflict();
$j(document).ready(function(){
// auto selects the first input with radio class
$j('.options-list input.radio:first').attr('checked','checked');
});
I saved that file into my jquery folder and linked to it the same way I linked to the jQ library.
Flushed my cache, and voila!
I hope this helps!
You can use jQuery, as Gordon says, but to update the price you need to run opConfig.reloadPrice() function when check. So the code will be something like this:
var $j = jQuery.noConflict();
$j(document).ready(function(){
// auto selects the first input with radio class
$j('.options-list input.radio:first').attr('checked','checked');
opConfig.reloadPrice();
});
There is a javascript function named something like optionsConfig.reloadPrice() which, when called, updates the price according to options. You probably need to have this triggered during the dom:loaded event.
Go to app\code\core\Mage\Catalog\Block\Product\View\Options\Type\select.php
You can find here your custom option title and set if condition with your title.
For example, my custom option title is price:
if($this->htmlEscape($_option->getTitle()=='Price'))