Dear stackoverflow users,
I have the following code:
<button onclick="var ifr=document.getElementsByName('menuframe')[0]; ifr.src=ifr.src;">Refresh Iframes</button>
And this code only changes the first iframe. I have tried changing the [0] to [1] and this lets me refresh the second iframe but not the first.
So i tried [0-10] but that did not do anything. Also i tried [0,1] but this changed the second.
I know it must be possible but how. I have no idea. Any help would be greatly appreciated!
I know this is an old question, but I figured I'd throw an answer.
To start I would recommend calling a function in the onclick attribute instead of including inline javascript. You would accomplish this using the following:
<button onclick="javascript:refreshIframes('menuFrame');">Refresh Iframes</button>
I added a variable to the function to allow it to be reusable for other iframe names.
In your page (most people prefer to place it at the bottom, some prefer to place it in an external javascript file that is then referenced) you would include a function similar to the following:
function refreshIframes(frameName) {
var frames = document.getElementsByName(frameName);
for (var i = 0; i < frames.length; i++) {
var frame = frames[i];
frame.src = frame.src;
}
}
If you decide to include this on your page instead of putting it inside an external javascript file you would need to wrap it in script tags.
Related
Here is the situation :
On a MVC application I have a partial that is rendering a script bundle.
this partial is rendered several times.
Is there a built-in way to determine an specific Bundle is rendered before in some place on page ?
Thanks professionals
Update : here is the code for clearing the condition
main layout :
<html>
<body>
#if(someCondition){
#Html.RenderPartial("SamePartial")
#Html.RenderPartial("SamePartial")
#Html.RenderPartial("SamePartial")
}
</body>
</html>
and this is inside partial :
<div>Blah Blah Blah</div>
#Scripts.Render("~/bundles/JusNeededInsidePartial")
#Styles.Render("~/Themes/styles/JusNeededInsidePartial")
partial is rendered several times. I need a way to render bundles 1 time only
Define a Razor section:
#section MySpecialScripts {
#Scripts.Render("~/bundles/MySpecialScriptsBundle")
}
in views where you need such scripts and add the following to the main layout:
#if (IsSectionDefined("MySpecialScripts")) {
RenderSection("MySpecialScripts")
}
I'd be a bit leery about putting bundles inside your partial views like you are doing.
For best performance, I'd suggest putting scripts at the bottom of your page (ref: http://developer.yahoo.com/blogs/ydn/high-performance-sites-rule-6-move-scripts-bottom-7200.html)
If your bundles contain stylesheets, you're going to be putting them in the body, which is still valid, but I like to organize them so that they're all together.
Typically what I would do is add this to my _Layout.cshtml right before the closing </head> tag:
#RenderSection("Head", required: false)
Then, in my View, I could have:
#Html.RenderPartial("SamePartial")
#Html.RenderPartial("SamePartial")
#Html.RenderPartial("SamePartial")
#section head{
#Scripts.Render("~/bundles/myBundle")
}
And if I wanted to do something similar on another View:
#Html.RenderPartial("OtherPartial")
#Html.RenderPartial("OtherPartial")
#section head{
#Scripts.Render("~/bundles/myOtherBundle")
}
I know this is a bit different than what you were asking for, but I think there's value in the flexibility of this solution.
And if you're loading things dynamically, you could always put a simple condition in your section:
#section head{
#if(SomeCondition){
#Scripts.Render("~/bundles/modernizr")
}
}
You can do the check in the JavaScript scripts themselves:
In JavaScript you can check if something has been previously defined, and only define it if it hasn't.
For example:
if (typeof flag === 'undefined') {
// variable is undefined
flag = {};
// Here type the code that must happen only once
}
NOTE: the flag name is a global var. To avoid collisions, you'd "namespace", and use specific names for each script file like this:
if (typeof myScripts === 'undefined') {
myScripts = {};
}
if (typeof myScripts.MySpecialScripts=== 'undefined')
{
myScripts.MySpecialScripts = '';
// Add the "MySpecialScripts.js" code here
}
However, I'd render the script bundle outside the partials to ensure it's available to them. In this way you can ensure that it's rendered only once and available to all your partials.
In fact, unless it's a very large .js file, why not include it in your general bundle?
Yep, I know you feel tha your project is "better organized" if you include the scripts on the view which needs them, but that's not a good idea: you have to control if they have yet been included or not, you cand' move them to the bottom of the page if you want to and so on.
If you still want to keep your original idea you can use a the client dependency framework. It's not exactly what you want to do, but it's the best available solution. When you use this framework, you need to declare the dependencies of you components (Views) using different methods, like this:
#{Html.RequiresJs("~/myscript.js");}
Anyway, as I wrote in my comment, the problem with this kind of solution is that if you start using AJAX there is no single way to get sure that you always get the desired scripts, and that they are available on client side when you need them. Unless you use some variation of the first client-side solution that I wrote in this answer (there are better solutions based on this basic concept). Let me insist: the best solution is always to have everything ready on the client side (unless it's a really huge project that have hundreds of big js files). Remember that the js file is loaded once, and cached for later use in the browser, so downloading a big .js file it's not such a big problem.
And please, even if you think you need a server side solution, don't discard a client side solution. Remember that, even if you server the js from the server, that's 'client side' code, so, why not use a 'client side solution' for your 'client side code' problem?
Still anothe solution: ypu can use PageData to share information between views, layouts, and partial views. When you need to add a script in any of this places, use a flag in PageData. If the flag is not present, render the script, and set the flag. If the flag is present, don't render the script. In this way, the script will be rendered only the first time.
if (PageData["JusNeededInsidePartial"] == null) // Check the flag
{
#Scripts.Render("~/bundles/JusNeededInsidePartial");
PageData["JusNeededInsidePartial"] = ""; // Set the flag
}
The problem with AJAX still exists, because if you render the partial by AJAX, it will load the script in the client side everything the partial view is loaded by AJAX.
I have a reference site for a series of books, and I'd like to make it so that readers can avoid spoilers. The idea I had was to make a setup webpage where they click on a checkbox for each book from which they want to see info. I could then store that (somehow) as a cookie for each time that they visit the site, plus have it work for each page in the site. So, one page might have this:
<li class="teotw">Rand killed a Trolloc</li>
and another page might have
<li class="teotw">Nynaeve tugged her braid</li>
and that information would not show up on the page unless they had checked the box for the "teotw" book. My initial thoughts are to do something like toggling the CSS class value like this:
document.styleSheets[0]['cssRules'][0].class['teotw'] = 'display:none';
document.styleSheets[0]['cssRules'][0].class['teotw'] = 'display:inherit';
but I'm not sure if this is the best method. Firstly, it would only apply to the current document only so I'd need a way to re-apply it to each page they visit. I'm using YUI as well, if it matters.
Any ideas on the best way of doing this?
There are many ways to implement it. You can use the YUI Stylesheet module (read its User Guide for how to use it) which will do what you're considering with cross-browser support and it's much easier to use than using the DOM directly.
Another way would be to add classes to the body of the page. You can define styles like this:
.teotw {
display: none;
}
.teotw-visible .teotw {
display: block;
}
With the following JS code:
if (someCondition) {
// show the hidden content
Y.one('body').addClass('teotw-visible');
}
For the persistance of the visible state you can use cookies with the YUI Cookie utilty or local storage with CacheOffline. Code using cookies would look something like this:
var body = Y.one('body');
if (Y.Cookie.get('teotwVisible')) {
body.addClass('teotw-visible');
}
// change the cookie
Y.one('#teotw-toggle').on('click', function (e) {
var checked = this.get('checked');
Y.Cookie.set('teotwVisible', checked);
body.toggleClass('teotw-visible', checked);
});
You should probably store the different sections in a JS object and avoid hard-coding class names in every JS line. Or maybe use a convention between checkboxes IDs and section class names.
I am using nicEdit in its iframe format.Everytime the user write anything in the editor(keyup event), I need to run another js/jquery function. How to add this custom keyup action to the desired iframe?
The answer actually lies in the js code. In the nicEdit.js search for :
var nicEditorIFrameInstance = nicEditorInstance.extend({
Inside this, in the initFrame function,
look for this.frameDoc.addEvent.
This is where the events are being added(via addEvent). To this include your keyup statement :
addEvent('keyup',this.YOURFUNCTIONAME.closureListener(this))
You need to add closureListener(this) to get this working.Then create YOURFUNCTION after initFrame function like this :
YOURFUNCTIONAME: function() {
//Do what you like. Probably call any JS function that lies in the file where
//you have included the nicEdit.js
},
This method worked for me. Hope it does for you too. nicEdit is by far the worst documented third party stuff I have ever come across.
I have a web page that contains a "div" element. On the page, there is javascript to reference the div: document.getElementById('divId'). This was working fine until another developer redesigned the page to use an ASP master page.
Now, document.getElementById('divId') returns null. It appears that ASP.net prepends some characters to the names of elements within contents forms when you use a master page. How can I know what the id of the div is when the page loads?
Update Allow me to give a specific example to clarify the question: My page had a div with ID divNotice. After changing my page to use a master page, I see when I print the source to the page that renders that the div ID is ctl00_ContentPlaceHolder1_divNotice. My question is, how am I supposed to know what the div ID is going to be when the framework is done with it?
I think that this is what you looking for.
document.getElementById('<%=divNotice.ClientID%>')
to get the ID of your element as appears on the html page use .ClientID
Hope this help.
Dynamically create the javascript using Control.ClientID to determine the calculated ID of div.
document.getElementById('<%= DivControl.ClientID %>')
Or search for the element on the client side using the base ID as a search pattern. See here: A generic way to find ASP.NET ClientIDs with jQuery
I prefer the server side calculation, but if you don't do it often and/or your current design prohibits it, the client side way is a reasonable workaround.
you can check i the element exists by checking if it returns not null
if (document.getElementById('divId') != null) { /* do your stuff*/ }
in other words:
if (document.getElementById('divId')) { /* do your stuff*/ }
now you have edited you orginal question i got it.. i would do something like this:
var arrDivs = document.getElementsByTagName('div'),
strDivName = "divId";
for (i=0;i<=arrDivs.length;i++){
if( arrDivs[i].id.indexOf(strDivName) != -1) {
alert("this is it")
}
}
you can see a demo here:
http://jsfiddle.net/pnHSw/2/
i think you could do it better with a regex.
But this is a pure JS way i don't know ASP.net
edit: i think Aristos solution is much cleaner :P
maybe you can use a descendent selector un css
<div id="wrapperControler">
<controler id="controler"></controler>
</div>
wrapperControler controler{
dosomething;
}
I wonder why I can't get value from FCKEditor with this javascript? I work with asp.net so I know the controls get different names, mine is in a placeholder and in a usercontrol. How should I approach it to find the FCKEditor?
thx
function test()
{
var oEditor = FCKeditorAPI.GetInstance('FCKeditor1');
var pageValue = oEditor.GetHTML();
alert(pageValue);
}
This should work, but the problem is that using this approach you can not have this function in external JavaScript file. It has to be inline in your asp.net page.
function test()
{
var oEditor = FCKeditorAPI.GetInstance(<%= FCKeditor1.ClientID%>);
var pageValue = oEditor.GetHTML();
alert(pageValue);
}
FCKeditorAPI.GetInstance('<%=FCKeditor1.ClientID%>')
ASP.NET generates different IDs to the ones you use based on their position within the DOM. You should use the ClientID from within the client code to get at the actual ID, but without seeing the mark-up I can't tell for sure.
i tried this code an it work
FCKeditorAPI.GetInstance('ctl00_ContentPlaceHolder1_ctl00_FCKeditor1');
i tried
FCKeditorAPI.GetInstance('<%=FCKeditor1.ClientID%>')
thing that last wont work cause i got page - usercontrol - fckeditor
so the intellesence wont show the fckeditor. i would like to make it work with the last one
so i dont have to put the "ctl00_ContentPlaceHolder1_ctl00_FCKeditor1"