I have a dojo editor on a jsp page. The dojo editor is one of the required fields and i have a validation in place for it. There is a scenario in which some tags are getting appended. I cannot find a particular pattern when it gets appended but most of the times it occurs after one selects and copies all the content and pastes on the editor. So the editor content in this case was
<div id="dijitEditorBody">content which user entered</div>
Issue: When the user deletes all content which was entered the tags are still there and get submitted. In this case atleast visually editor has no content but the field holds the following value:
<div id="dijitEditorBody"></div>
or
<div id="dijitEditorBody"><br /></div>
So it skips validation and displays an empty editor when data is retrieved from DB?
I am confused about why these tags are getting appended?
In RichText.js, this snippet :
if(dojo.isIE || dojo.isWebKit || (!this.height && !dojo.isMoz)){
// In auto-expand mode, need a wrapper div for AlwaysShowToolbar plugin to correctly
// expand/contract the editor as the content changes.
html = "<div id='dijitEditorBody'></div>";
setBodyId = false;
}else if(dojo.isMoz){
// workaround bug where can't select then delete text (until user types something
// into the editor)... and/or issue where typing doesn't erase selected text
this._cursorToStart = true;
html = " ";
}
Explains the reason why that tag is added...
Although you see it in your alertbox, I believe it's not present in the posted contents... right ?
The editor should take care of removing the extra-tags => not tested but pretty sure...
Related
I have a piece of code to generate a tootip using bootstrap.
var msg ="Oops! This is a test message";
$('#addItInfo').attr('data-original-title',msg);
$('#addItInfo').tooltip('show');
setTimeout( function(){
$('#addItInfo').tooltip('hide');
$('#addItInfo').removeAttr('title');
$('#addItInfo').removeAttr('data-original-title');
} , 2500 ); //Wait 2,5 seconds
This code works good, but imagine that instead of a simply message I want tho display a table with some data. I've try to create a <table> element inside the var msg like this:
var msg ="<table><tr><td>January</td><td>$100</td></tr><tr><td>February</td><td>$50</td></tr></table>";
I was expecting to see a table inside the tootip but what I got was the string <table><tr><td>January</td><td>$100</td></tr><tr><td>February</td><td>$50</td></tr></table>.
Here in this example I am using the same idea but without bootstrap. It works, with some minors issues, that I can solve later.
For now my question is how to allow bootstrap to display any HTML element inside the tooltip? I took a look at the documentation, but I found nothing related.
You are missing data-html="true" on the trigger element. Its is documented.
Html option - defaults to false. Insert HTML into the tooltip. If false, jQuery's text method will be used to insert content into the
DOM. Use text if you're worried about XSS attacks.
Working fiddle
I wrapped my gridview with Pjax widget like this
\yii\widgets\Pjax::begin();
gridview
\yii\widgets\Pjax::end();
in order to make the gridview make ajax request when I click on each pagination.
I also use ['class' => 'yii\grid\CheckboxColumn'], in column as well.
and I find that when I'm on first pagination I checked some rows and then go to second page and check some rows but when I go back to first page what I've checked is gone.
My question is how can I keep all checkedrow for all pagination
With current conditions (Pjax, multiple pages, yii\grid\CheckboxColumn) it's impossible because of the way it works.
When you click on the pagination links all GridView html content is replaced by new one that comes from the AJAX response.
So obviously all selected checkboxes on the previous page are gone.
Few possible ways to solve that:
1) Write custom javascript and server side logic.
As one of the options, you can send AJAX request to server with parameter meaning that user has chosen to select all data for the bulk delete operation (or use separate controller action for bulk deletion). In this case actually we don't need to get the selected data from user, because we can simply get them from database (credits - Seng).
2) Increase number of displayed rows per page.
3) Use infinite scroll extension, for example this.
4) Break desired action in several iterations:
select needed rows on first page, do action (for example, delete).
repeat this again for other pages.
You can get selected rows like that:
$('#your-grid-view').yiiGridView('getSelectedRows');
[infinite scroll] : http://kop.github.io/yii2-scroll-pager/ will work good if you do not have any pjax filters. If you have filters also in play, do not use this plugin as it does not support pjax filters with it. For rest of the applications it is perfect to use.
Update1 : it seems to be straight forward than expected, here is the how I accomplished it
Add following lines to the checkbox column
'checkboxOptions' => function($data){
return ['id' => $data->id, 'onClick' => 'selectedRow(this)'];
}
Now add following JS to the common js file you will have in your project of the page where this datagrid resides
var selectedItems=[]; //global variable
/**
* Store the value of the selected row or delete it if it is unselected
*
* #param {checkbox} ele
*/
function selectedRow(ele){
if($(ele).is(':checked')) {
//push the element
if(!selectedItems.includes($(ele).attr('id'))) {
selectedItems.push($(ele).attr('id'));
}
} else {
//pop the element
if(selectedItems.includes($(ele).attr('id'))) {
selectedItems.pop($(ele).attr('id'));
}
}
}
Above function will store the selected row ids in the global variable array
Now add following lines to pjax:end event handler
$(document).on('pjax:end', function () {
//Select the already selected items on the grid view
if(!empty(selectedItems)){
$.each(selectedItems, function (index,value) {
$("#"+value).attr('checked',true);
});
}
});
Hope it helps.
I just solved this problem and it works properly with Pjax.
You may use my CheckboxColumn. I hope this can help. The checked items are recorded with cookies.
You can read the part with //add by hezll to understand how to fix it, because I didn't provide a complete general one.
Hope it works for you.
https://owncloud.xiwangkt.com/index.php/s/dGH3fezC5MGCx4H
I have an Interactive Report that displays Images in one column. The images are displayed directly from Images I loaded into shared components.
The report query:
SELECT
Tbl_P.ImagePackage,
Tbl_P.PRICE as PACKAGE_PRICE,
Tbl_I.ID,
Tbl_I.Name,
Tbl_I.PRICE,
Tbl_I.Type || Tbl_I.Name as Minifigure,
Tbl_I.Quote as QUOTE,
'AddToCart.png' as ADD_TO_CART
from "Tbl_090_ImagePackages" "Tbl_P"
left outer join "Tbl_091_Images" "Tbl_I"
on Tbl_P.ID = Tbl_I.Image Package
where Tbl_P.ID = :P201_GROUP
The column in question is 'ADD_TO_CART'.
The Column attributes are as follows:
Display Type: Display as Text(escape special characters)
Link Text:
<img src=#APP_IMAGES##ADD_TO_CART# alt=Application Express height=30 width=30
Link Attributes:
ID=#ID# class="AddToCart"
Target: Page in this Application (Current Page)
The Title is defaulting to 'Application' and I can't get rid of it or change it. I have tried changing the Link Attributes to: title="Testing" ID=#ID# class="AddToCart" Unfortunately this has not worked. Any help would be much appreciated.
Thank you
Seems like your link text is malformed? Put your attributes between quotes, single or double. When you view your page source with eg Firefox, you'll notice strings highlighted in red: these are invalid html. The browser is forgiving up to a certain point, but if you confuse it enough things like this may start happening.
<img src="#APP_IMAGES##ADD_TO_CART#" alt="Application Express" height=30 width=30 />
I am working in Ektron 8.6.
I have a FormBlock Server Control in my Template Page,It is having a DefualutFormID of a valid HTML form from workarea.The form in the workarea have got few form fields and their corresponding values.
While the template page is rendering I need to GET those form field values and re-set them with some other values.
In which Page –Cycle event I should do this coding?
I tried this code in Pre-Render Event,but I am unable to GET the value there,but I am able to set a value.
I tried SaveStateComplete event as well,no luck.
String s=FormBlock1.Fields["FirstName"].Value;
If(s=”some text”)
{
// Re-set as some other vale.
FormBlock1.Fields["FirstName"].Value=”Some other value”;
}
In which event I can write this piece of code?
Page_Load works fine for changing the value of a form field. The default behavior is for the Ektron server controls to load their data during Page_Init.
The real problem is how to get the default value. I tried every possible way I could find to get at the data defining an Ektron form (more specifically, a field's default value), and here's what I came up with. I'll admit, this is a bit of a hack, but it works.
var xml = XElement.Parse("<ekForm>" + cmsFormBlock.EkItem.Html + "</ekForm>");
var inputField = xml.Descendants("input").FirstOrDefault(i => i.Attribute("id").Value == "SampleTextField");
string defaultValue = inputField.Attribute("value").Value;
if (defaultValue == "The default value for this field is 42")
{
// do stuff here...
}
My FormBlock server control is defined on the ASPX side, nothing fancy:
<CMS:FormBlock runat="server" ID="cmsFormBlock" DynamicParameter="ekfrm"/>
And, of course, XElement requires the following using statement:
using System.Xml.Linq;
So basically, I wrap the HTML with a single root element so that it becomes valid XML. Ektron is pretty good about requiring content to be XHTML, so this should work. Naturally, this should be tested on a more complicated form before using this in production. I'd also recommend a healthy dose of defensive programming -- null checks, try/catch, etc.
Once it is parsed as XML, you can get the value property of the form field by getting the value attribute. For my sample form that I set up, the following was part of the form's HTML (EkItem.Html):
<input type="text" value="The default value for this field is 42" class="design_textfield" size="24" title="Sample Text Field" ektdesignns_name="SampleTextField" ektdesignns_caption="Sample Text Field" id="SampleTextField" ektdesignns_nodetype="element" name="SampleTextField" />
On my site I have a DataList full of image thumbnails. The thumbnails are HyperLink controls that, when clicked, offer an enlarged view of the source image (stored in my database).
My client wants a facebook Like button on each image and I was hoping to put that in the lightbox window that appears when you click on a thumbnail.
My challenge here is that to generate the info for the Like, I need to create meta tags and each image should, preferably, create it's own meta tags on the fly.
What I can't figure out is how to make the HyperLink click open the lightbox AND create the meta tags at the same time.
Any help will be greatly appreciated.
For a live view of the site, go to http://www.dossier.co.za
The way that we approach similar problems is to hook the onclick event of the href in javascript.
Depending on exactly what you need to do, you can even prevent the standard browser behavior for the hyperlink from executing by returning false from the javascript method.
And in some cases, we just use the hyperlink for "show" by setting the href to "#".
Here is an example that combines all of these concepts:
File Name
In this case, the specified javascript is executed, there is no real hyperlink, and the browser doesn't try to navigate to the specified URL because we return false in the javascript.
Add a Classname to the opening table tag like class="tbl_images" so we can use JQuery to access it. Capture the click on the td and pickup the id of the item. Pass that id to your code as required to generate your meta tags. In the following when the user clicks on an anchor in a td, a function will run.
I use this all the time to access attributes in the td so i can run a function. You could use something like this to pickup values from your image/anchor and create something...
$("#tbl_images > tbody > tr ").each(function () {
//get the id of the tr (if required)
var id = $(this).attr("id");
var ImageTitle = $(this).find("img.Image_Class_Name").attr("title");
//on click of anchor with classname of lighthouse run function,
//passing in our id or other data in the row to our function
$(this).find("td: > a.lighthouse").click(function () {
//update script for this record
MyFunction(id,ImageTitle);
});
});