I am using Asp text box with Ajax html editor extender. My issue is i don't want to allow to paste the content which is copied from some other source into my text box. And also in my text box when i am clicking the enter(for next line) it is stored as Div tag in my data base how to resolve these two issues. Please let me know the solutions.
Try this See Reference
$(document).ready(function () {
$('input.disablecopypaste').bind('copy paste', function (e) {
e.preventDefault();
});
});
Related
I have been searching for a way to hide or disable the Add button in an ASP.Net grid view footer template. I have found lots of articles explaining how to hide the Delete Edit options in the grid view but that is not what I want to do.
The Delete, Edit, and Add all work fine but I need to hide the Add button when the user clicks Edit to edit a row.
How can I do this?
You can use jQuery to hide another button.
Example:
<script type="text/javascript">
$("#editButton").click(function () {
$("#view").hide();
$("#edit").show();
$("#cancelButton").show();
$("#editButton").hide();
});
$("#cancelButton").click(function () {
$("#edit").hide();
$("#view").show();
$("#editButton").show();
$("#cancelButton").hide();
});
</script>
I am currently using CKEditor as my WYSIWYG editor for the text on my site. And I just ran into a problem of using this editor with angular's partial views. The views are hidden with ng-hide and ng-show.
When I am outside of my current partial view the editor works fine. Meaning the tool bar pops up, the buttons on the tool bar work, and the text is editable as well.
However when I am in my partial view the popup still comes up, but the text is not editable, and the buttons are disabled.
This is my current code to bring up the editor
plunker.directive('ckEditor', function($http, $timeout) {
return {
require: '?ngModel',
link: function(scope, elm, attr, ngModel) {
var ck = CKEDITOR.inline(elm[0]);
if (!ngModel) return;
ck.on('pasteState', function() {
scope.$apply(function() {
ngModel.$setViewValue(ck.getData());
});
});
ngModel.$render = function(value) {
ck.setData(ngModel.$viewValue);
};
}
};
});
So my question is has anyone gotten CKEditor to work with partial views? If so how did you do it?
You have not provided any example, so it's hard to tell. There may be few reasons,
check if the element type is supported by CKEditor - if not you'll have to hack CKEditor config by copying some settings from div
ensure your element has contenteditable='true'
ensure you are manually instrumenting CKEditor to provide editor for your partials.
you may also want to read this:
Enable CKEditor4 inline on span and other inline tags
http://docs.ckeditor.com/#!/api/CKEDITOR.dtd-property-S-editable
So I have a rather odd issue that I wanted to see if anyone has some insight into.
I have a page in which I display a grid of files that have been uploaded to our server. The toolbar for the grid provides them with the ability to upload more files. When they click the "Add File" button on the toolbar, a jQuery UI Dialog modal window appears with a simple file upload control in it. After they select a file, they click the "Upload" button on the Dialog which submits the underlying form for uploading. Also note that because I'm using asp.net, there is only one form on the page so I'm not submitting the wrong form.
Now... when I attempt to look for uploaded files on the backend, no files are uploaded. What's worse, if I move the upload control out of the dialog div and use it straight from the page without a dialog, the uploads work fine.
This leads me to believe that even though I am defining the div that will become my dialog within the main form to allow it to submit with a postback, jQuery is somehow moving it or disassociating it from the form.
Is this possible? Or is there something else I may be missing? I can't seem to find any documentation that says either way. Thanks in advance!
You need to move the dialog to inside the form.
var dialog = $("#dialog").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Upload": function() {
__doPostBack('uploadfile', '');
$( this ).dialog( "close" );
},
Cancel: function() {
$(this).dialog("close");
}
}
});
dialog.parent().appendTo($("form:first"));
You're right. Dialog moves its content outside of its form, and appends it to body. Probably to gain better control of the DOM, to make sure it always displays in the center, above everything else, and is not contained in some absolutely positioned DIV or so...
What is occurring here is that the Block UI removes all click functionality on buttons within its modal. To get around this the best solution I have found is to have a hidden button which will then do the desired processing.
Here is an example:
HTML
<asp:Button runat="server" ID="btn_Upload" OnClientClick="UploadFiles(); return false;" />
<asp:Button runat="server" ID="btn_UploadClick" OnClick="btn_UploadFiles_Click" style="display:none;" />
Javascript/Jquery
function UploadFiles()
{
$.unblockUI({
onUnblock: function() {
$('[id$=btn_UploadClick]').click();
}
});
}
Please refer to this page for reference: http://loadedgranola.valitics.com/_product_83484/blackberry_lime
I have a jQuery script that runs to replace the h1 tags with a background image. It works great when the document loads but when I click "add to cart", after the javascript alert the jQuery styling breaks. Due to CMS restrictions I have no direct access to their javascript or any of the ASP files but I assume there has to be an easy fix to this.
The code I'm using:
jQuery(document).ready(function(){
var textReplacer = document.title.replace(/ /g,'');
jQuery("h1").addClass('replaced').css("background","url(../images/h1/" + textReplacer + ".png) no-repeat 0 0");
});
I have also tried using the function pageLoad(sender, args) { magic but no luck.
Here you go ..
jQuery(document).ready( function() {
jQuery('<style type="text/css" media="screen">h1{text-indent:-9999px!important;background:url(../images/h1/'+document.title.replace(/ /g,'') +'.png) no-repeat 0 0!important;}</style>').appendTo('head');
});
what it does is add a new css rule that pushes the text way out of the box and adds the background image
Here is what is happening:
When you submit the shopping cart it's doing an AJAX call. The result of that call replaces most of the HTML on the page. Any changes you made before that get replaced.
Possible Solution
You would have to run that replace script again after the AJAX call is complete.
Questions
Why are you replacing the H1 tags on load? What problem are you trying to solve? You might be able to find a better CSS solution.
Using the viewer control for display of SQL Reporting Services reports on web page (Microsoft.ReportViewer.WebForms), can you move the View Report button? It defaults to the very right side of the report, which means you have to scroll all the way across before the button is visible. Not a problem for reports that fit the window width, but on very wide reports that is quickly an issue.
No, you cannot reposition the view report button in the ReportViewer control.
However, you could create your own custom report viewing control. The control would be comprised of fields for report parameters and a button to generate the report. When a user clicks the button you could generate the report in the background. You could display the report as a PDF, HTML, etc.
It's kind of a hack, but you can move it in JavaScript. Just see what HTML the ReportViewer generates, and write the appropriate JavaScript code to move the button. I used JavaScript to hide the button (because we wanted our own View Report button). Any JavaScript code that manipulates the generated ReportViewer's HTML must come after the ReportViewer control in the .aspx page. Here's my code for hiding the button, to give you an idea of what you'd do:
function getRepViewBtn() {
return document.getElementsByName("ReportViewer1$ctl00$ctl00")[0];
}
function hideViewReportButton() { // call this where needed
var btn = getRepViewBtn();
btn.style.display = 'none';
}
The reason the button is pushed over to the right is that the td for the parameters has width="100%". I'm solving this problem with the following jquery. It simply changes the width of the parameters td to 1. Browsers will expand the width on their own to the width of the contents of the element. Hope this helps.
<script type="text/javascript">
$(document).ready(function() {
$("#<%= ReportViewer1.ClientID %> td:first").attr("width", "1");
});
</script>
Since I was searching for this answer just yesterday, I thought I'd post what I came up with to solve our problem. Our reports were coming back wide, and we wanted the "view reports" button to exist on the left side of the control so there was no need to scroll to get to the button. I did need to go into the source of the rendered file to find the ID names of the button and the target table.
I wrote a simple cut and paste javascript function to pull the button from its original position and essentially drop it into the next row in the containing table below the date pickers.
function moveButton() {
document.getElementById('ParameterTable_ctl00_MainContent_MyReports_ctl04').appendChild(document.getElementById('ctl00_MainContent_MyReports_ctl04_ctl00'));
}
This function gets called on the report viewer load event.
ScriptManager.RegisterStartupScript(Me, Me.GetType(), "moveButton", "moveButton();", True)
To adjust the position, I used the CSS ID.
#ctl00_MainContent_MyReports_ctl04_ctl00 {
margin: 0px 0px 0px 50px;
}
I had the same problem and ended up using an extension on Travis Collins answer; As well as changing the table column width I also align the "View Report" button left so that it appears neearer to rest of the controls.
<script type="text/javascript">
$(document).ready(function() {
$("#_ctl0_MainContent_reportViewer_fixedTable tr:first td:first-child").attr("width", "1");
$("#_ctl0_MainContent_reportViewer_fixedTable tr:first td:last-child").attr("align", "left");
});
</script>
You may need to tweak the JQuery selector depending on the element naming assigned to your existing control.