Develop Reference

How to pass viewBag data into Javascript and display in div

I am always leery of asking dumb questions here but I need to move on and create a few more active pages but this is a lingering issue in my way ...The chtml in razor contains a switch ,,, in one of the cases there's three if statements.. THIS IS JUST ONE OF THEM depending on the if statements a different string in viewdata is to be fed into a div and the div class "hidden" is removed and the supplied text displayed....
I have over the past few hours regained my briefly lost ability to remove that hidden class (I hate css) but I have never been able to update the content of the div.
PLEASE Advise Thank you !!
<div id="divUnUsableEvent" class="hidden">
<div class="row clearfix">
<div class="col-md-1"></div>
<div id="systemExceptionLbl" style="font-size: 2em; color: red;"
class="text-danger:focus">
Please contact IS support
</div>
</div>
</div>
//alphascores Not present AND BetaSCores Not Present Ready for xxxxx //alphascores Not present AND BetaSCores Not Present Ready for xxxxx Scoring
if (!Convert.ToBoolean(#ViewData["alphaPresent"])
&& !Convert.ToBoolean(#ViewData["betaPresent"]))
{
<script type="text/javascript">
$(function() {
$('#UnUseableEvent').addClass("hidden");
var txtMsg = #Html.Raw(Json.Encode(ViewData["beforeAlpha"]));
$('#divUnUsableEvent').removeClass("hidden");
$('#systemExceptionLbl').removeClass("hidden");
$('#systemExceptionLbl').innerText = txtMsg;
});
</script>
<a id="XXXReScoreEvent"
href="#Url.Action("Readyforxxxxxx", "Exception", new { Id = (int)#ViewData["Id"] })"
class="btn btn-primary btn-default btn-too-large pull-left margin"
aria-label="XXXReScoreEvent">
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span> Ready for xxxxxx Scoring
</a>
}
break;
I know its hitting the javascript, as that html element (a button) named '#UnUseableEvent' is correctly being hidden in this case. I of course would want the javascript out of this html page and just have function calls in the razor but baby steps
Specifically regarding the ('#systemExceptionLbl').innerText = txtMsg; I have tried
.text
.value
.innerHTML
all to no avail. I can see the correctly formatted Json.Encoded text reach the variable txtMsg, but again I cant get it into the div ..
I am having success now with displaying the div (remove class hidden) I was attempting to affect the wrong div name and the line removing the hidden class from the element $('#systemExceptionLbl') is not needed.
I even tried to skip the JQuery reference and go old school document.getElementById('systemExceptionLbl').innerHTML = txtMsg;

Ever tried :
$('#systemExceptionLbl').text( txtMsg );
or
$('#systemExceptionLbl').html( txtMsg );
as innerText is not a jquery function. Instead use .html() or .text() to insert data into it

Javascript divs not stacking

I have some div boxes and when you click a link it replaces an existing box rather than stacks a new one below it.
It's probably best to show you rather than explain.
Or at least I would but creating a jsfiddle doesn't replicate what I see on my webpage.
My webpage is intranet so I cannot share.
This is the fiddle: http://jsfiddle.net/GR6pu/
(When trying to post I get asked to accompany a jsfiddle.net link with some code.
Not quite sure what is needed so I'll post this:)
var showed = 'com1';
function com(id) {
if (showed && showed !== id) {
document.getElementById(showed).style.display = 'none';
}
document.getElementById(id).style.display = 'block';
showed = id;
}
What should hopefully happen is:
You start in community box.
When you click 'lam' you get a box below it = 'lam activities'.
If you subsequently click 'dispatch' this 'lam activites' box is replaced with 'dispatch activities'.
This bit works fine on my website with what I have posted in the fiddle.
Then, in 'lam activities' if you click 't45' you should get another box below it, but on my website the 't45' box replaces the 'lam activities' box rather than stacks another below it.
My goal is to have the 't45' box stacked underneath the 'lam activities' box.
From reading other threads on the forum I know you like your posters to detail what they have tried...
My knowledge on all things web based is small.
4 weeks ago I had never created a website and I've managed to teach myself enough HTML and CSS to create a working website but Javascript is still new to me, hence I don't have the knowledge to fiddle about with the js to make it work.
I tried changing none to block but this then creates more boxes than I would like.
Thanks, Kristian

When you click 'lam' you get a box below it = 'lam activities'.
Then, in 'lam activities' if you click 't45' you should get another
box below it, but on my website the 't45' box replaces the 'lam
activities' box rather than stacks another below it.
my goal is to have the 't45' box stacked underneath the 'lam
activities' box.
Overall you got 2 issues, the HTML is invalid as closing tags are missing and your code is not correct, hence it will not show the expected elements.
Fixing your HTML
Your demo fiddle is broken in the first place and does not demonstrate the issue you have.
You cannot show lam1 if the lam1 element is inside the com2 element which you are still hiding display: none, please inspect your HTML after clicking t45:
The reason you end up with incorrect nested HTML like that is due to missing closing tags which creates invalid HTML.
All <a> tags are missing their matching </a> closing tags.
All main divtags, such as <div id="com1"..>, <div id="lam1"..>, etc.. are missing their matching </div> closing tags.
Browsers try a best-guess, adding closing tags where it seems most appropriate, hence you might end up with unexpected HTML, such as sibling elements becoming nested instead.
Edit: The </a> are not required (my bad), only the 3rd </div> was missing in each section. I updated the fiddle and posted code to reflect that
DEMO - Adding missing closing tags fixes the demo and now shows the issue you are having.
Fixing your code
Now that the missing closing tags are added fixing the HTML in the fiddle which now works and shows the issue we can fix your code.
Your second function will always hide the t45 element and then show the task-element, hence it "replaces" it. I'm assuming you want similar functionality whereby the task element is replaced as you click on different "tasks".
In that case you cannot use the showed id but need to keep a separate record of the task-id (or what ever you want to call it)
function lam(id) {
// this removes the t45 element you want to keep
// I'm assuming you want to track clicked lams separately
if (showed && showed !== id) {
document.getElementById(showed).style.display = 'none';
}
document.getElementById(id).style.display = 'block';
showed = id;
}
Change that to the following and both elements are visible.:
var taskId;
function lam(id) {
if (taskId && taskId !== id) {
document.getElementById(taskId).style.display = 'none';
}
document.getElementById(id).style.display = 'block';
taskId = id;
}
DEMO - Fixing the code.
Here is the fixed HTML and code for completeness from the fiddle above.
HTML:
<div class='whitebox'>
<div class='subheader'>community</div>
<div class='links'>
<a onclick="com('com1');"><div class='boxlink'>LAM</div>
<a onclick="com('com2');"><div class='boxlink'>DISPATCH</div>
<a onclick="com('com3');"><div class='boxlink'>PLANNING</div>
</div>
</div> <!-- closing </div> was missing -->
<div id="com1" style="display:none">
<div class='whitebox'>
<div class='subheader'>lam activities</div>
<div class='links'>
<a onclick="lam('lam1');"><div class='boxlink'>T45</div>
<a onclick="lam('lam2');"><div class='boxlink'>SYNC</div>
<a onclick="lam('lam3');"><div class='boxlink'>ESSS</div>
<a onclick="lam('lam4');"><div class='boxlink'>IND</div>
</div>
</div>
</div> <!-- closing </div> was missing -->
<div id="com2" style="display:none">
<div class='whitebox'>
<div class='subheader'>dispatch activities</div>
<div class='links'>
<a onclick="lam('lam2');"><div class='boxlink'>SYNC</div>
<a onclick="lam('lam3');"><div class='boxlink'>ESSS</div>
</div>
</div>
</div> <!-- closing </div> was missing -->
<div id="lam1" style="display:none">
<div class='whitebox'>
<div class='subheader'>t45 tasks</div>
<div class='links'>
<a onclick="t45('t451');"><div class='boxlink'>REMOVAL</div>
<a onclick="t45('t452');"><div class='boxlink'>ADJUST</div>
<a onclick="t45('t453');"><div class='boxlink'>RECEIPT</div>
</div>
</div>
</div> <!-- closing </div> was missing -->
<div id="lam2" style="display:none">
<div class='whitebox'>
<div class='subheader'>sync tasks</div>
<div class='links'>
<a onclick="t45('t451');"><div class='boxlink'>emea</div>
<a onclick="t45('t452');"><div class='boxlink'>namer</div>
<a onclick="t45('t453');"><div class='boxlink'>s asia</div>
<a onclick="t45('t454');"><div class='boxlink'>n asia</div>
</div>
</div>
</div> <!-- closing </div> was missing -->
JavaScript:
var showed = 'com1';
var taskId;
function com(id) {
if (showed && showed !== id) {
document.getElementById(showed).style.display = 'none';
}
document.getElementById(id).style.display = 'block';
showed = id;
}
function lam(id) {
if (taskId && taskId !== id) {
document.getElementById(taskId).style.display = 'none';
}
document.getElementById(id).style.display = 'block';
taskId = id;
}

Lets break this down:
if (showed && showed !== id) {
document.getElementById(showed).style.display='none';
}
If showed is set and is not equal to the new id passed in the function, get the element with the ID of id and set it to display:none;
document.getElementById(id).style.display='block';
Get the element with the ID of id and set it to display:block;
showed=id;
Set the showed variable to be the value of the id passed into the function.
So basically, the function hides the previous element and then shows the element that has the ID you passed into the function. If you don't want to hide the previous element, you just need to remove the part of the function that does that (the if( showed && showed !== id ) { ... } statement block)

toggle display of p tag depending on the value inside

Im assuming this shouldn't be too difficult to solve, but i'm pretty much a novice when it comes to Javascript or JQuery.
HTML:
<p><span id="AddLine1Summary"></span>,</p>
<p><span id="AddLine2Summary"></span>,</p>
<p><span id="TownCitySummary"></span>,</p>
<p><span id="CountySummary"></span>,</p>
<p><span id="PostcodeSummary"></span></p>
When the customer does not fill in the Address Line 2, there is still a value of "," present so in the summary page it looks like this :
12 Bob Street,
,
BOLTON,
Lancashire,
BL1 1AC
So Im trying to get rid of the whole line <p><span id="AddLine2Summary"></span>,</p> when the customer leaves this blank. So far I have tried and come to this:
<script>
$(document).ready(function () {
if ($('#AddLine2Summary:contains(",")').length == 1) {
$("#AddLine2Summary").parent().hide();
}
});
</script>
parent.hide because I have to hide the whole <p> not just the <span>

Rather than checking length of "," you can also check for text inside span which has ID AddLine2Summary. And if it is empty you can put the code of hiding parent.
It should look like :
if ($('#AddLine2Summary').is(':empty')) {
$("#AddLine2Summary").parent().hide();
}

Firstly, try wrapping your HTML snippet in a container to make selection easier:
<div class="address-container">
<p><span id="AddLine1Summary"></span>,</p>
<p><span id="AddLine2Summary"></span>,</p>
<p><span id="TownCitySummary"></span>,</p>
<p><span id="CountySummary"></span>,</p>
<p><span id="PostcodeSummary"></span></p>
</div>
Then in jQuery, look for empty span elements in here, and hide their parent p.
$('.address-container span:empty').closest('p').hide();
Example fiddle
This will then work for all empty address fields, not just #AddLine2Summary.

how can content between a class put in a variable after click?

How do I retrieve the content between and including the following <div class="adding"> and store it in a variable?
<div class="adding">
<b>
<div class="column">
<div class="mediumCell">
<input type="text" name="name" placeholder="توضیح" title="نام پکیج تور خارجی">
</div>
</div>
<div class="column" style="margin: 5px 3px;">
<div class="mediumCell">
<div class="adda">
</div>
</div>
</div>
</b>
</div>
var adding = '<div class="adding"><b><div class="column"><div class="mediumCell"><input type="text" name="name" placeholder="توضیح" title="نام پکیج تور خارجی"></div></div><div class="column" style="margin: 5px 3px;"><div class="mediumCell"><div class="adda"></div></div></div></b></div>'
In each click I want to get the content just once.
Unfortunately, after two or more clicks getting content several times together (E.x: after two clicks it stores the content twice).
I tried this:
$(function () {
var i = $('.adding').size();
$('.add_input').live('click', function () {
var scntDiv = '.' + $(this)
.closest('.find_input')
.find('div')
.attr('class');
var input = $(scntDiv).html();
$(this).remove();
$(input).appendTo(scntDiv);
i++;
return false;
});
});

You can use the html() method, as others have said, but there's a catch: that method returns the inner HTML content of the element, so the markup of the outer <div> element won't be included in the result.
Since you seem to want that markup, you can work around the issue with clone(), wrap() and parent():
var adding = $("div.adding").clone().wrap("<div>").parent().html();

You can get the inner HTML using the html function:
var adding = $(".adding").html():
...which will give you the browser's version of the markup within the first matching div (the first div with the class "adding"). It's fairly simple at that point to wrap it with the markup for the div, unless there are a lot of chaotic attributes involved.
However, note that the markup you get back may not be what you expect, because your HTML is invalid. b elements cannot contain div elements (b elements may only contain phrasing content; div elements are flow content), and so the browser adjust things as it sees fit to display something reasonable. This is a Bad Thing(tm), it's much better with dynamic web apps to ensure that your HTML is valid.

Is that what you're asking for ?
var adding;
$('.adding').click(function(){
adding = $(this).html();
alert(adding);
});

var adding = $(".adding").html();
maybe?

jquery Remove siblings elements, doesn't work in IE7

I'm trying to remove all the sibling elements after a particular div, lets say the div tag with id = id8.
<form>
<div id="id5">something ...<div>
<div id="id8">something ...<div>
<div id="id3">something ...<div>
<div id="id97">something ...<div>
<div id="id7">something ...<div>
...
<div id="idn">some text ...<div>
</form>
To do that I use the following code in jquery.
$("#id8 ~ div").remove();
It works fine in Firefox, but It doesn't work in IE7.
Is there an alternative way to archieve this, using jquery and just giving the tag id from the element I want to start removing the elements?
Thanks
Thanks everybody for your help
I end up with this solution based on the accepted answer
function removeAfter(el,tag){
element = $('#'+el);
var aElements = $(tag,element.parent());
var index = (aElements.index(element));
for(i=(index+1);i<aElements.length;i++) {
$('#'+$(aElements.get(i)).attr('id')).remove();
}
}
just call
removeAfter('id8', 'div')

Two things!
1) Close your <div> tags! It should look like this:
<form>
<div id="id5">something ...</div>
<div id="id8">something ...</div>
<div id="id3">something ...</div>
<div id="id97">something ...</div>
<div id="id7">something ...</div>
<div id="idn">some text ...</div>
</form>
2) The ~ operator only matches siblings that follow the matched element (ie it will match id3, id97, id7 and idn, but not id5). To match every sibling, including id5, you do this:
$("#id8").siblings("div").remove();
That should leave you with just id8. I tested this in Firefox 3.5.5 and IE7.0something. Hope that helps!

Three steps here:
Find the index number of the element we've clicked, with respect to its parent.
Loop through all the div elements contained within this parent, starting after the one we just found
Delete each div found
$(document).ready(function(){
$('#parent').children().click(function(){
var index = ($('div',$(this).parent()).index(this));
for(i=(index+1);i<$('div',$(this).parent()).length;i++){
$($('div',$(this).parent()).get(i)).hide();
}
});
});
This will work on this HTML
<div id="parent">
<div id="c1">c1</div>
<div id="c2">c2</div>
<div id="c3">c3</div>
<div id="c4">c4</div>
<div id="c5">c5</div>
</div>
Comment here if you've got any more problems on the matter!
P.S. An application of this solution exact to your request is the following
function removeAfter(el){
element = $('#'+el);
var index = ($('*',element.parent()).index(element));
for(i=(index+1);i<$('*', element .parent()).length;i++){
$($('*', element.parent()).get(i)).hide();
}
};

EDIT:
Editing the answer below to add what should be a fix for the problem:
$("#id8").nextAll().remove();
END EDIT.
Ok. This appears to be an interesting bug - initial testing seems to indicate it's a jquery bug although I haven't found any specific mention of it anywhere.
The bug seems to be that if your initial selector tag is the same type as its siblings then it will fail to return any siblings in IE7.
I tested it using the jQuery example code for the selector itself and was able to duplicate your problem in IE8 emulating IE7.
If you check the jquery example code I'll stick below you can see that the actual element they're using as the initial selector is a span and the sibling elements are all divs whcih seems to me to indicate they know about this bug and haven't documented it, which is both cunning and shitty.
<script>
$(document).ready(function(){
$("#prev ~ div").css("border", "3px groove blue");
});
</script>
<div>div (doesn't match since before #prev)</div>
<span id="prev">span#prev</span>
<div>div sibling</div>
<div>div sibling <div id="small">div niece</div></div>
<span>span sibling (not div)</span>
<div>div sibling</div>
Change the #prev span to a div and you'll get the same failure as you're getting currently. I'd submit a bug with the jquery team.