I use ASP.NET MVC application and has the following code:
<div id="divComments">
#foreach (var comment in Model.Comments) {
<div id="comment-#comment.ID">
<div>
#comment.Username<br />
#comment.DateAdded.ToString()
</div>
<div>
#comment.Comment
</div>
<input type="button" class="deleteComment" value="Del" id="btnDel-#comment.ID" />
<br />
</div>
}
</div>
Also, I want to add div block with id="comment-X" via jquery. I do it the following way:
$('#divComments').append('<div id="comment-' + resp.Result.ID + '"><div>' + $('#Username').val() + '<br />' + resp.Result.date + '</div><div>' + comment + '</div><input type="button" class="deleteComment" value="Del" id="btnDel-' + resp.Result.ID + '" /><br /></div>');
Is it possible to move it to any PartialView/Html file and work with it in both places - cshtml (inside my foreach) and jquery?
This HTML part is only an example; this part can be much more bigger.
The first section is fine, if you want to move to a partial view you can have the partial view setup the html you want with a viewmodel passing in the information you want populated. You would then call that controller action and then append the result to the divComments block.
This would allow you to add complicated pieces of html without a messy string, etc.
Related
I'm trying to build a... link builder to ease some of my day-to-day tasks. I can't make it work though, and would really appreciate some help:
<form target="">
ID one:
<input type="text" name="IDone" id="ID1">
ID two:
<input type="text" name="IDtwo" id="ID2">
<button value="go" id="myButton">build</button>
<script type="text/javascript">
document.getElementById("myButton").onclick = function () {
location.href =
"https://first.part.com/" + document.getElementById("ID1").value +
"?act=setsecond_part=" + document.getElementById("ID2").value;
};
</script>
</form>
The idea is very simple:
first field (ID one) gets the data that's put in it;
second field (ID two) gets the data that's put in it;
the "build" button actually goes to link that's comprised of https://first.part.com/ + + <?act=setsecond_part=> + <"ID2">.
Thank you for your assistance!
JPM
Delete a form tag and everything will be work fine :)
I'm creating a quiz website for a class, and I am having trouble formatting the page where the user creates questions. I would like to have additional information pertaining a specific question type pop up when the user clicks a radio button. I would then like to have even more additional information pop up if the user clicks a button created in the initial additional information.
So it'd start off looking like this
then it'd look like this
then once the user clicked the Add Option button a few times, it'd look like this
To achieve this I am trying to use jquery to add the new content. However, I can't seem to get that content to display. Here's the current code
In jsp
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="QuestionsCreate.js"></script>
<meta charset="UTF-8">
<title>Quiz Creation</title>
</head>
<body>
<h1>Create Your Quiz</h1>
<form action="QuestionsCreateServlet" method="post">
<h2>Question Type</h2>
<input type="radio" name="type" class="type" id="multipleChoice"
value="multipleChoice" />
<label for="multipleChoice">Multiple Choice</label><br/>
<input type="radio" name="type" class="type" id="fillBlank"
value="fillBlank" />
<label for="fillBlank">Fill-in-the-Blank</label><br/>
<input type="radio" name="type" class="type" id="pictureResponse"
value="pictureResponse" />
<label for="pictureRsponse">Picture Response</label><br/>
<input type="radio" name="type" class="type" id="textResponse"
value="textResponse" />
<label for="textResponse">Text Response</label><hr/>
<div class="jspf"></div>
<input type="submit" name="button" id="button" value="Finish" />
</form>
</body>
</html>
In javascript
$(document).ready(function() {
$(".type").click(function(){
$(".jspf").html("<jsp:include page='WEB-INF/" +
$(".type").attr("value") + ".jspf' />");
$("#button").attr("value", "Add");
});
var nOptions = 1;
$("#add-option").click(function(){
++nOptions;
$(".options").append("<input type='checkbox' name='option" +
nOptions + "' value='" + nOptions + "' /> " +
"<input name='name" + nOptions + "' /><br />");
});
var nBlanks = 1;
$("#add-answer").click(function() {
++nBlanks;
$(".fill-blank-answer").append("<input name='answer" + nBlanks +
"' /><br/>");
});
});
Sample jspf
<h3>Question</h3>
<input name="prompt" />
<h3>Options</h3>
Check the options that denote the correct answer<br/>
<div class="options">
<input type='checkbox' name='option1' value='1' />
<input name='name1' /><br />
</div>
<input type="button" value="Add Option" id="add-option" /><hr/>
I've also tried to move the jspf code into the javascript, but that didn't work either.
Is there a way I can add content dynamically to my webpage based off of dynamically added content? Thanks in advanced!
The issue you're having is you're trying to inject server-side JSP tags into a client's browser. Take this line for example:
$(".jspf").html("<jsp:include page='WEB-INF/" +
$(".type").attr("value") + ".jspf' />");
Once that line of javascript has executed, the CLIENT's brower now has the markup:
<div class="jspf"><jsp:include page="wEB-INF/pictureResponse.jspf" /></div>
Broswers don't know what to do with <jsp:include> tags, so they just silently ignore them.
What you need to do is map the jspf you're trying to include to a url and use something like:
$(".jspf").load("/fragments/pictureResponse.jspf");
$.load sends an AJAX request to from the client browser back to the server, retrieves a bit of HTML from the server, then inserts that in to the elements that match the CSS selector ".jspf".
You also have an issue with your initial click handler.
$(".type").attr("value")
$.attr always returns the attribute value of the first matched element, so no matter what the user clicked, that line is going to evaluate to "multipleChoice". What you probably want to do is:
$(this).attr("value")
In the context of a click handler, "this" is going to refer to what the user just clicked.
UPDATE
Here's how I would add the "add option" click handler once the secondary content has been loaded:
$('jspf').load('/fragments/pictureResponse.jspf', function() {
$('#add-option').click(function() {
nOptions++;
$('.options').append('<input type="checkbox" name="option' + nOptions +
'" value="' + nOptions + '" /> <input name="name' + nOptions + '" /><br />");
});
});
$.get("${ctx}/store/terminalApply/applyTemplate?terminalType=${terminalType}&index="+num, function(data){
$("#contentDiv").append(data);
});
data was a page content
I have the following javascript code:
game.bind('gameover', function(seconds) {
setTimeout(function() {
var rank = game.getRank(seconds);
scorecard.find('.time').text(seconds + ' sec');
scorecard.find('.rank').text(rank[0]);
scorecard.find('.byline').text(rank[1]);
...more code
In the following div this data is displayed (so the js script is working):
<div class="inner">
<h3>Nice job! Your time:</h3>
<h1 class="wobble time"><!-- 15 seconds --></h1>
<h2 class="rank"><!-- Friendly Mallard --></h2>
<h3 class="byline"><!-- (That's pretty good) --></h3>
</div>
Now I want to put the results also in a form so I can post it to the a database (mysql). So I've added a form and put it in the same div:
<form id="form" action="updatescore.php" method="post">
<input type="text" id="time" name="time" value="" />
<input type="text" id="rank" name="rank" value="" />
<input type="text" id="byline" name="byline" value="" />
</form>
Now in the JS I've copied the lines (e.g. scorecard.find('.time').text(seconds + ' sec');) and changed it to look for the id, so . becomes # and passed it in the js like:
scorecard.find('.time').text(seconds + ' sec');
scorecard.find('#time').text(seconds + ' sec');
etc
So this should work I think, but the form inputs stay empty. What am I doing wrong?
Kind regards,
Maurice
If you are just looking to move js variables into your database via updatescore.php you don't need to use a form at all! You can do it with AJAX.
var scoreData = {
time : time,
rank : rank[0],
byline : rank[1]
};
$.post('updatescore.php', scoreData); //done!
Use val() instead of text() for setting the values
I have an INPUT text field, a DIV and an IMG.
The IMG has an onClick event:
reads the INPUT field's current value,
increase it with 1,
does a calculation with the increased value,
writes the result into the DIV.
The value of the INPUT is always increased the right way and the DIV's innerHTML always gets the right result but nothing changes in display. The displayed numbers always stay the same even if everything is done correctly in the "background".
The funny thing in it that I used the same operation at another place on the same site and there everything works and displays perfectly.
Here is the function:
function priceCalculator(max_amound,price,id)
{
var amound = parseInt(document.getElementById('sell_amound_' + id).value);
max_amound = parseInt(max_amound);
if (amound < max_amound)
{
amound = amound + 1;
document.getElementById('sell_amound_' + id).value = amound;
var item_value = amound * price;
document.getElementById('price_' + id).innerHTML = item_value;
alert(document.getElementById('sell_amound_' + id).value + ',' + document.getElementById('price_' + id).innerHTML);
}
}
And here are the elements within a PHP code:
<img src="images/plus.png" onclick="priceCalculator(\''.$bag_items[$i]['amound'].'\',\''.$bag_items[$i]['infos']['price'].'\',\''.$i.'\')" />
<form>
<input id="sell_amound_'.$i.'" type="text" readonly value="1" />
</form>
<div id="price_'.$i.'">'.$bag_items[$i]['infos']['price'].'</div>
The alert at the end of the function shows the right values but the displayed values stay the same.
It's a really simple action... What could be the problem?
EDIT:
After loading the source code of an "item" looks like this (these parts are created with loops from database, and, of course, I removed the irrelevant styling from the code and those many divs are there because of them):
<td>
<img id="item_pic_3" src="images/potions/3.png" onClick="shopSellInfo('3')" />
<div>26</div>
<form>
<input type="hidden" id="selected_item" value="" />
</form>
<div id="item_3" style="display: none;">
<span>blah...</span><br />
<span>
<br />blah...<br /><br />
<div>
<div>
<img src="images/increase.png" onclick="priceCalculator('26','10','3')" /><br />
</div>
<div>
<form>
<input id="sell_amound_3" type="text" readonly value="1" />
</form>
/26
</div>
</div>
<br />
<div id="price_3">10</div>
</span>
</div>
</td>
shopSellInfo('3') is the function that makes item_3 displayed at the right place.
Can you please view source and show what is output by:
<div id="price_'.$i.'">'.$bag_items[$i]['infos']['price'].'</div>
Check that the div id is corresponding to the JavaScript's.
EDIT: item_3 has CSS style display: none, that is why changes are not showing up.
I solved the problem!
The problem was that the IDs appeared at another place, too, so the function didn't know where to change the values because of the duplicated IDs.
Anyway, thanks your answers and will for help!
I'm working on a tagging system and I want users to be able to add and remove tags on the page. for each one thats added I am displaying a small div with the tag and an x to remove the tag. I have the adding functionality working, but I'm not sure how to go about making it so I can remove them. I also have a hidden input which should hold all the values so that when the information is submitted I can use it.
Heres my attempt that doesn't work:
function tagsremove(tag) {
$('#hiddentags').val().replace('/'+tag+'\,\s/', '');
$("#tagdiv-"+tag.replace(" ","_")).fadeOut('normal', function(){
$(this).remove();
});
}
$(document).ready(function(){
$('#tagbutton').click(function(){
var tags = $('#tagsbox').val().split(", ");
for (var i in tags) {
$('#hiddentags').val($('#hiddentags').val() + tags[i] +", ");
$('#curtags').append("<div class='tag'>" + tags[i] + " <a href='#' id='#tagdiv-"+tags[i].replace(" ", "_")+"' onclick='tagsremove(\""+tags[i]+"\");' >x</a></div>");
}
$('#tagsbox').val('');
});
});
heres the html to go with it:
<div class='statbox'>
<form method='post' action='post.php' id='writeform'>
<p class='subtitle'>Title</p>
<input type='text' name='title' id='titlebox' /><br />
<p class='subtitle'>Body</p>
<textarea id='postbox' name='body' rows='10'></textarea><br />
<p class='subtitle'>Tags</p>
<input type='text' id='tagsbox' /><input type='button' id='tagbutton' value='Add' />
<p class='subsubtitle'>Seperate by commas (eg. "programming, work, job")</p>
<div class='subsubtitle' id='curtags'>Current Tags:</div>
<input type='hidden' value='' name='tags' id='hiddentags' />
</form>
</div>
Make each of your tag divs have a relevant ID. For, say, the "play pen balls" tag, your ID could be "tagdiv-play_pen_balls". Now you can just do
function removeTag(tag) {
$("#tagdiv-"+tag.replace(" ","_")).remove();
}
to remove the visible div.
(I'm not sure if that's what you were asking for, though...)
Instead of using .val('') you should be using .html('');
http://docs.jquery.com/Manipulation