Restore multiple selections from db using Rangy - javascript

What i want to do :
->Show a plain HTML page to a user
->User has the ability to highlight text on that page
->When user logs in next time , i should be able to retrieve and show his previous (multiple) highlight on the page.
What i have done :
I used the Library/API : Rangy.With this iam able to select the text and highlight it with the users preferred color.
The Problem :
I tried the serialize and de-serialize function , but when i try to deserialize (after page has been reloaded) it gives me an error saying
checksums of serialized range root node (ec0c8cf0) and target root
node (d4997863) do not match
Everytime i reload the page , there is a new root node , how can i fix the deserialize in this case ?
Created a JS-Fiddle : demo / js-fiddle
What is this - If you check my demo , i select the first word of the description ie "Please " , i get the text highlighted , and i also get the serial as :
0/3/1/3/0/1/1/2:9,0/3/1/3/0/1/1/2:9{b3002d92}
so what i did is , i hard coded this serial and put it into the deserializeSelection funciton in the page onLoad function like this :-
rangy.deserializeSelection('0/3/1/3/0/1/1/2:9,0/3/1/3/0/1/1/2:9{b3002d92}');
so technically , it should highlight the "Please" in the description , whenever the page loads , irrespectively.But it does not , instead give me the above error in block.
Can you help me solve this.please.Thank you
Extra:
1.I really do not understand the serialize and de-serialize methods of rangy.
2.My very abstract road map from here is to , do an AJAX call , on page load and fetch all (serialized) selection of the user for this page from my db and iterate over them and do a de-serialize.
Any help , would be really appreciated.
Thank you.

What I think is you should try this:
var selObj = rangy.getSelection();
var se = rangy.serializeSelection(selObj, true); //true to avoid DOM checksum

Related

Showing single data field via Google Analytics API

I'm having trouble displaying only a single data field via the Google Analytics API.
For example, how would I display the number of users yesterday? Or the number of users in the past week?
I'm assuming "gapi.analytics.report.Data" is the right constructor. I've tried following the "Data" code in Google's Built-in Components Reference but nothing displays on the front-end.
For the "DataChart" code, there's a "container" option that references the HTML element in the DOM that will correctly display the chart.
This "container" option is missing in "Data" - so how do I display a single data field?
EDIT: Here's the code I'm working with.
You can see a pastebin of my code here: https://pastebin.com/M6U0Bd8B
There's also a live staging version of the site here: http://madebychris.ca/dashboard2.html
The first four section ids are all displaying properly but nothing's showing up for the final <p class ="report">
If you are trying to access the raw data numbers, you can just access the response object:
// Set up the request
var report = new gapi.analytics.report.Data({
query: {
ids: 'ga:XXXX',
metrics: 'ga:sessions',
dimensions: 'ga:city'
}
});
// Define what to do with the response data.
report.on('success', function(response) {
console.log(response);
});
// Run the report
report.execute();
For example, the total's for the metrics is response.totalsForAllResults and the rows for each dimension are held in response.rows
You need to select what you want to do with the variables on the report.on("success", function(response){ function. For example:
report.on('success', function(response) {
$("body > main > div > section:nth-child(4) > h2")[0].innerText =
response.totalsForAllResults["ga:sessions"]
});
report.execute();
Note: You should be able to test on the embedded API demo. Copying and pasting the initial code with the console.log should help show what is going on.

Shiny - store javascript variable to mysql database

I am working with shiny server.
My application has a search box input. Based on that input, the output is a dataTable which has clickable links.
My application's ui.r contains a JavaScript function that sets the value of a variable whenever a link is clicked. Let the variable be clickedLink. Now I want to store this value of link to mysql or any other database. How to go about this?
I have tried ajax , php with no use. What I did is described in this question: saving json data to json file using ajax PHP but I guess php files do not work with shiny. Please help.
EDIT 1
code added to ui.R
tags$script(HTML("
function clickFunction(clickedLink){
//alert(clickedLink);
var cl = clickedLink;
Shiny.onInputChange('clickedLink',cl);
}
"))
code added to server.R
observe({
print(input$clickedLink)
})
EDIT 2
Just for information , the links are of the form
<a onclick="clickFunction(this.href); " target="_blank" href="http://SOMETING.com">SOMETHING</a>
I'm assuming you know how to save the variable once you get it in R. If not, use the RMySQL package and read their tutorial - https://github.com/rstats-db/RMySQL
So your main problem is getting the javascript variable into R. For that you can use Shiny.onInputChange. There's a short easy tutorial here https://ryouready.wordpress.com/2013/11/20/sending-data-from-client-to-server-and-back-using-shiny/
Basically, in javascript you would have
Shiny.onInputChange("jsvar", clickedLink) and then you can treat jsvar as a regular reactive input, so in R you can do `observe({ saveToDb(input$jsvar) }) (you'd have to define saveToDb)

Dumbed down Powershell web client function to let me post form data easily

Ive been using an Internet Explorer automation script found here:
http://www.pvle.be/2009/06/web-ui-automationtest-using-powershell/
That lets me easily post form data using commands (functions) like this:
NavigateTo "http://www.websiteURI/"
SetElementValueByName "q" "powershell variable scope"
SetElementValueByName "num" "30"
SetElementValueByName "lr" "lang_en"
ClickElementById "sb_form_go"
The above would let me post values to elements and click to submit the form.
I would like to do the equivalent with Powershell's web client using helper functions. I haven't found such a script. The closest I could find was The Scripting Guys, Send-WebRequest:
http://gallery.technet.microsoft.com/scriptcenter/7e7b6bf2-d067-48c3-96b3-b38f26a1d143
which I'm not even sure it does what I expect (since there's no working examples showing how to do what I want).
Anyway, I'd really appreciate some help to get me started to do the equivalent of what I showed up there with working examples (as simple as possible). A bonus would be to also be able to get a list of element names for a URI in order to know what form elements I want to submit.
PS: I also need to be able to specify user-agent and credentials; so, examples with these included would be ideal.
Have you taken a look at the Invoke-WebRequest commmand? (requires powershell 3.0 or above) I believe the following would work for submitting the data
#POSTing data
Invoke-WebRequest http://www.websiteURI/ `
-UserAgent 'My User Agent' `
-Credential $cred `
-Method Post `
-Body #{
q = 'powershell variable scope'
num = 30
lr = 'lang_en'
}
For your bonus, the result of Invoke-WebRequest contains a collection of the InputFields on the page, which you can use to get a list of form elements to set.
#List input elements
Invoke-WebRequest http://www.websiteURI/ | select -ExpandProperty InputFields

Xstream generated json response for List<Object>

I am using Xstream to generate JSON for my application.I want to use JSON for ajax support. When i try
xstream.alias(classAlias, jsonModel.getClass()); //Note classAlias="records"
responseStream.println(xstream.toXML(jsonModel));
where jsonModel is actually a List of entity objects.Entity class name is Person which is in "beans" package so full qualified name would be beans.Person. OK
Person class has properties like id,name,age etc.
Generated JSON is
{"records":[{"beans.Person":[{"id":21,"name":"Name21","username":"Username21","password":"password21","age":41,"sex":true},{"id":22,"name":"Name22","username":"Username22","password":"password22","age":42,"sex":true},{"id":23,"name":"Name23","username":"Username23","password":"password23","age":43,"sex":true},{"id":24,"name":"Name24","username":"Username24","password":"password24","age":44,"sex":true},{"id":25,"name":"Name25","username":"Username25","password":"password25","age":45,"sex":true},{"id":26,"name":"Name26","username":"Username26","password":"password26","age":46,"sex":true},{"id":27,"name":"Name27","username":"Username27","password":"password27","age":47,"sex":true},{"id":28,"name":"Name28","username":"Username28","password":"password28","age":48,"sex":true},{"id":29,"name":"Name29","username":"Username29","password":"password29","age":49,"sex":true},{"id":30,"name":"Name30","username":"Username30","password":"password30","age":50,"sex":true}]}]}
I used $.getJSON of jquery to get this response on button click event. I checked the status which is "success" every time so this is working well.Problem occurs when i try to access first records i.e. person's information like id,username etc.
I write statements in Javascript as
<script>
$(document).ready(function() {
$("input").click(function(){
$.getJSON("http://mylocalhost:8080/Paging/paging/records?page=3",function(data,status){
alert(status);
alert(data.records[0].beans.Person[0].id);
});
});
});
</script>
First alert works but second doesn't.
Then javascript stops working as it does whenever encounters an error.What i can guess is that in records array Person object is followed by package name.This could be the reason because browser may look for beans object in records array which is not there because beans.Person is a single, atomic name in this case as shown in above. But not sure?
If this is actually problem then how can i stop/control XStream to name an object's name as just classname(person) instead of package.classname(beans.person) as it is being named by default.
or If everything is OK in produced JSON object then why can't i see the expected result? Why simple second alert statement is not working.
I got the answer I was to use
alert(data.records[0]["beans.Person"][0].id);
instead of
alert(data.records[0].beans.Person[0].id);
A useful link
http://www.javascripttoolbox.com/bestpractices/#squarebracket

Creating a drop down list in asp.net mvc3

I am working on Simple Web Application using asp.net MVC4
I wonder to know how to create a drop down list in asp.net mvc4
In my application , I don't wanna use "ID_Sous_Type " but I wanna load a list from "Sous_Type" class
http://i.stack.imgur.com/qf1C4.jpg
I wrote this code in my index method :
var GenreLst = new List<string>();
var GenreQry = from d in secdb.SousTypes
orderby d.ID_Sous_Type
select d.Nom_Sous_Type;
GenreLst.AddRange(GenreQry.Distinct());
ViewBag.types = new SelectList(GenreLst); //Can't load this
In my View :
#Html.DropDownList("types")
UPDATE !
I am working on a form to retrieve data and save it in my table
I have two tables , Task and TaskType
For Task , The creation page is being like that .
http://i.stack.imgur.com/qf1C4.jpg
For the last field "ID_Sous_Type" , I would like to load list (from other table TaskType) to give a good user interface where the user can choose an appropriate type in better way (giving ID_Sous_Type is not that understandable )
For that , I would like to load the names of (TaskType) in Dropdown List
In my index controller :
I created .
var GenreLst = new List();
//Here i got all the names from TaskType table
var GenreQry = from d in secdb.SousTypes
orderby d.ID_Sous_Type
select d.Nom_Sous_Type;
GenreLst.AddRange(GenreQry.Distinct());
Then I added Ranges to easily get it
but I couldn't "Bind" it in Dropdown list , I wonder to know HOW !!
If i understand correctly your ViewBag.types is missing some vital information and that's why it's returning your list. It should be something like :
ViewBag.GenreId = new SelectList(db.Genres, "GenreId","Name");
See this article on the official .net site it should help you understand dropdown lists better.
http://www.asp.net/mvc/tutorials/mvc-music-store/mvc-music-store-part-5

Categories

Resources