Accessing Elements created by Javascript- In code behind in MVC 3 - asp.net-mvc-3

In my cshtml i have defined a tag
I am creating a Image Upload Form, where On File Submit, i am saving the value in a Temp Table(SQL) and returning(GUID) the value thru a Ajax call and Binding the GUID inside Dynamically created DIV Tag(Jquery/Javascript)
<div id="dvDisplayImageParent" class="block clear" runat="server">
</div>
Now, using Javascript i am creating DIV Tags (Multiple) (Containing Images and Textbox) and appending it with dvDisplayImageParent.
I want to access the values in Controller
public ActionResult NewProject(ProjectEditViewModel model, String btnSave)
{// Want to values inside my dvDisplayImageParent }
How can i do this??
My Javascript is as follows :-
`var img = document.createElement("IMG");
var lbl = document.createElement("label");
var chk = document.createElement('input');
chk.type = 'checkbox';
//Assign image path to display the image
img.src = imgPath;
img.id = imageID;
img.style.height = "100px";
img.style.width = "100px";
//Appending it with Dynamic DIV
dynDiv.appendChild(img);
var input = document.createElement("input");
//input.setAttribute("type", "hidden");
input.setAttribute("type", "text");
input.setAttribute("name", "hdn" + imageID);
input.setAttribute("value", imageID);
//Image Link
var aElemImageLink = document.createElement('a');
//Move Up Link
var aElemUpLink = document.createElement('a');
//Move Down Link
var aElemDownLink = document.createElement('a');
var callOnImageclick = "DeleteImage('" + imageID + "','" + divDynamicID + "'); return false; ";
aElemImageLink.setAttribute("onclick", callOnImageclick);
aElemImageLink.childNodes = imageID;
var callOnMoveUpclick = "MoveImageUP('" + imageID + "','" + divDynamicID + "'); return false; ";
aElemUpLink.setAttribute("onclick", callOnMoveUpclick);
var callOnMoveDownclick = "MoveImageDOWN('" + imageID + "','" + divDynamicID + "'); return false; ";
aElemDownLink.setAttribute("onclick", callOnMoveDownclick);
//Create a text node to hold the text of the <a>
var aElemTN = document.createTextNode(' Delete Image ');
//Create a text node to hold the text of the <a>
var aElemTNUp = document.createTextNode(' Move UP ');
//Create a text node to hold the text of the <a>
var aElemTNDown = document.createTextNode(' Move DOWN ');
//Append the <a> text node to the <a> element
aElemImageLink.appendChild(aElemTN);
aElemUpLink.appendChild(aElemTNUp);
aElemDownLink.appendChild(aElemTNDown);
//Append the new link to the existing <div>
dynDiv.appendChild(aElemImageLink);
dynDiv.appendChild(aElemUpLink);
dynDiv.appendChild(aElemDownLink);
lbl.id = "lbl" + imageID;
var aElemTNTag = document.createTextNode(' Taggar ');
var aElemTNWantsToshare = document.createTextNode(' Dela? ');
var txtTag = document.createElement("input");
txtTag.id = "txt" + imageID;
txtTag.setAttribute('name', 'Tag');
dynDiv.appendChild(lbl);
dynDiv.appendChild(aElemTNTag);
dynDiv.appendChild(txtTag);
dynDiv.appendChild(chk);
dynDiv.appendChild(aElemTNWantsToshare);
dynDiv.appendChild(input);
//Appending Dynamic DIV with Parent DIV
var parentDiv = document.getElementById("dvDisplayImageParent");
parentDiv.appendChild(dynDiv);`

I Got one alternative :-
string NoOfImages = Convert.ToString(Request.Form["Your Control Name Which You Want To Access"]);
Now, using Request.Form[] use can get the value's present inside the CONTROL Created using JAVASCRIPT.
But still waiting for a better solution.
> Help Continues...

There is no runat or code behind in mvc. You can't access any elements from controller. I'd suggest watching some of these videos.

Related

GmailApp - Inline images are attached, and not inline - send email with images in body

I created a Google Script to email several charts as images. When using MailApp it works, and the images are in the body of the email. When using GmailApp, the images are as attachments and not in the email body. I want to use GmailApp because I can use an alias, and because I figured out how to make the email send to a list of people. How do I make a change so that the GmailApp function sends the email with the charts contained in the body? Here is a link to a sample spreadsheet, and here is the code:
function SRpt2() {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sstotalsheets = ss.getNumSheets();
var clientCode = ss.getSheetByName("Info").getRange("C4").getDisplayValue();
var progmgr = ss.getSheetByName("Info").getRange("D11").getDisplayValue();
var sheetcount = 0;
var token = ScriptApp.getOAuthToken();
var sheets = ss.getSheets();
var blobs = [];
var subject = "Daily " + clientCode +" Digest";
var body = "Your daily update";
var recips = progmgr + ", neill#momentum-behavioral.com";
var emailImages={};
var emailBody="Charts<br>";
for (var i = 5; i < sheets.length ; i++ ) {
var sheet = sheets[i];
var charts = sheet.getCharts();
if(charts.length > 0) {
var template = HtmlService.createTemplateFromFile("reportTemplate");
template.date = Utilities.formatDate(new Date(), Session.getScriptTimeZone(), "MM-dd-yyyy");
blobs[i] = charts[0].getBlob().getAs('image/png').setName("areaBlob");
emailBody= emailBody + "<img src='cid:chart"+i+"'><br>";
emailImages["chart"+i]= blobs[i];
}
}
var me = Session.getActiveUser().getEmail();
var aliases = GmailApp.getAliases();
if (aliases.length > 0) {
GmailApp.sendEmail(recips, subject, emailBody, {'from': aliases[0],inlineImages:emailImages});
}
MailApp.sendEmail({
to: recips,
subject: subject,
htmlBody: emailBody,
inlineImages:emailImages});
}
And here is the html it refers to:
<html>
<h1>Daily Update <?= date ?></h1>
<p>
<img src="cid:chart" />
</p>
</html>
The incorrectly formatted email body just says the actual html source code (I can't figure out how to paste it into the stackoverflow without it actually treating it as html).
Add the HTML to the options object. And make the body parameter and empty string.
var options;
options = {};//Assign an empty object to the variable options
//{'from': aliases[0],inlineImages:emailImages}
options.from = aliases[0];
options.inlineImages = emailImages;
options.htmlBody = emailBody;
if (aliases.length > 0) {
GmailApp.sendEmail(recips, subject, "", options);//Leave body an empty string
}

Search for a specific picture in google drive folder - Search file name by title

I have a list of possible image file names in a spreadsheet. I'm trying to get the file (if exist) and insert it into the cell next to the name. But I get an error when I call .hasNext(). The code that I am using is:
function listFilesInFolder(folderName) {
var sheet = SpreadsheetApp.getActiveSheet();
var i = 0;
var numberOfRows = sheet.getLastRow();
for (i=0;i<numberOfRows;i+=1) {
var range = sheet.getRange(i+1,1);
var data = range.getValue();
var file = DriveApp.getFolderById("FOLDER_ID_HERE").searchFiles(data);
if (file.hasNext()) {
var rangeDest =sheet.getRange(i+1,2);
var output = file.next();
rangeDest.setValue("=image(\"https://drive.google.com/uc?export=download&id=" + output.getId() +"\")");
};
};
};
Any Ideas?
Thanks!
The problem is from this line:
var file = DriveApp.getFolderById("FOLDER_ID_HERE").searchFiles(data);
Should be:
var searchString = 'title contains "' + data + '"';
var file = DriveApp
.getFolderById("FOLDER_ID_HERE")
.searchFiles(searchString);

is my if statement doing what i think its doing?

Here I have tis function that is querying data and returning it to me and im putting that data in to html elements to make a post.my if statement at the bottom is where im having a bit of problem i trying to only apply my comment window once to the new clones once they have been pushed over to the new div called story board, i believe im telling my if statement that if the class already exists in that new clone then do nothing else apply it there.. to seee what i am talking about...here is my test domain...http://subdomain.jason-c.com/
sign in is "kio" pass is the same and when you hit publish on the stories, everytime a nw one hits it will apply comment box to a post in the storyboard window that already has a comment text area. what am i doing wrong.
function publishWindowHandler(){
var query = new Parse.Query('Post');
console.log(currentUser);
query.equalTo("User", currentUser);
query.include("User");
query.descending("createdAt")
console.log(user.get('username'));
query.find({
success:function(results){
document.getElementById("publishCenter").textContent = "";
for(var i =0; i < results.length; i++){
var userPost = results[i];
//console.log(userPost.get("User") + " / " + userPost.get("Author") + " / " + userPost.get("Story") + " / " + userPost.get("objectId"));
var authorTitle = document.createElement("p");
var newPost = document.createElement("P");
var title = document.createElement("P");
var userLabel = document.createElement("p");
var postId = userPost.id;
var postBtn = document.createElement("INPUT");
postBtn.className ="publishBtn";
postBtn.id ="publishBtn";
postBtn.setAttribute("Type", "button");
postBtn.setAttribute("value", "Publish");
title.textContent = "Story: " + userPost.get("Title");
authorTitle.textContent = "Author: " + userPost.get("Author");
newPost.textContent = userPost.get("Story");
userLabel.textContent = "Published by: " +userPost.get("User").get ("username");
var postWrapper = document.createElement("DIV");
postWrapper.className = "postWrapper";
postWrapper.id = postId;
document.getElementById("publishCenter").appendChild(postWrapper);
postWrapper.appendChild(title);
postWrapper.appendChild(authorTitle);
postWrapper.appendChild(newPost);
postWrapper.appendChild(userLabel);
postWrapper.appendChild(postBtn);
postBtn.addEventListener("click", publicViewHandler);
function publicViewHandler(){
$(this).parent(".postWrapper").clone().appendTo(".storyBoard");
function testWindow(){
if($(publicBoard).children().hasClass(".commentWindow")){
}
else
{
$(".storyBoard").children().append(commentWindow);
}
}
testWindow();
}
}
}
})
}
According to the documentation, jquery hasClass doesn't need '.' prefixing the passed in class name.
https://api.jquery.com/hasclass/
Try removing that and see if that get's you anywhere.
Also, where is the variable commentWindow defined? Is it global?
var myClone = $(this).parent().clone(true);
myClone.appendTo(".storyBoard");
console.log(publicBoard);
console.log("hello",$(this));
console.log($(publicBoard).find('.postWrapper').find("commentWindow"));
myClone.append($(commentWindow).clone());
this is what i ended up doing to solve my issue took me a while and a little help from a friend.

AJAX getting truncated on paragraph

I'm having a strange problem when trying to updated a div with a couple of paragrahs of text from AJAX.
Here are functions I'm using:
var receivePapers = getXmlHttpRequestObject();
function get_papers(myCat){
if (receivePapers.readyState == 4 || receivePapers.readyState == 0) {
receivePapers.open("GET", 'http://server/path/tocode/file.php?get_papers=1&student_id=1&category=' + myCat, true);
receivePapers.onreadystatechange = handlereceivePapers;
receivePapers.send(null);
}
}
function handlereceivePapers() {
if (receivePapers.readyState == 4) {
var container_div = document.getElementById('paper_container');
var xmldoc = receivePapers.responseXML;
var paper_nodes = xmldoc.getElementsByTagName("paper");
var n_papers = paper_nodes.length;
// Clear the whole container div.
container_div.innerHTML = "";
container_div.innerHTML = "<table class='categoryHeader' width='100%'><tr><th class ='categoryHeader' width='80%' ><br/> " + paper_nodes[1].getElementsByTagName("category")[0].firstChild.nodeValue + "</br> <br/><br/></th></tr>";
container_div.innerHTML += "<tr><td>";
for (i = 0; i < n_papers; i++) {
var paper_id = paper_nodes[i].getElementsByTagName("paper_id");
var paper_title = paper_nodes[i].getElementsByTagName("paper_title");
var paper_desc = paper_nodes[i].getElementsByTagName("paper_desc");
var paper_time = paper_nodes[i].getElementsByTagName("paper_time");
var user_real_name = paper_nodes[i].getElementsByTagName("user_real_name");
var summary_div = document.createElement('div');
summary_div.innerHTML += "<table class='paper'><tr><td class='paperLike' width=80px rowspan=2 valign='top'><div id='" + paper_id[0].firstChild.nodeValue + "'> <img src='images/Like.png' style='padding-top:5px' border='0' /></div></td><td><table width='100%'><tr><td class='paperTitle' style='background-color:white; text-align=left; '><a class='paperTitle' style='padding-left:0;' href='#" + paper_id[0].firstChild.nodeValue + "'>" + paper_title[0].firstChild.nodeValue + "</a></td><td class='paperName' style='margin-right:0; width:200px; background-color:white; text-align:right; vertical-align:text-top;'><span align='right' style='background-color:white; text-align:right; vertical-align:text-top; ' > " + user_real_name[0].firstChild.nodeValue + "</span></td></tr></table></td><td rowspan='2' class='paperLength' style='width:80px; text-align:right; padding-top:8px;' >" + paper_time[0].firstChild.nodeValue + " minutes</td></tr><tr><td class='paperDescription' align='left' colspan='1'>" + paper_desc[0].firstChild.nodeValue + "</td></tr></table>";
container_div.appendChild(summary_div);
}
container_div.innerHTML += "</tr></td></table";
}
}
Here is the XML that's getting returned:
<root>
<paper id="23">
<paper_id>23</paper_id>
<paper_title>title</paper_title>
<paper_desc>
First paragraph of desc
<br/>
<br/>
Second paragraph of desc
<br/>
<br/>
Third paragraph of desc
<br/>
</paper_desc>
<paper_time>45</paper_time>
<user_real_name>Bob Student</user_real_name>
<user_id>2322</user_id>
<category>Languages</category>
</paper>
...
When I push the content to container_div only the first paragraph is showing up. If I stick a Javascript alert() in to return paper_desc it only contains the first paragraph. I've tried looking for other nodes but this says there's only 1 node:
alert(paper_nodes[i].getElementsByTagName("paper_desc").length);
You use paper_desc[0].firstChild.nodeValue
paper_desc[0] is a set of nodes: text nodes and br nodes. You get only the first child of this set, so you get only the first text.
Your alert() call only shows you have only one paper_desc node, not how many nodes you have inside.
I also found strange that you used paper_nodes[1] but I don't know if there is a second node in your XML and if you really want to target it.

How to replace image links with img src url in Greasemonkey

From the title this may sound like a duplicate question. But what I am asking for is help writing a Greasemonkey script that takes all images containing the word "thumbnails" in the src url, replaces "thumbnails" with "images" but then putting the new url into the href (target) url.
What I have so far is:
for(var iImage=0;iImage<document.images.length;iImage++){
var imageUrl = document.images[iImage].src;
if (imageUrl.indexOf("thumbnails") != -1) {
imageUrl = imageUrl.replace("thumbnails","images")
document.images[iImage].href = imageUrl;
}
}
Any help would be appreciated.
img tags cant have href, however you can append them into an anchor tag with href attribute:
for(var iImage=0;iImage<document.images.length;iImage++){
var imageUrl = document.images[iImage].src;
if (imageUrl.indexOf("thumbnails") != -1) {
imageUrl = imageUrl.replace("thumbnails","images");
document.images[iImage].outerHTML = '<a href ="' +
+ imageUrl + '" >'
+ document.images[iImage].outerHTML + '</a>';
}
}
Psuedo-code:
var thumblinks=new Array();
for(x=0;x<links.length;x++){
if(links[x].href.test('thumbnails'))thumblinks[thunblinks.length]=links[x];
}
for(x=0;x<thumblinks.length;x++){
thumblinks[x].href=thumblinks[x].firstChild.src;
}
Does this work?

Resources