question:
I am working with jQuery sortable.
I used this tutorial:
http://www.xmech.net/programming/jquery-ui-sortable-tutorial/
Now this gives me a string like:
ID[]=2&ID[]=3&ID[]=4&ID[]=1
or even worse, when I call the id's IDa_1, IDb_2, IDc_3, IDd_4 it gives me
IDb[]=2&IDc[]=3&IDd[]=4&IDa[]=1
I find this format maximum horrible and unuseful...
I want just pages : ["IDb_2", "IDc_3", "IDd_4", "IDa_1"]
and have the order of the element in the array index.
To rectify this, I did:
var xxx = { pages: $(this).sortable('toArray') };
alert(JSON.stringify(xxx));
This is my home controller:
public string SaveSortable(string pages)
{
string strPages = Request.Params["pages"];
Console.WriteLine(pages);
return pages;
}
public ActionResult Sortable()
{
return View();
} // End Action Sortable
The problem is, both "pages" and strPages is always null...
It gets into the right controller though...
What am I doing wrong ?
This is my .cshtml:
#{
Layout = null;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css" media="all">
html {margin: 0px; padding: 0px; height: 100%;}
body {margin: 0px; padding: 0px; height: 100%;}
input{margin: 0px; padding: 0px; }
</style>
<style type="text/css" media="all">
.menu li
{
list-style: none;
padding: 10px;
margin-bottom: 5px;
border: 1px solid #000;
background-color: #C0C0C0;
width: 150px;
display: inline;
}
</style>
<script type="text/javascript" src="#Url.Content("~/Scripts/jQuery/jquery-1.7.2.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jQuery/jquery-ui/1_8_21/js/jquery-ui-1.8.21.custom.min.js")"></script>
<script type="text/javascript" language="javascript">
Date.prototype.getTicksUTC = function () {
return Date.parse(this.toUTCString()) + this.getUTCMilliseconds();
} // End Function getTicksUTC
var tickURL = '#Url.Content("~/Scripts/jQuery/SlickGrid/images/tick.png")';
$(document).ready(function () {
//$('#menu-pages').sortable();
$("#menu-pages").sortable({
update: function (event, ui) {
alert("posting");
//var ElementsOrder = $(this).sortable('toArray').toString();
var ElementsOrder = $(this).sortable('toArray');//.toString();
//alert(JSON.stringify(ElementsOrder));
var xxx = { pages: $(this).sortable('toArray') };
//alert(JSON.stringify(xxx));
//document.writeln("<h1>"+ JSON.stringify(xxx) + "</h1>");
// $.post("#Url.Action("SaveSortable", "Home")?no_cache=" + new Date().getTicksUTC(), { pages: $('#menu-pages').sortable('serialize') });
// $.post("#Url.Action("SaveSortable", "Home")?no_cache=" + new Date().getTicksUTC(), { pages: $('#menu-pages').sortable('serialize', { key: 'id' }) });
$.post("#Url.Action("SaveSortable", "Home")?no_cache=" + new Date().getTicksUTC(), { pages: $(this).sortable('toArray') });
}
});
});
</script>
</head>
<body>
<ul class="menu" id="menu-pages">
<li id="ID_1">Home</li>
<li id="ID_2">Blog</li>
<li id="ID_3">About</li>
<li id="ID_4">Contact</li>
</ul>
</body>
</html>
Simply use a JSON request:
$('#menu-pages').sortable({
update: function (event, ui) {
$.ajax({
url: '#Url.Action("SaveSortable", "Home")',
type: 'POST',
cache: false,
contentType: 'application/json',
data: JSON.stringify({ pages: $(this).sortable('toArray') }),
success: function(result) {
// ...
}
});
}
});
and then:
[HttpPost]
public ActionResult SaveSortable(string[] pages)
{
// pages will contain what you need => a list of ids
...
}
For the record, here's how the JSON request POST payload will look like:
{"pages":["ID_2","ID_3","ID_1","ID_4"]}
Related
I m trying to use some code which i find in Embedding a bot on a website .
I know it have been some updates, my question is if BotChat.App is avaible to use.
Because i use the BotChat.App and gave me this error Uncaught ReferenceError: BotChat is not defined.
I try to change it to window.WebChat.renderWebChat and it works but gave me the error in this line document.getElementsByClassName("wc-header")[0].setAttribute("id", "chatbotheader");
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<style>
#mychat {
margin: 10px;
position: fixed;
bottom: 30px;
right: 10px;
z-index: 1000000;
}
</style>
</head>
<body>
<div id="container">
<h1>Hello World</h1>
<!--other page contents-->
<img id="mychat" src="https://i.stack.imgur.com/RD7i4.png" style="float:right" />
</div>
</body>
</html>
<script>
(function () {
var div = document.createElement("div");
document.getElementsByTagName('body')[0].appendChild(div);
div.outerHTML = "<div id='botDiv' style='width: 400px; height: 0px; margin:10px; position: fixed; bottom: 0; right:0; z-index: 1000;><div id='botTitleBar' style='height: 40px; width: 400px; position:fixed; cursor: pointer;'></div></div>";
BotChat.App({
directLine: { secret: 'myAppSecret' },
}, document.getElementById("botDiv"));
document.getElementsByClassName("wc-header")[0].setAttribute("id", "chatbotheader");
document.querySelector('body').addEventListener('click', function (e) {
e.target.matches = e.target.matches || e.target.msMatchesSelector;
if (e.target.matches('#chatbotheader')) {
var botDiv = document.querySelector('#botDiv');
botDiv.style.height = "0px";
document.getElementById("mychat").style.display = "block";
};
});
document.getElementById("mychat").addEventListener("click", function (e) {
document.getElementById("botDiv").style.height = '500px';
e.target.style.display = "none";
})
}());
</script>
Uncaught ReferenceError: BotChat is not defined html:31
As the error suggests this is due to the fact that , though you utilize BotChat.App, you haven't got a reference to BotChat.
Try importing <script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script> within the header section.
Pretty simplistic markup. I want to add a box with rounded corners to my form. So, I have this CSS markup:
#rcorners2 {
width:800px;
height:150px;
background:lightGrey;
border-radius: 10px 10px 10px 10px;
border: 2px solid black;
overflow:hidden;
}
It's "called" from this div:
<div id="rcorners2">
<table>
<tr>
<td>Blah</td>
<td>Blah</td>
</tr>
</table>
</div>
My app has a CSS file, so I added that markup to it. Nothing happens. No markup, the form loads with a generic square table in it.
I move the markup to the header section of my page and it works fine.
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<link rel="stylesheet" href="Content/themes/base/jquery-ui.css">
<!-- <link rel="stylesheet" href="/resources/demos/style.css"> -->
<script src="Scripts/jquery-ui-1.11.0.js" type="text/javascript"></script>
<!-- <script src="Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.24.min.js" type="text/javascript"></script> -->
<!--//**********************************
// Comment Character Count
//********************************** -->
<script type="text/javascript">
function textCounter(field, countfield, maxlimit) {
setTimeout(function () {
if (field.value.length > maxlimit)
field.value = field.value.substring(0, maxlimit);
else
countfield.value = maxlimit - field.value.length;
}, 0);
}
</script>
<script>
$(function () {
var icons = {
header: "ui-icon-circle-arrow-e",
activeHeader: "ui-icon-circle-arrow-s"
};
$("#accordion").accordion({
icons: icons,
collapsible: true
});
} );
</script>
<style>
#rcorners2 {
width:800px;
height:150px;
background:lightGrey;
border-radius: 10px 10px 10px 10px;
border: 2px solid black;
overflow:hidden;
}
</style>
</asp:Content>
Any idea why it's working in one spot and not the other? This is a multi-page C#/ASP.net app running on IE9 (although I eventually need to get it running on IE11, Chrome and Firefox too, but that's for later).
It is usually a good idea to press Ctrl + F5 together after editing external CSS or JS files. This will force the browser to download the files again instead of reading them from cache.
When I type the URL http ://localhost/login/login.aspx into my browser, I see my response is {success: true}. When I run my load my html page, I can see from Fiddler and the debugger that the aspx page is called; however, nothing is being returned to my javascript and it go to FAILURE instead of SUCCESS.
I have used this url in other programming projects, but this is my first time using it with Ext JS. I have seen various examples online and none seem to fix my issue. Below is my javascript file and any help would be appreciated in getting a successful return on my button click.
So, it is not entering my C# code from the javascript call even thought fiddler shows the call is being made to http ://localhost/login/login.aspx.
Any help would be greatly appreciated.
Ext.require([
'Ext.form.*',
'Ext.window.Window'
]);
Ext.onReady(function () {
Ext.QuickTips.init();
var field = new Ext.form.field.Text({
renderTo: document.body
}),
fieldHeight = field.getHeight(),
padding = 5,
remainingHeight;
field.destroy();
remainingHeight = padding + fieldHeight * 2;
var login = new Ext.form.Panel({
border: false,
fieldDefaults: {
msgTarget: 'side',
labelWidth: 100
},
defaultType: 'textfield',
bodyPadding: padding,
items: [{
xtype: 'box',
region: 'west',
width: 128,
height: 46,
autoEl: { tag: 'img', src: 'images/logo.png' },
style: 'margin: 10px 0px 15px 15px'
}, {
allowBlank: false,
fieldLabel: 'Company Name',
name: 'company',
emptyText: 'Company ID',
style: 'margin: 10px 0px 10px 30px'
}, {
allowBlank: false,
fieldLabel: 'User ID',
name: 'user',
emptyText: 'User Name',
style: 'margin: 10px 0px 10px 30px'
}, {
allowBlank: false,
fieldLabel: 'Password',
name: 'pass',
emptyText: 'Password',
inputType: 'password',
style: 'margin: 10px 0px 10px 30px'
}]
});
new Ext.window.Window({
autoShow: true,
title: 'Support Tools Login',
resizable: false,
closable: false,
width: 350,
height: 250,
layout: 'fit',
plain: true,
items: login,
constrain: true,
draggable: false,
buttons: [{
text: 'Login',
formBind: true,
handler: function () {
login.getForm().submit({
method: 'POST',
url: 'http://localhost/login/login.aspx',
waitTitle: 'Connectiong',
waitMsg: 'Sending data...',
success: function (login, action) {
Ext.Msg.alert('Success');
},
failure: function (login, action) {
Ext.Msg.alert('Failure')
}
});
}
}]
});
});
Aspx file:
using System;
using System.Diagnostics;
using System.Web;
using SupportToolsCommon;
namespace App.login
{
public partial class login : System.Web.UI.Page
{
private static Database db;
protected void Page_Load(object sender, EventArgs e)
{
Response.Clear();
Response.Write("{success: true}");
Response.End();
}
}
}
default.html page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Login Page</title>
<!-- ExtJS -->
<script type="text/javascript" src="extjs/ext-all.js"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/support-tools.css" />
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="scripts/login.js"></script>
</head>
<body id="login-page"></body>
</html
Try replacing this line:
Response.Write("{success: true}");
with well formed JSON (property names must all be enclosed in quotes in JSON, as opposed to javascript):
Response.Write("{\"success\": true}");
When I open dialog all things work correct but when I close dialog and I try open this again I have got problem with JQuery (animation, hide etc.) Probably Partial View all the time is working and when dialog is showed again it doesn't mean Partial View is also new. How to fix it?
This doesn't work
<script type="text/javascript">
$('#bladReje').hide();
$('#bladRejeText').hide();
$('#poprawnieReje').hide();
$('#poprawnieRejeText').hide();
</script>
Partial
data.View
AJAX
$.ajax({
url: '#Url.Action("Reje", "Log")',
dataType: "json",
type: "POST",
async: false,
error: function () {
},
success: function (data) {
if (data.Success) {
var el1 = $('<div><strong style="color: black">' + data.View + '</strong></div>');
$(el1).dialog(
{
modal: true,
title: '<div></div>',
minWidth: 340,
minHeight: 300,
buttons: {
'close': function () {
$(this).dialog("destroy");
}
}
});
}
}
});
});
This is example of my Partial View
<div id="bladReje" style="padding: 0px; width: 100%; margin: 0 auto; padding: 0 auto; text-align: left;
font-family: arial; visibility:hidden;">
<div id="bladRejeText" style="font-size: 16px; visibility:hidden;">
</div>
</div>
#Html.TextBoxFor(m => m.Example, new { style = "width:220px" })
<input type="button" class="button" value="Zapisz" onclick="SaveRejestracja();" style="float: right; margin-right: 30px;"/>
<script type="text/javascript">
$('#bladReje').hide();
$('#bladRejeText').hide();
</script>
<script type="text/javascript">
function SaveRejestracja() {
var Example = $('#Example').val();
$.ajax({
url: '#Url.Action("Example", "ControllerExample")',
dataType: "json",
data: {
Nick: Example
},
type: "POST",
traditional: true,
async: false,
error: function () {
},
success: function (data) {
if (data.Success) {
$('#bladReje').hide();
$('#bladReje').css({ visibility: "hidden" });
$('#bladRejeText').hide();
$('#bladRejeText').css({ visibility: "hidden" });
}
if (!data.Success) {
$('#bladReje').hide();
$('#bladReje').css({ visibility: "visible" });
$('#bladRejeText').hide();
$('#bladRejeText').css({ visibility: "visible" });
}
}
});
}
</script>
This work only first time
<script type="text/javascript">
$('#bladReje').hide();
$('#bladRejeText').hide();
</script>
Here I am calling the webmethod in a jquery...
If I run this code in a normal aspx page then the webmethod gets fired.. But when I use master page and put this code in child page(Default4.aspx) then web method is not being fired. I have used the colorbox jquery plugin.
Here When I click on any link a popup will open and display the file content
My code is as below...
Default4.aspx
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<link rel="stylesheet" href="example1/colorbox.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.colorbox.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$(".group1").colorbox({rel:'group1'});
$(".group2").colorbox({rel:'group2', transition:"fade"});
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
$(".group4").colorbox({rel:'group4', slideshow:true});
$(".ajax").colorbox();
$(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
$(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
$(".inline").colorbox({inline:true, width:"50%"});
$(".callbacks").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});
$('.non-retina').colorbox({rel:'group5', transition:'none'})
$('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true});
//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
$("[id$=LinkButton2]").click(function() {
alert('child');
$.ajax({
type: "POST",
url: "Default4.aspx/lnkbtn1",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
alert(msg.d);
// Replace the div's content with the page method's return.
$("#[id$=LinkButton2]").attr('href',msg.d);
}
});
});
$(".iframe").colorbox({iframe:true, width:"60%", height:"80%"});
});
</script>
<style type="text/css">
.arrowlistmenu
{
width: 180px; /*width of menu*/
}
.arrowlistmenu .headerbar
{
font: bold 14px Arial;
color: white;
background: black url(media/titlebar.png) repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
}
.arrowlistmenu ul
{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}
.arrowlistmenu ul li
{
padding-bottom: 2px; /*bottom spacing between menu items*/
}
.arrowlistmenu ul li a
{
color: #A70303;
background: url(media/arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}
.arrowlistmenu ul li a:visited
{
color: #A70303;
}
.arrowlistmenu ul li a:hover
{
/*hover state CSS*/
color: #A70303;
background-color: #F3F3F3;
}
.style1
{
width: 100%;
}
.style2
{
width: 99%;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<div id="Result">
Click here for the time.</div>
<p>
<a runat="server" id="a" class='iframe' href="Uploadedfiles/Education Portal.xlsx.1.html">
Outside Webpage (Iframe)</a></p>
<p>
<a runat="server" id="a1" class='iframe' href="~/Images/Desert.jpg">Image
(Iframe)</a></p>
<asp:LinkButton ID="LinkButton2" runat="server" CssClass="iframe"
>LinkButton</asp:LinkButton>
</asp:Content>
.Cs
[WebMethod]
public static string lstbtn1()
{
return "Images/Desert.jpg";
}
[WebMethod]
public static string lstbtn1()
{
return "Images/Desert.jpg";
}
try like this