User organizes his todos in OneNote as nested list which looks like this: user's page
I need to mark "Task A" as completed. According to a documentation I should perform replace action for todo.
First I call GET /me/onenote/pages/{pageId}/content?includeIDs=true to find right id of todo "Task A" (see "Page content before the PATCH" ⇩).
Then I send PATCH /me/onenote/pages/{pageId}/content with body:
[
{
"action": "replace",
"target": "p:{33109592-eab9-44fa-8cec-867ab11cecfd}{55}",
"content": "<p data-tag=\"to-do:completed\" style=\"margin-top:0pt;margin-bottom:0pt\">Task A</p>"
}
]
API responds 204, and "Task A" is completed now. But it has been moved under "Point 2": updated page
The same problem appears if I replace tag for "Task B" - it becomes completed but goes under "Subtask B1".
How can I replace a todo without breaking a list?
Page content before the PATCH (Graph API response)
<html lang="en-US">
<head>
<title>Nested list</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="created" content="2018-10-04T09:46:00.0000000" />
</head>
<body data-absolute-enabled="true" style="font-family:Calibri;font-size:11pt">
<div id="div:{33109592-eab9-44fa-8cec-867ab11cecfd}{49}" style="position:absolute;left:76px;top:144px;width:548px">
<p id="p:{33109592-eab9-44fa-8cec-867ab11cecfd}{55}" data-tag="to-do" style="margin-top:0pt;margin-bottom:0pt">Task A</p>
<p id="p:{33109592-eab9-44fa-8cec-867ab11cecfd}{52}" style="margin-top:0pt;margin-bottom:0pt">Point 1</p>
<p id="p:{33109592-eab9-44fa-8cec-867ab11cecfd}{54}" style="margin-top:0pt;margin-bottom:0pt">Point 2</p>
<p id="p:{33109592-eab9-44fa-8cec-867ab11cecfd}{59}" data-tag="to-do" style="margin-top:0pt;margin-bottom:0pt">Task B</p>
<p id="p:{33109592-eab9-44fa-8cec-867ab11cecfd}{58}" data-tag="to-do" style="margin-top:0pt;margin-bottom:0pt">Subtask B1</p>
</div>
</body>
</html>
Page content after the PATCH (Graph API response)
<html lang="en-US">
<head>
<title>Nested list</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="created" content="2018-10-04T09:46:00.0000000" />
</head>
<body data-absolute-enabled="true" style="font-family:Calibri;font-size:11pt">
<div id="div:{33109592-eab9-44fa-8cec-867ab11cecfd}{49}" style="position:absolute;left:76px;top:144px;width:548px">
<p id="p:{33109592-eab9-44fa-8cec-867ab11cecfd}{52}" style="margin-top:0pt;margin-bottom:0pt">Point 1</p>
<p id="p:{33109592-eab9-44fa-8cec-867ab11cecfd}{54}" style="margin-top:0pt;margin-bottom:0pt">Point 2</p>
<p id="p:{b815e00e-3326-49db-bcdd-7aecba36b1a4}{92}" data-tag="to-do:completed" style="margin-top:0pt;margin-bottom:0pt">Task A</p>
<p id="p:{33109592-eab9-44fa-8cec-867ab11cecfd}{59}" data-tag="to-do" style="margin-top:0pt;margin-bottom:0pt">Task B</p>
<p id="p:{33109592-eab9-44fa-8cec-867ab11cecfd}{58}" data-tag="to-do" style="margin-top:0pt;margin-bottom:0pt">Subtask B1</p>
</div>
</body>
</html>
For this question, I don't know how the API server side handle it. You can submit an feature request in the UserVoice or submit an bug in Github.
A workaround for you on client side: add on emtpy line between the Task A and Point1. I Have test it, it works well on my side.
<div id="div:{46b62548-ca53-41b9-90e1-75d14bbc7504}{38}" style="position:absolute;left:48px;top:115px;width:624px">
<p id="p:{6a8603ba-4743-4f74-a61a-795245aa36b0}{139}" style="margin-top:0pt;margin-bottom:0pt"> </p>
<p id="p:{6a8603ba-4743-4f74-a61a-795245aa36b0}{137}" style="margin-top:0pt;margin-bottom:0pt"> </p>
<p id="p:{9c90b33e-de52-4fe5-9ebe-a6f0787cc91b}{131}" data-tag="to-do:completed" style="margin-top:0pt;margin-bottom:0pt">Task A</p>
<br />
<p id="p:{6a8603ba-4743-4f74-a61a-795245aa36b0}{211}" style="margin-top:0pt;margin-bottom:0pt">Point </p>
<p id="p:{6a8603ba-4743-4f74-a61a-795245aa36b0}{141}" style="margin-top:0pt;margin-bottom:0pt"> Point2</p>
<p id="p:{6a8603ba-4743-4f74-a61a-795245aa36b0}{169}" style="margin-top:0pt;margin-bottom:0pt"> </p>
<p id="p:{6a8603ba-4743-4f74-a61a-795245aa36b0}{145}" data-tag="to-do" style="margin-top:0pt;margin-bottom:0pt">Task B</p>
<p id="p:{6a8603ba-4743-4f74-a61a-795245aa36b0}{173}" style="margin-top:0pt;margin-bottom:0pt"> </p>
<p id="p:{6a8603ba-4743-4f74-a61a-795245aa36b0}{144}" data-tag="to-do" style="margin-top:0pt;margin-bottom:0pt"> SubTask B1</p>
</div>
Related
I'm building this blog application using Java Spring Boot and Thymeleaf. I've created comment & reply feature, but I'm trying to show replies as children to comments (nested - indent). They are the same type: Comment. They work, as I can see the reply as a child of comment in the database, but in the view its shown as a new comment (even though, again, it is the child of a comment). How do I indent that reply:
<!DOCTYPE HTML>
<html lang= "en" xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link th:href = "#{/styles/style.css}" rel="stylesheet">
<script type="text/javascript" th:src="#{/styles/javascript.js}" rel="script"></script>
<title>WriteUp :: POST</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<a th:href="#{/}">Home</a>
<div class="container">
<div class="screen">
<div class="screen__content">
<div class="card" style="width: 120%; height: 100%">
<a href="#" class="like-btn">
<svg class="like_icon" width="44" height="39" viewBox="0 0 44 39" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13 2C6.925 2 2 6.925 2 13C2 24 15 34 22 36.326C29 34 42 24 42 13C42 6.925 37.075 2 31 2C27.28 2 23.99 3.847 22 6.674C20.9857
5.22921 19.6382 4.05009 18.0715 3.23649C16.5049 2.42289 14.7653 1.99875 13 2Z"/>
</svg>
</a>
<div class="card-body">
<ul sec:authorize="isAuthenticated()">
<li><a th:href="#{'/posts/' + ${post.id} + '/edit'}">Edit</a></li>
<li><a th:href="#{'/posts/' + ${post.id} + '/delete'}">Delete</a></li>
</ul>
<h2 class="card-title" th:text="${post.title}">Card title</h2>
<p class="card-text" th:text="'Written by: ' + ${post.account.getUserName()}"></p>
<p class="card-text" th:text="'Published on: ' + ${post.createdAt}"></p>
<p class="card-text" th:text="${post.body}">Body text</p>
<!-- Comment/Reply section start -->
<h2>Comments</h2>
<ul>
<li th:each="comment : ${post.comments}">
<p th:text="${comment.text}"></p>
<p th:text="${comment.createdAt}"></p>
<p th:text="${comment.author}"></p>
<form method="post" action="#" th:action="#{/comment/{commentId}/reply(commentId=${comment.id})}">
<input type="text" name="replyText" placeholder="Add a reply"/>
<button type="submit">Reply</button>
</form>
</li>
</ul>
</div>
<h2>Add a comment</h2>
<form method="post" action="#" th:action="#{/post/{postId}/comment(postId=${post.id})}">
<input type="text" name="commentText" placeholder="Add a comment">
<button type="submit">Comment</button>
</form>
<!-- Comment/Reply section end -->
</div>
</div>
</div>
</div>
</body>
</html>
I am trying to execute a simple jquery mobile code. I just linked two pages. But everytime I am switching from one page to another, it is happening in default mode.Even after mentioning data-transition = 'pop'..
<!DOCTYPE html>
<html>
<head>
<title>This is my first jquery mobile programme</title>
<meta name="viewport" content="width=device-width, initialscale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile.structure-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role = "page" id="first">
<div data-role = "header" >
<h1>hello world !!</h1>
</div>
<div data-role = "content">
<p>This is the content part</p>
<p><a href ="#second" data-tansition = "pop" > Go to second page </a></p>
</div>
<div data-role ="footer">
<h4>Footer</h4>
</div>
</div>
<div data-role = "page" id="second">
<div data-role ="header">
<h1>hello Praveen !!</h1>
</div>
<div data-role ="content">
<p> this is the second page</p>
<p><a href =#first> Go to first page </a></p>
</div>
<div data-role = "footer">
<h4>footer</h4>
</div>
</div>
You simply have a typo in your markup.
Change
data-tansition="pop"
to
data-transition="pop"
I need a clickable "table" in my app.
The closest I have gotten is using listviewer and links in combination with grid.
The example below is what I need (a clickable tablerow and a separate button to the right).
My problem is that I cant line up the "body-columns" with the "header-titles" becuase the button in my "table body" offsets the grid.
http://jsfiddle.net/lokkin/p9M8p/3/
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<ul data-role="listview" data-split-icon="gear" data-inset="true">
<li data-role="list-divider">
<div class="ui-grid-d">
<div class="ui-block-a">TRK</div>
<div class="ui-block-b">STATUS</div>
<div class="ui-block-c">NR</div>
<div class="ui-block-d">PFIX</div>
<div class="ui-block-e">EHNR</div>
</div>
</li>
<li> <a href="#Select" class="ui-grid-d">
<div class="ui-block-a">
TRUCK1
</div>
<div class="ui-block-b">
123
</div>
<div class="ui-block-c">
ABC123
</div>
<div class="ui-block-d">
456
</div>
<div class="ui-block-e">
789
</div>
</a>
Details
</li>
</ul>
</div>
</body>
</html>
Just add right padding to the divider to match the listitems:
.ui-li-divider{
padding-right: 56px !important;
}
Updated FIDDLE
I created an ASP.Net Web Application in VS 2010. That in turn creates an example Site.Master, Default.aspx, and several other example files.
I then opened Default.aspx in Expression Web 4 and get the error message
The Master Page file 'Site.Master'
cannot be loaded.
Default.aspx can still be displayed fine in VS 2010.
Source.Master:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="SampleWebApp.SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
.style1
{
font-family: Tunga;
}
</style>
</head>
<body>
<form runat="server">
<div class="page">
<div class="header">
<div class="title">
<h1 class="style1">
My Application
Master Page</h1>
</div>
<div class="loginDisplay">
<asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
<AnonymousTemplate>
[ Log In ]
</AnonymousTemplate>
<LoggedInTemplate>
Welcome <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server" /></span>!
[ <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/"/> ]
</LoggedInTemplate>
</asp:LoginView>
</div>
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home">
<asp:MenuItem NavigateUrl="~/Home/NewItem.aspx" Text="New Item"
Value="New Item"></asp:MenuItem>
<asp:MenuItem NavigateUrl="~/Home/AnotherItem.aspx" Text="Another Item"
Value="Another Item"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
<asp:MenuItem NavigateUrl="~/ContactUs.aspx" Text="ContactUs" Value="ContactUs">
</asp:MenuItem>
</Items>
</asp:Menu>
</div>
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
</form>
</body>
</html>
Default.aspx:
<%# Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="SampleWebApp._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<style type="text/css">
.style2
{
color: #669900;
}
.style3
{
background-color: #FFFFCC;
}
</style>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
Welcome to MY page!
</h2>
<p>
To learn more <span class="style2"><strong><em><span class="style3">about</span></em></strong></span> ASP.NET visit www.asp.net.
</p>
<p>
You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&clcid=0x409"
title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
</p>
</asp:Content>
Any idea how to get the master page to work properly in Expression Web 4?
Did you try the Open Site option? (Click the yellow folder in the toolbar and then Open Site)
You can go to menu bar and click on Site menu and then on Open Site now this way it'll open and work properly in the designer and now master page error.
Opera is displaying my new site as XML and I can't for the life of me figure out why.
Here's what firebug has to say
Server ASP.NET Development Server/10.0.0.0
Date Mon, 08 Nov 2010 22:58:32 GMT
X-AspNet-Version 4.0.30319
X-AspNetMvc-Version 2.0
Content-Encoding gzip
Cache-Control private
Content-Type text/html; charset=utf-8
Content-Length 1835
Connection Close
Here's what W3C has to say
Line 3, column 6: application/xhtml+xml is not an appropriate Content-Type for a document whose root element is not in a namespace.
<html>
Line 3, column 6: Unnamespaced element html not allowed in this context. (Suppressing further errors from this subtree.)
<html>
Here's the markup
<!DOCTYPE html>
<html>
<head>
<title>What's happening around you right now! - My App</title>
<meta content="no" http-equiv="imagetoolbar" />
<link rel="search" type="application/opensearchdescription+xml" title="My App" href="/assets/xml/opensearch.xml" />
<link rel="stylesheet" type="text/css" href="/MYREALLYCOOLAPP/Extras/siteMaster.Css/1" />
</head>
<body>
<div class="page">
<div id="header">
<div id="title">
<div id="urban-now-logo">
<span>My App</span>
</div>
</div>
<div id="logindisplay">
<span id="logindisplaywrapper">log in | <a href="/MYREALLYCOOLAPP/modalwindow/selectregion"
title="Change Region" class="RegionWindow">Calgary</a> | about | faq
<span style="padding-left: 20px;"></span>
<form action="/MYREALLYCOOLAPP/search" id="searchForm" method="get">
<input id="search-text" name="q" tabindex="1" type="text" maxlength="80" size="28" placeholder="search..." />
</form>
</span>
</div>
<div id="menucontainer">
<div class="floatleft">
<ul class="menu">
<li><a class="youarehere" href="/MYREALLYCOOLAPP/">Now</a></li>
<li>Coming</li>
<li>Hot</li>
<li>Tags</li>
<li>Users</li>
</ul>
</div>
<div class="floatright">
<ul class="menu">
<li>Add Event</li>
</ul>
</div>
</div>
</div>
<div class="clear">
</div>
<div id="main">
<h2>What's Happening Within The Next 24 Hours!</h2>
<hr />
<div id="innermain">
<div class="twocolumn-left">
<div id='bingMap' class="largeMap">
<noscript>
<img src="http://developer.multimap.com/API/map/1.2/OA10091719904371779?zoomFactor=11&width=550&height=400&lat_1=51.18468&lon_1=-114.497999&lat_2=51.169858&lon_2=-114.32549&lat_3=51.083277&lon_3=-114.203964&lat_4=51.063097&lon_4=-114.092031&lat_5=50.939664&lon_5=-113.973568" />
</noscript>
</div>
</div>
<div class="twocolumn-right">
</div>
</div>
<div id="footer">
<ul id="footernavigation">
<li>© 2010 - My App - All Rights Reserved</li>
<li><span class="colorgreen increasesize-140">■</span> about | <span class="colorgreen increasesize-140">
■</span> faq | <span class="colorgreen increasesize-140">■</span> <a href="/MYREALLYCOOLAPP/about/advertise">
advertise</a> | <span class="colorgreen increasesize-140">■</span> legal</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3"></script>
<script type="text/javascript" src="/MYREALLYCOOLAPP/Extras/MYREALLYCOOLAPP.js/1"></script>
<script type="text/javascript">
var zoomLevel = 10
var json_object = [{ "lat": 51.063097, "lon": -114.092031, "title": "Jubilee Auditorium", "desc": "Some great concerts go down here"}];
</script>
<script type="text/javascript" src="/MYREALLYCOOLAPP/Extras/bingmaps.js/1"></script>
</body>
</html>
Basically, when I launch the website in Opera, the top says
This document had no style information.
and then all of my markup is displayed (like xml).
It looks like your server is sending the file as text/html to Firefox, but application/xhtml+xml to Opera.
Opera (10.63) has a firebug-like interface you can check this with. Right click on a page to bring up the context menu, select "Inspect Element". Select the "Network" tab and expand the relevant request line. Then open either "Headers" or "Raw" and it will show you the content-type used to send the page to Opera.
To allow Opera to process the page correctly as application/xhtml+xml, add
xmlns="http://www.w3.org/1999/xhtml"
as an attribute to the html element as LukeH says.
Doesn't your DOCTYPE need to specify the appropriate DTD etc? For example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
And/or do you need to specify a namespace for your <html> element? For example:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">