Colorbox and Dynamic Inline HTML - html

I've got a form in .NET.
when the user presses submit, a sub is launched to check all checkboxes, radiobuttons, etc...
and when there's an issue, i'm adding the specific issue to a stringbuilder
as per below
Dim errors As New StringBuilder
If APACradio.Checked = False And EMEAradio.Checked = False And LATAMCANADAradio.Checked = False Then
errors.AppendLine(" You must select a Region")
End If
If CountryDDL.SelectedValue = "Select" Then
errors.AppendLine(" You must select a Country")
End If
If EmploymentDDL.SelectedValue = "Select" Then
errors.AppendLine(" You must select a Employment Type")
End If
etc....
At the end of the check, i would like a Colorbox to appear, listing the lines of the stringbuilder, one by one.
I've worked with colorbox's inline HRef's before and i love that but this is a bit different as i can not preload my document with the code here.
Colorbox page itself shows samples on how to load a HTML page (sample 5) but my HTML i want to show would be rather in memory than on a disk somewhere

Why not use ColorBox's html property? Example:
$.colorbox({html:function(){
var html = '';
// do your formatting
return html;
}});

Related

Click html button and enable button in Visual Basic

I'm new with Visual Basic and I have a simple app in visual basic using the WebBrowser component, the web page that is loaded has a button (html) and I would like to enable a button of visual basic when press that html button, I have no idea how to achieve this, I read that I can do this but not how, I searched here in SO and youtube but I didn't found what I'm looking for, can you help me to achieve this please?, thanks.
<button type="button" id="login">Login</button>
I can simplify that for you :), and its very easy.
What I am using is the following:
1- HTML page "Index.html" with one simple javascript function called "CheckStat" to change your buttons value.
2- Form with 1 Button, 1 WebBrowser and 1 Timer.
"Index.html"
<!DOCTYPE html>
<html>
<head>
<title>HTML - VB.NET</title>
<script>
function CheckStat(){
document.getElementById("login").innerHTML = "clicked";
}
</script>
</head>
<body>
<button type="button" id="login" onclick="CheckStat();">Login</button>
</body>
</html>
This is what I did from Visual Studio, first this is my code:
"Form1.vb"
Public Class Form1
Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
'I am using localhost, it's not required you can simply put your HTML file on your Desktop or you can get it from any website.
WebBrowser1.Url = New Uri("http://localhost/stackoverflow.com/AN03/index.html")
'Enalbe Timer
Timer1.Enabled = True
End Sub
Private Sub Timer1_Tick(sender As Object, e As EventArgs) Handles Timer1.Tick
Try
'Get that our HTML button, as you see i am using GetElementById("HTML BUTTON ID HERE")....
Dim loginbtn = WebBrowser1.Document.GetElementById("login")
If loginbtn.InnerHtml = "clicked" Then
'Disable what button you want to disable...
Button1.Enabled = False
'Change HTML text to something else because every 100 interval it checks again and again...
loginbtn.InnerHtml = "click me"
'This message box just shows you were clicked or not. you can simply remove it
MessageBox.Show("Clicked me is enabled")
End If
Catch ex As Exception
'for any problem, it shows this message box to the user and tells him/her what was wrong....
MessageBox.Show(ex.Message)
End Try
End Sub
End Class
Because you said i am new for VB.net, let me tell you what is going on. when you click on Button1 the WebBrowser will load that file for you, and also enables Timer1.
now browser loaded the page and timer1 run that code every 100 intervals 1 Sec = 1000 interval, first it searches for all Element from HTML page which its ID equals to "login" and it returns to the variable called "loginbtn".
then it checks for its value (The text or caption that appears on HTML button) if it's equal to "clicked" then it means user click the HTML button.
Then it disables Button (VB's Button), changes HTML'S Button value to "click me again" and shows message box...
For any problem, it shows this message box to the user and tells him/her what was wrong....
Yes you can do it, but i used timer because it check it every i.e 1 min or 1 hour or any time you set...I updated for you and i created this function please let me know if you don't understand it or anything else....
you can disable or remove your timer, add one button and add this simple code to it which i put it in Button2...
one more thing, if you see i create my function as a Private, so you can't called from any other form, or class, etc.
you can change it to Public so you can use it anywhere in your app.
How do i call it then? .
like this : Form1.CheckStatByid("login"). updated code is :
Dim _Stat As Boolean = False
Private Function CheckStatByid(ByVal htmlid)
' Check sended paramiter
' IF it has no value then we need to end our function,
' Else we can check its value...
If htmlid <> Nothing Then
Try
'Get that our HTML button, as you see i am using GetElementById("HTML BUTTON ID HERE")....
Dim loginbtn = WebBrowser1.Document.GetElementById(htmlid)
'Check loginbtn if it has a value or NOT
If loginbtn <> Nothing Then
If loginbtn.InnerHtml = "clicked" Then
'Change HTML text to 'click me again', but you can change it to anything else...
loginbtn.InnerHtml = "click me again"
_Stat = True
Else
'If we have some value (ID) returns from our HTML, but it doesn't match our ID which is "login"
MessageBox.Show("loginbtn variable has deffrent id OR button is not clicked yet. and we end the try...catch")
Exit Try
End If
Else
'We don't find any elements from our HTML page...
MessageBox.Show("loginbtn variable has no value. and we end the try...catch")
Exit Try
End If
Catch ex As Exception
'for any proble it shows this message box to user and tell him/her what was wrong....
MessageBox.Show(ex.Message)
End Try
Else
' We don't have any ID to check...
MessageBox.Show("Please recall the function with an ID...")
End If
' Retuen _Stat : if the IF statment was true then it returns TRUE, else it returns FASLE
Return _Stat
End Function
Private Sub Button2_Click(sender As Object, e As EventArgs) Handles Button2.Click
' How to use our function? its easy
' check it with some value.
If CheckStatByid("login") = True Then
' User Clicked the HTML button, we can now disable our button or do any thing else...
Button1.Enabled = False
Else
' User doesn't clicked the button or any other stat has been returned from our function.
' Message box will show for any stat...
' if you like, you can simply remove those message box from function and put them here...
MessageBox.Show("HTML page is not loaded or user doesn't clicked...")
End If
End Sub
Hope you understand it. and I am sorry for any grammar or spelling error.
...

How to get elements added in html editor

I have an html editor (ckeditor) in my vb.net application. after the user adds controls(buttons, input, text...) in the editor, he clicks on a button. after clicking that button i want to take all the elements added from that html editor... is there any way i can do it? I can get the text as string, but is there a way i can "transform" that string into html and get all the tags/controls added? ]
I'm new at this so please, excuse my errors. Thank you!
this is the function fired after button click
'ckeditor ID = "TBHTMLText"
Protected Sub btnGetElements_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnGetElements.Click
dim textAddedByUser as string
textAddedByUser = TBHTMLText.Text
End Sub
this textAddedByUser is everything the user adds in the editor so I was thinking if i develop an algorithm that can help me take every single tag and get the ID of each control added... but I think there is an easier way to do it. If so help me please.
I don't know anything about vb.net but with JavaScript you might have a listener for CKEditor's "change" event. Or, if you wanted to get the content from an editor instance upon the triggering of some arbitrary event, you could use CKEditor's getData() method. This would give you the raw HTML.
Examples:
When an arbitrary event is fired:
var editor = $(e.currentTarget).ckeditorGet();
var data = editor.getData();
var el = editor.element.$;
Setting up a "change" listener for CKEditor instances:
$.each(CKEDITOR.instances, function(i, editor) {
editor.on("change", function(e) {
var data = e.sender.getData();
var el = editor.element.$;
...
});
});

Outer container 'null' not found.

used jssor slider , i have some pages with same jssor slider , some pages are working fine , but some pages comes Outer container 'null' not found. bug , can any one help on this ?
I had a similar problem, so did some digging to see what the issue was.
The setup starts with the initial call, here's the snippet from the demo site
http://www.jssor.com/development/index.html
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
which, among setting up all kinds of utility functions- more importantly does this
function JssorSlider(elmt, options) {
var _SelfSlider = this;
...
// bunch of other functions
...
$JssorDebug$.$Execute(function () {
var outerContainerElmt = $Jssor$.$GetElement(elmt);
if (!outerContainerElmt)
$JssorDebug$.$Fail("Outer container '" + elmt + "' not found.");
});
}
so at this point, it's trying to collect the string you passed, which is the elmt variable- which is for what? Well let's take a look at that $GetElement function in jssor.js
_This.$GetElement = function (elmt) {
if (_This.$IsString(elmt)) {
elmt = document.getElementById(elmt);
}
return elmt;
};
So, really, what it comes down to is this line for finding the element.
elmt = document.getElementById(elmt);
So the base of this error is
"We tried to use your string to find a matching ID tag on the page and it didn't give us a valid value"
This could be a typo, or another line of code modifying/removing the DOM.
Note that there are some scripts try to remove or modify element in your page.
Please right click on your page and click 'Inspect Element' menu item in the context menu.
Check if the 'outer container' is still there in the document. And check if there is another element with the same id.
Check if "Slider1_Container" is present or Used.
In my case, I didn't have it in my html, but still I had added the js.
Removing js resolved my issue.

AJAX HTMLEditorExtender on postback tables don't display

I am currently using an Ajax tool; HTMLEditorExtender to turn a textbox into a WYSIWYG editor, in a C# ASP.NET project. On the initial page load I place a large amount of formated text and tables into the editor which appears fine; even the tables.
The data is loaded into an asp:panel and the items/display from the panel is what is actually loaded into the extender and displayed.
However, if I want to have a button that saves all of the data that is in the editor to a Session and after the button press still display everything in the WYSIWG editor on the page postback everything that loads in the the textbox is fine except for the tables. They come up with the tags. Is there anyway around this?
The code I am using to initially load the page is this:
ContentPlaceHolder cphMain = (ContentPlaceHolder)this.Master.FindControl("MainContent");
Panel pnlContent = (Panel)cphMain.FindControl("innerFrame");
StringBuilder sb = new StringBuilder();
StringWriter sw = new StringWriter(sb);
HtmlTextWriter hw = new HtmlTextWriter(sw);
pnlContent.RenderControl(hw);
txtPN.Text = sb.ToString();
pnlContent.Visible = false;
On the button click I am having this saved:
string strHTMLText = txtPN.Text;
Session["ProgressNoteHTML"] = strHTMLText;
And I am loading it on the postback like this:
txtPN.Text = (string)Session["ProgressNoteHTML"];
ContentPlaceHolder cphMain = (ContentPlaceHolder)this.Master.FindControl("MainContent");
Panel pnlContent = (Panel)cphMain.FindControl("innerFrame");
pnlContent.Visible = false;
Any ideas as to why any postbacks would make the tags appear and in the original page load they do not?
The solution offered by Erik won't work for table tags containing property values. For instance: <table align="right"> will not be decoded. I have also found that <img> tags are encoded by the HTMLEditorExtender as well.
The easier solution is to use the Server.HTMLDecode() method.
TextBox_Editor.Text = Server.HtmlDecode(TextBox_Editor.Text) 'fixes encoding bug in ajax:HTMLEditor
I have the same problem, It seems to have something to do with the default sanitizing that the extension performs on the HTML content. I haven't found a way to switch it off, but the workaround is pretty simple.
Write an Anti-Sanitizing function that replaces the cleansed tags with proper tags. Below is mine written in VB.Net. A C# version would look very similar:
Protected Function FixTableTags(ByVal input As String) As String
'find all the matching cleansed tags and replace them with correct tags.
Dim output As String = input
'replace Cleansed table tags.
output = output.Replace("<table>", "<table>")
output = output.Replace("</table>", "</table>")
output = output.Replace("<tbody>", "<tbody>")
output = output.Replace("</tbody>", "</tbody>")
output = output.Replace("<tr>", "<tr>")
output = output.Replace("<td>", "<td>")
output = output.Replace("</td>", "</td>")
output = output.Replace("</tr>", "</tr>")
Return output
End Function

call code behind functions with html controls

I have a simple function that I want to call in the code behind file name Move
and I was trying to see how this can be done and Im not using asp image button because not trying to use asp server side controls since they tend not to work well with ASP.net MVC..the way it is set up now it will look for a javascript function named Move but I want it to call a function named move in code behind of the same view
<img alt='move' id="Move" src="/Content/img/hPrevious.png" onclick="Move()"/>
protected void Move(){
}
//based on Search criteria update a new table
protected void Search(object sender EventArgs e)
{
for (int i = 0; i < data.Count; i++){
HtmlTableRow row = new HtmlTableRow();
HtmlTableCell CheckCell = new HtmlTableCell();
HtmlTableCell firstCell = new HtmlTableCell();
HtmlTableCell SecondCell = new HtmlTableCell();
CheckBox Check = new CheckBox();
Check.ID = data[i].ID;
CheckCell.Controls.Add(Check);
lbl1.Text = data[i].Date;
lbl2.Text = data[i].Name;
row.Cells.Add(CheckCell);
row.Cells.Add(firstCell);
row.Cells.Add(SecondCell);
Table.Rows.Add(row);
}
}
Scott Guthrie has a very good example on how to do this using routing rules.
This would give you the ability to have the user navigate to a URL in the format /Search/[Query]/[PageNumber] like http://site/Search/Hippopotamus/3 and it would show page 3 of the search results for hippopotamus.
Then in your view just make the next button point to "http://site/Search/Hippopotamus/4", no javascript required.
Of course if you wanted to use javascript you could do something like this:
function Move() {
var href = 'http://blah/Search/Hippopotamus/2';
var slashPos = href.lastIndexOf('/');
var page = parseInt(href.substring(slashPos + 1, href.length));
href = href.substring(0, slashPos + 1);
window.location = href + (++page);
}
But that is much more convoluted than just incrementing the page number parameter in the controller and setting the URL of the next button.
You cannot do postbacks or call anything in a view from JavaScript in an ASP.NET MVC application. Anything you want to call from JavaScript must be an action on a controller. It's hard to say more without having more details about what you're trying to do, but if you want to call some method "Move" in your web application from JavaScript, then "Move" must be an action on a controller.
Based on comments, I'm going to update this answer with a more complete description of how you might implement what I understand as the problem described in the question. However, there's quite a bit of information missing from the question so I'm speculating here. Hopefully, the general idea will get through, even if some of the details do not match TStamper's exact code.
Let's start with a Controller action:
public ActionResult ShowMyPage();
{
return View();
}
Now I know that I want to re-display this page, and do so using an argument passed from a JavaScript function in the page. Since I'll be displaying the same page again, I'll just alter the action to take an argument. String arguments are nullable, so I can continue to do the initial display of the page as I always have, without having to worry about specifying some kind of default value for the argument. Here's the new version:
public ActionResult ShowMyPage(string searchQuery);
{
ViewData["SearchQuery"] = searchQuery;
return View();
}
Now I need to call this page again in JavaScript. So I use the same URL I used to display the page initially, but I append a query string parameter with the table name:
http://example.com/MyControllerName/ShowMyPage?searchQuery=tableName
Finally, in my aspx I can call a code behind function, passing the searchQuery from the view data. Once again, I have strong reservations about using code behind in an MVC application, but this will work.
How to call a code-behind function in aspx:
<% Search(ViewData["searchQuery"]); %>
I've changed the arguments. Since you're not handling an event (with a few exceptions, such as Page_Load, there aren't any in MVC), the Search function doesn't need the signature of an event handler. But I did add the "tablename" argument so that you can pass that from the aspx.
Once more, I'll express my reservations about doing this in code behind. It strikes me that you are trying to use standard ASP.NET techniques inside of the MVC framework, when MVC works differently. I'd strongly suggest going through the MVC tutorials to see examples of more standard ways of doing this sort of thing.