TinyMCE not working after partial postback in update panel - asp.net

I am trying to use TinyMCE editor with my text area in an update panel. On the first page load it works fine, but as soon as the update panel updates the text area lost its formatting and become a simple text area than a rich text editor.
I have tried some solutions but it did not worked. Any help will be highly appreciated.
Best Regards,

You need to initialize your tinyMce again after each partial postback. You can do this by using:
$(document).ready(function () {
BindEvents();
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
BindEvents();
});
});
And on your BindEvents() function place your code for initilize tinyMce or any other events you want to keep alive after the postback.
function BindEvents() {
//bind your jquery events and TinyMce initialization
}

Related

How to know which button of User Control is clicked from parent form Asp.net?

I want to capture which button is clicked in page load method of code behind file.
Button is user control button and It does not post back. Since it used by many other forms, I don't want to changes that button.
I tried this
Dim ButtonID As String = Request("btnRefresh.ID")
But it doesn't work.
Is it possible to know without touching in user control and using Javascript?
Thank you
As described here How to check whether ASP.NET button is clicked or not on page load:
The method: Request.Params.Get("__EVENTTARGET"); will work for
CheckBoxes, DropDownLists, LinkButtons, etc.. but this does not work
for Button controls such as Buttons and ImageButtons
But you have a workaround, first of all you have to define a hidden field in the Parent Page. In this field you will store which button inside the user control was clicked using javascript/jquery. And then in your Parent Page Page_Load method you just read the hiddenField.Value property:
JQuery
1) Add listener to every input type submit button:
$(document).ready(function () {
$("input[type=\"submit\"]").on("click", function () {
alert(this.name);
$("#hiddenField1").val(this.name);
});
});
2) [Better one] Add listener to some indentificable div inside the user control and delegate the event to child inputs like this:
$(document).ready(function () {
$("#someElementOfUserControl").on("click", "input[type=\"submit\"]", function () {
alert(this.name);
$("#hiddenField1").val(this.name);
});
});
Javascript
Since everything done with JQuery can be done with Javascript you can do the following (i will not write both samples, just one):
function handleClick(event) {
alert(event.target.name);
document.getElementById("hiddenField1").value = event.target.name;
}
var inputsInUC = document.getElementsByTagName('input');
for (i = 0; i < inputsInUC.length; i++) {
inputsInUC[i].addEventListener('click', handleClick, false);
}
Remember to define this javascript after all your html elements.
EDIT:
Also, for the completeness of the answer let me tell you that the proper way in case you can change the user control behaviour is to use events as described here How do i raise an event in a usercontrol and catch it in mainpage?

asp.net lock grid when checkbox selected

I have a grid that includes a checkbox control with Autopostback=yes and CheckChanged calling a routine in the vb.net code that updates the record with the checkbox value. When a checkbox is clicked it takes a second or two to run the code and return control back to the web page. I have some users that are clicking several checkboxes one after another so the program is not being called correctly and they are getting a hodgepodge of updated records. For now my solution is for them to wait until the page refreshes before they click the next one. Pretty lamo. Does anyone have any suggestions to work around this problem?
Thanks!
You could write a little jQuery function to temporarily hide your checkbox immediately after it has been checked.
Maybe extend the code below slightly to display a <div id="loading">Loading...</div> or loading .gif image to the user so that they know that your page is being processed and don't get frustrated:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#" + "<%: CheckBox1.ClientID %>").change(function () {
if (this.checked) {
$(this).hide()
}
});
});
</script>
Thanks so much Dennis! Your solution finally got me learning jQuery (which I have wanted to do for some time) and helped me get it to work like I wanted.
When the grid loads all the check boxes show with their values. When one is clicked the jquery below runs and hides them all. I have an OnCheckedChanged event on the asp checkbox control that calls the program and updates the clicked record, and when the grid loads again all the check boxes show with their correct values. Totally cool!
<script src="../Scripts/jquery-3.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$("input:checkbox").click(function () {
$("input:checkbox").hide();
});
});
</script>

Clear asp.net form on jquery ui dialog cross click

I am using jquery-ui modal with gridview to add/update records in an asp.net application. The user can click on the cross to close the modal? I want to clear the modal content (including any ViewState). So far I have used the following code:
$('#editData').dialog({
....
close: function () {
**// Here I want to clear the form**
}
You can just reset the form:
$('#formId').trigger("reset");
$('#editData').dialog({
....
close: function () {
// Here I want to clear the form
$('#formId').trigger("reset");
});
http://jsfiddle.net/pNALN/1/
You can also use document.forms["formId"].reset(); if you wanted to achieve it via JavasScript.

ASP GridView to be updated automatically when ModalDialog is closed

I have a gridView with search and filtering options, it is listing document from SharePoint Library, when i click on the Document name i added a Modal popup to display Documents properties page, if i update Document's title for example and select save, the item is updated but the gridview is still showing the old title, i need to press Search again in order to refresh the values.
the code i use for model popup is:
<script type="text/javascript">
function openModal(url) {
var options = SP.UI.$create_DialogOptions();
options.url = url;
options.dialogReturnValueCallback = Function.createDelegate(null, CloseCallback);
SP.UI.ModalDialog.showModalDialog(options);
}
// Dialog callback
function CloseCallback(result, target) {
if (result === SP.UI.DialogResult.OK) {
SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);
}
}
</script>
what should i do to refresh and bid gridview data when the popup is closed?
on the click of save button, make a serverside call to rebind the gridview. i.e
$(document).ready(function(){
$('id_of_save_button').click(function(){
//ajax call of serverside method to rebind the grid.
});
});
However with asp.net these things become little easy if you use modalPopupExtender that ships with asp.net
Hi for handling sharepoint save event using javascript u can use this function
function PreSaveAction()
{
// write your gride view data bind code
}

How to enable dynamic links to open thickbox in Google Map balloon?

I'm using following code to open thickbox for dynamically generated anchor tags, but it doesn't work for the first time, but second time it works.
function createMarker(point, InnerAddress) {
//Other Code
var strFBUserID = new GMarker(point, markerOptions);
GEvent.addListener(strFBUserID, "click", function() {
strFBUserID.openInfoWindowHtml(InnerAddress.split('$$')[0]);
tb_init('a.gmapthickbox');//works second time
});
allmarkers.push(strFBUserID);
return strFBUserID;
}
It seems tb_init fires before, openInfoWindowHtml, any way to solve this issue? I tried setTimeOut but no success. Any help will be greatly appreciated.
Try listening to the infowindowopen event on your map instance before calling tb_init. It should be fired once the content is ready in the DOM.
http://code.google.com/apis/maps/documentation/javascript/v2/reference.html#GMap2.infowindowopen

Resources