<body>
<p style="color:green" id="green" onclick=getIT("green beans")>1.Soy beans </p>
</body>
<script>
function getIT (OneWord){
var theWord= document.getElementById("green");
theWord.innerHTML=OneWord; }
</script>
The above code dosent change. if I type one word only it changes, but if I type a string it dosnt not change. Can't figure out why.
Your html is invalid, you need to rewrite your onclick handler to use " before and after the function, then wrap your string in single quotes (') - or the other way around:
onclick="getIT('green beans')"
See this demo
Related
I would like to know if there is an elegant way to pass the whole HTML code of the current screen to ASP.NET Controller action
Just for fun, and since I wanted to try SO run snippets :), this trivial sample may get you started.
function foo() {
var ele = document.getElementById("result");
var html = document.documentElement.innerHTML;
ele.innerText = html;
}
<button type="button" onclick="foo()">Try Me</button>
<p>
<textarea id="result" cols="80" rows="10"></textarea>
</p>
Now you have your "HTML source" text, well, except for the top level html element.
You can do whatever you want to POST it somewhere, however you choose, which I'll leave up to you to handle :)
Fun times ~
This works …
Link text
but this doesn't …
<script type="text/javascript">
window.onload = function() {
var a = document.getElementById("mylink");
a.onclick = function() {
parent.document.getElementById('frameName').src = 'page.html';
}
}
</script>
<a id="mylink" href="page.html">LINK</a>
Any idea why I can't get the element by id from one iFrame to another? Also I know very little code so I apologize in advance if its obvious.
First i would make sure that the security of the site within the IFrame allows you to do this kind of stuff. Check out this link:
Overcoming "Display forbidden by X-Frame-Options"
Next, i would worry about the target of your anchor tag. With specifying it will default to self. In your second piece of code the target will be _self. Thus, when you click the link your javascript will want to change the source of the IFrame while the link will want to change the entire page. I would pick either a JS or HTML implemetation of linking and not both. Here is something that i put together to show one way of changing the iFrame without an actual anchor tag.
<html>
<body>
<iframe id="frameName" src="page.html"></iframe>
<button onclick="changeFrame()">LINK</button>
<script>
function changeFrame() {
document.getElementById('frameName').src ='page2.html';
}
</script>
</body>
</html>
Hello guys I have this weird problem with Razor Syntax.
I have written the same code nuggets in Razor syntax ,having only difference in Inline expression and Multi-statement block.
About.cshtml
<!-- Single statement blocks -->
<p>
Put content here.
#Html.SubmitButton("You are in About")
</p>
Rendered Output:
Index.cshtml
<!-- Inline expressions BUT DOESNT WORKS-->
#{ Html.SubmitButton("okay in Index");}
<!-- Multi-statement block BUT DOESNT WORKS-->
#{
Html.SubmitButton("You are in Index");
Html.CheckBox("A Check Box");
}
Rendered Output:
P.S: Ignore the input button text in the snapshot.
The htmlhelpers only return values.
Even inside code blocks, you still need the # to tell Razor what to do with those values (print them to the HTML buffer).
So never-mind with the code block in this case, it would be redundant, as there's no other code in there but the html-helpers.
But even if there were other code to be placed within the block, you'd still need to preface the helpers with #:
#{
var myVar = "something";
// and so on ...
#Html.SubmitButton("You are in Index");
#Html.CheckBox("A Check Box");
}
I want basically the same as
jquery select image
a row of images that you can select one of.
But I'm trying to style the one I select, and store it.
var selectedicon = "";
function selecticon(){
$('#iconselect').children().click(function(){
$(".selectedicon").removeclass("selectedicon");
selectedicon = $(this).attr("src");
$(this).addclass("selectedicon");
});
}
on this
<div id="iconselect">
<img src="/red-dot.png" class="selectedicon" />
<img src="/green-dot.png" />
<img src="/blue-dot.png" />
<img src="/orange-dot.png" />
</div>
What am I doing wrong?
jQuery addClass and removeClass are mistyped (C should be capital).
Is the function selecticon called at all?
As you are not saying what does not work, here is a wild guess:
Probably the function selection() is never called and thus the click handler is never attached to the elements. Put your code into the document.ready callback instead:
var selectedicon = "";
$(function() {
// I would use $('#iconselect img').click(...)
$('#iconselect').children().click(function(){
$(".selectedicon").removeClass("selectedicon");
selectedicon = $(this).attr("src");
$(this).addClass("selectedicon");
});
});
This ensures that your code is executed once the DOM is loaded.
You also have some typos in the method names:
removeclass() must be removeClass()
addclass() must be addClass()
I want to solve duplicate objects in dynamic loading content. Please look at the following source code for easier understand.
Base Page HTML With 1 Dynamic Loading Content
<body>
<div id="general-div"></div>>
<div id="div1"></div>
<div id="placeholder1">
Dynamic Content will be placed inside this.
<div class="inner-div"></div>
<div class="div1"></div>
</div>
</body>
For script in header of this page, it's very easy to select "general-div" object like the following code.
$('#general-div')
It's quite easy for select "inner-div" object inside placeholder1. So I can select by using the below code.
$('.inner-div')
The above code could works perfectly. However, I can't use the above code when there is more than 1 duplicated object in the same document like the following HTML. The above code will return 2 objects that don’t what I want.
Base Page HTML - After load another dynamic loading content
<body>
<div id="general-div"></div>>
<div id="div1"></div>
<div id="placeholder1">
Dynamic Content will be placed inside this.
<div class="inner-div"></div>
<div class="div1"></div>
</div>
<div id="placeholder2">
Dynamic Content will be placed inside this.
<div class="inner-div"></div>
<div class="div1"></div>
</div>
</body>
Possible Solution 1
I must create specified jQuery object foreach script in dynamic loading content like the following code.
// Deep copy for jQuery object.
var specfiedjQueryObj = $.extend(true, {}, jQuery);
// modify find function in jQuery object.
specfiedjQueryObj.fn.find = function(selector)
{
// by adding placeholder selector before eval result.
return new specfiedjQueryObj.fn.old_find('#placeholder1 ' + selector);
};
// So, I can select any object in dynamic loading content.
(function($)
{
// This result must be 1 object.
$('.div1');
})(temp);
Even though, this solution should be work great. But I found that jQuery is a very complex object. I found a lot of errors when I try to use it.
Do you have any idea for solving this problem?
PS.PlaceHolder Id is not a fixed Id. So, It's impossible to fixed it in selector rule. Moreover, I do not know exactly amount of element and position (first, last or middle) of it in document. Because of dynamic loading content will be displayed on a lot of page.
How about $('div[id^=placeholder]:last') ?
Selectors / attrubuteStartsWith
You could simply use $('.innerdiv:first') to get the first one or $('.inner-div:last') to get the last one. Or if you have multiples and want to select a particular one $('.inner-div:nth(x)') where x is the index of the item.
The following function will process data from partial loading view page and add specified context for each jQuery selector in script. This answer works well. However, it does not support external script file.
function renderPartialView(control, data)
{
// For detecting all script tag in loaded data.
var reExtractScript = /(<script type="text\/javascript">)([\s\S]+?)(<\/script>)/gi;
// For detecting all "$" sign (must be jQuery object) in loaded data.
var reFindDollarSign = /\$\(([\S]+?)\)/gi;
// Find all matched string in loaded data.
var result = reExtractScript.exec(data);
var allScript = '';
if (result)
{
for (i = 0; i < result.length; i += 4)
{
// Remove current script from loaded script.
data = data.replace(result[i], '');
// Replace all "$" function by adding context parameter that is control.
allScript += result[i+2].replace(reFindDollarSign, '$($1, "' + control + '")');
}
}
// Load non-script html to control.
$(control).html(data);
// Evaluate all script that is found in loaded data.
eval(allScript);
}
// This script will partially download view page from server in the same domain
$(function()
{
$.get(getUrl('~/Profile/Section/ViewEducation'), null, function(data)
{
// When partial loading is complete, all loaded data will be sent to “renderPartialView” function
renderPartialView('#education-view', data);
});
});
Okay, so let's talk about your example HTML. I added a class of placeholder, and added a dash in the id for convenience later.
<div id="placeholder-1" class="placeholder">
Dynamic Content will be placed inside this.
<div class="inner-div">baz</div>
<div class="div1">zip</div>
action
</div>
<div id="placeholder-2" class="placeholder">
Dynamic Content will be placed inside this.
<div class="inner-div">foo</div>
<div class="div1">bar</div>
action
</div>
Now I can bind an event to each of these links with $('.placeholder a.action').bind('click', ... ); If I want this event to all future chunks of html like this on the page, I do $('.placeholder a.action').live('click', ... );
This code will attach an event to those links and the var statements can capture the id, or the inner text of the <div>s. In this way you don't have colliding id attribute values, but you can traverse actions inside divs with class placeholder.
$('.placeholder a.action').live('click', function(){
// get the id
var id = $(this).parents('div.placeholder').attr('id').split('-')[1];
// get the text inside the div with class inner-div
var inner_div = $(this).parents('div.placeholder').children('.inner-div').text();
// get the text inside the div with class div1
var div1 = $(this).parents('div.placeholder').children('.div1').text();
return false;
});