I have a page with a "left" div, that contains a menu, and a "right" div, which holds a content that changes, loaded using javascript as in:
document.getElementById("content").innerHTML='<object type="text/html" data="templates/login.htm"> </object>';
It works okay the first time I click a link on the left menu. Now, this new loaded content has also some inputs that should do the same thing. Only it seems that they can't see the "content" div as having this id, or something else. How do I accomplish this? (fixed menu on left, and on the right we would have changing content - which would have several inputs as well). Thanks.
ADDENDUM - The contents of the js function is just the line pasted above. Probably the flow will clarify?
Step 1 - load menu on left and initial content on right. No user intervention
Step 2 - click "login" on left menu. Login page (separate html) loaded on right side. All fine.
Step 3 - click "cancel" in newly loaded login menu on right side... nothing happens, despite that button having the exact same onclick that the left side menu had (the one used to load the login scren in step 2)
When tracing through parents of this "cancel" button, the trace never "saw" the div.
This was the output of "parent hunting"
object HTMLParagraphElement (button is in a )
object HTMLTableCellElement
object HTMLTableRowElement
object HTMLTableSectionElement
object HTMLTableElement (so far so good... this should be a table containing the button clicked)
object HTMLBodyElement (mmm shouldn't I have a div here?)
object HTMLhtmlElement
object HTMLDocument
null
(now... shouldn't I have a div between body and table elements?)
Seems the partial html loaded inside the div cannot see it?
If that code-sample is used in your project, the missing > might be the source of your troubles.
document.getElementById("content").innerHTML='<object type="text/html" data="templates/login.htm"></object>';
Okay...
Seems the loaded content can't intrinsically "see" the parent div or its id by default. The solution was to have:
parent.document.getElementById("content").innerHTML='<object type="text/html" data="templates/login.htm"></object>';
instead of
document.getElementById("content").innerHTML='<object type="text/html" data="templates/login.htm"></object>';
Related
I am building a website (and I am a novice) and the site has 2 frames. On the left side (frame 1), I have a list of links that when you click on a link it will load a page in frame 2 (right side). But the links are on the left side are actually the result of a query and will change.
Rather than hard coding a site for each link, I want to use one target page to display data. I want to use the link on the left side as a variable value to pass to the right side so I can use the link name in a query on the target page.
MyUniqueLink
Any help would be very appreciated.
In your first <iframe>, you can access the parent document like so:
// window.parent will be undefined if you are not in an iframe.
window.parent.document
Then, as spencer said, it would be easier for you to use document.getElementById("secondFrameId") to get to your second iframe.
Also, the onclick event might be a bit more suited to your needs.
So together the code would look like:
<a onclick="window.parent.document.getElementById('secondFrameId').src='http://example.com'">MyUniqueLink</a>
If you want to access the data in your <a>'s, you should start by giving them an id:
<a id = "myId" href="JavaScript:void(top.frames[2].location.href='Recap.html');" >MyUniqueLink</a>
Then you can grab their data using standard js:
document.getElementById("myId").innerHTML; // grabs MyUniqueLink
document.getElementById("myId").getAttribute("href"); // resolves to href value
Or accomplish the same using jQuery:
$("#myId").html();
$("#myId").attr("href");
If you are dynamically creating the <a>'s in the first place, you can also assign them an id at this point using newElement.setAttribute("id", "someNewId");.
So my website is built using a company's software called Inksoft which leaves me very little to work in the way of customization. So I have to do many workarounds.
Here is my site's homepage.
The header on top of the page only has two links right now. "Products" and "Design Studio". My goal is to add an "About Us" link and "Buyers Guide" to the header as well.
I cannot add new content to the header using Inksoft's backend. So I coded a workaround to replace the content of existing DIV's within the header to say and link to where I want them to go.
The only issue is, the responsive mobile-nav loses functionality when this is implemented. As seen here on this test page.
The test page has the About Us in the top header, added by the use of this code:
<script>
$("#header-nav-designs").html('<document.write="<li id="header-nav-studio"><font color="#000000">About Us</font></li>');
</script>
So, the simplified question is: how do I implement this code without losing the responsive functionality of the nav bar?
The jQuery .html function will replace the HTML inside the target element. If you want to just append the one value, you likely want to .append to the element.
In addition, you aren't setting the HTML to a valid html string. You probably just want to get rid of the <document.write=" at the beginning of the string. The rest of it looks fine with just a cursory glance.
So:
<script>
$("#header-nav-designs").append('<li id="header-nav-studio"><font color="#000000">About Us</font></li>');
</script>
Edit:
After looking at it a little more, it appears as though the $('#header-nav-designs') that you are selecting is already an <li> which means you need to either select the parent <ul> list or you can use the jquery .after function instead.
<script>
$("#header-nav-designs").after('<li id="header-nav-studio"><font color="#000000">About Us</font></li>');
</script>
And as someone else commented above, you are getting an error on the page. It appears as though you are trying to get an element with the id divID and the appending some html to it, but there is no element with the id divID and so you are getting an error saying that you can't read the property innerHTML of null as the call to document.getElementById is returning null (element not found).
Element id header-nav-designs witch your code is referring have CSS style on line 170:
#header-nav-designs {display:none;}
The element will be hidden, and the page will be displayed as if the element is not there. With display:none;
If I understand you correctly your code selector points to wrong element id. It should point $(".header-nav > ul"). Document.write is not needed inside jQuery you need to give only an valid html string as argument.
jQuery html function erase html that is all ready inside element and replace it with html string given as argument. You have to use append if you want to add more html but not remove what is allready in element.
$(".header-nav > ul").append('<li><font color="#000000">About Us</font></li>');
$(".header-nav > ul").append('<li><font color="#000000">Buyers Guide</font></li>');
I've read through a few posts here regarding this topic, but none seem to answer which method is the best for allowing sub-pages access to the host page's <script> section.
I load home.php, which has a menu displayed in one of its two <div> sections. The HTML for this menu is on home.php itself. The user is able to interact with buttons and dropdowns in the menu portion of home.php through scripts on home.php, like:
$("#graphsButton").click(function() {
if($(this).text()=="Graphs") {
$(this).html("<span><i class='fa fa-check-circle checked'></i> Graphs</span>");
graph = true;
} else {
$(this).html("<span>Graphs</span>");
graph = false;
}
});
After the user performs their initial operations, that larger menu is replaced by a smaller menu to provide the user more screen real-estate, using the following code:
function shrinkMenu() {
$('#search').html('');
$('#search').animate({
width: '4%'
}, 500);
$('#returnMain').animate({
width: '96%'
}, 500);
$('#search').load('smallMenu.php');
}
If the user wants the big menu back, on smallMenu.php I then have another <script> section with this code:
$('#growMenu').click(function () {
$('#search').html('');
$('#search').animate({
width: '20%'
}, 500);
$('#returnMain').animate({
width: '80%'
}, 500);
$('#search').load('largeMenu.php');
});
largeMenu.php contains a duplicate copy of the original HTML for the menu that loaded along with home.php, and visually, it looks exactly the same to the user.
As I toggle between large menu and small menu however, the <script> sections contained in home.php that pertain to the id tags in the original menu HTML that loaded with home.php no longer work.
In order to make it work, it seems that I would have to re-initialize all my plugins on each page load, and maintain 3 separate pages' <script> sections that are all duplicates of one another, and this seems very inefficient and probably not the best way to go about this.
Is there a better way for me to achieve the functionality I am trying to code here?
Update
My code looks like this at a high level:
<div class="searchParent" id="search">
<div class="return"></div>
<div class="menu">
<div class="largeMenu" id="largeMenu"></div>
</div>
</div>
What you are doing is fine by replacing the menu from a php file that contains a "partial view" which is your menu HTML. The partial view relies upon the parent page code, so you don't need to duplicate any code from the parent script into the partial view. The partial view can expect there is script code on the parent page it can be used with.
As I toggle between large menu and small menu however, the
sections contained in home.php that pertain to the id tags in the
original menu HTML that loaded with home.php no longer work.
The problem you are having though is that you need to ensure that the code on home.php that references these menus uses a parent container as its reference point instead of direct IDs. You are replacing elements (menus), so the bindings are lost when you do that unless you bind on a parent higher up the DOM that doesn't get replaced (remember that events bubble up).
From what I see in your code snippets, it looks like the menu is loaded into the #search container. So just ensure the code in home.php uses that container as the reference point, using something like on like this:
$('#search').on('click', '#graphsButton', function() {
// ...
});
I have a web site that exists on one page: index.html. There is a lot of content on the site (that appears to be on many "pages") but via javascript and CSS, all the info is contained on index.html.
So there exists a "home" position and an "inside" position (like a home page and inside page), and I need some links to behave differently when the user is on an inside page vs the home page. So the way I have it set up, once an "inside" link is clicked, I remove a class from a div that I think should cause the links within that div to behave differently. But they are not behaving as I expect.
The page, very dumbed down for this example, is here:
http://littleduck.com/ns_sample/index.html
On this example, there is just the home page and the "Services" page. You can link back and forth between them.
If you mouseover those grey links on the left (which are called "balloons" in the code), you will see that they have a hover color, and a popup graphic appears. I ONLY want this to happen when the page is in the "home" position. I have a class called "popup_yes" that allows this hover/popup action to happen. It appears when index.html is loaded, and if I remove it or change its name in the code, the hover/popup does not work. So I know that class is doing something. Now, I REMOVE that class when "Services" is clicked. I can see by inspecting the element in Chrome that "popup_yes" DOES in fact get removed. HOWEVER ... the hover/popup action still happens when you mouseover the balloons.
And when I inspect the element, even though you can see in the code that "popup_yes" is gone, it is still being utilized by Chrome. Here is a screenshot of what Inspect Element looks like on the "home" and "inside" pages:
http://i.stack.imgur.com/p1ZP7.jpg
So, please tell me where my brain is derailing. How can I get the hover/popup action to NOT WORK when I'm on the "Services" page? Thank you incredibly much for any help you can provide.
The issue is in your mouseover/out code
$(".popup_yes .balloon_1").mouseover(function() {
$("#popup_1").show(400);
$(".balloon_1").addClass("hover");
});
When the page loads, the mouseover event is binding to that span, so that action is already established, if you add the check in the function
$(".popup_yes .balloon_1").mouseover(function() {
if ($('#balloons').hasClass('popup_yes') ){ //<--here
$("#popup_1").show(400);
$(".balloon_1").addClass("hover");
}
});
it should work as expected
I have modified the javascript that you are using and could make it work. Here are the changes that i made.
First of all when u removed the class when the services page is clicked I specified the class to be removed.
$('#balloons').removeClass("popup_yes");
After this when you click back the Home page the class has to be added back so i included this line after you animate the $('#buttons') div.
$("#balloons").addClass("popup_yes");
Now comes the changing of the hover effect on each of the balloons. I'll show the change I did to the first balloon element you can reproduce the same for the others.
$(".balloon_1").mouseover(function() {
if($(this).closest('#balloons').attr("class")=="popup_yes"){
$("#popup_1").show(400);
$(".balloon_1").addClass("hover");
}
});
$(".balloon_1").mouseout(function() {
if($(this).closest('#balloons').attr("class")=="popup_yes"){
$("#popup_1").hide(400);
$(".balloon_1").removeClass("hover");
}
});
What I modified is instead of checking for both the class for hovering I just checked the balloon_1 class and then I made the effect only if the closest element to it with an id balloons has the class popup_yes.
I tried it in chrome. Hope it works well in other browsers as well.
First of all I would like to say that while this is the first time i post here these boards have helped me much.
With that said, I have got a strange issue regarding AJAX and scripts.
You see, in my web application i used custome JS context menus. Now each of them menus is implemented with specific features depending on the object and if the object exists.
E.x : if we got an upper menu place holder but no upper menu the context menu will have one option which is "add menu".
But say we already have the upper menu the context menu will have different options such as "edit menu" etc...
so far so good, however, say we have an upper menu place holder and no menu and then we added the menu (still no refresh on the page) i need to generate a new context menu and inject it right? so i do just that along with the new menu i just built.
all that code goes into the SAME div where the old context menu script and upper menu place holder were so basicaly they are overwriten.
Now the menu itself is in HTML so it overrides the current code the JS however acts wierd and will show now 2 context menus the old one and the new one even though i overwrite it's code.
I need to some how get rid of the old context menu script without refreshing the page.
Any ideas?
P.S
all the JS are dynamicaly generated if that makes any difference (i dont think it does.)
Well after some head breaking i figured it out..
(the problem not the solution yet) this is the ajax function right?
$.ajax({
type: "GET",
url: "../../../Tier1/EditZone/Generate.aspx?Item=contentholder&Script=true",
dataType: "html",
success: function (data) {
$('#CPH_Body_1_content_holder').html(data);
}
});
now they function uses a page with an event handler, that event handler reutnrs the data as followed response.write(answer) it just hit me that when you use response.write it sends the code after it's been compiled and ran in our case at page Generate.aspx.
so the script will run but not in the page i intended it to run and because of that i cannot overwrite it... how silly of me.
what i think ill do it return the data as an actualy string and then and only then inject the code into the container div.
ill let you folks know if that works out.
cheers and thanks for the advice these forums rock.
No matter what anyone says, do not use EVAL. It's evil and will give you memory issues if used more than a few times on a page.
See my soluition here: trying to call js code that is passed back from ajax call
Basically, create a div with the ID of "codeHolder" and voila. You'll basically want to pass your HTML and JS back to the AJAX receiver (separated by a separator), parse it on the JS side, display the HTML and put the JS Code in your javascriptCode variable.
//Somehow, get your HTML Code and JS Code into strings
var javascriptCode="function test(){.....}";
var htmlCode="<html>....</html>";
//HTML /////////////////////////////////////////
//Locate our HTML holder Div
var wndw=document.getElementById("display");
//Update visible HTML
wndw.innerHTML = htmlCode;
//Javascript ///////////////////////////////////
//Create a JSON Object to hold the new JS Code
var JSONCode=document.createElement("script");
JSONCode.setAttribute("type","text/javascript");
//Feed the JS Code string to the JSON Object
JSONCode.text=javascriptCode;
//Locate our code holder Div
var cell=document.getElementById("codeHolder");
//Remove all previous JS Code
if ( cell.hasChildNodes() )
while ( cell.childNodes.length >= 1 )
cell.removeChild( cell.firstChild );
//Add our new JS Code
cell.appendChild(JSONCode);
//Test Call///////////////////////////////////////
test();
This code will replace all previous JS code you might have put there with the new JS Code String.
Thanks for the replies.
Dutchie - that's exactly what I did. now the thing is the HTML is properly overwritten (I didn't use append I overwrote the entire div) and yes the javascript just keeps on caching...
I tried to disable browser cache and still the problem persists i get multiple context menu per item the more I ran the ajax function...
Jan,
My AJAX function builds a div tag and script tags and places them into another container div tag in the page.
What's suppose to happen is that every time the AJAX runs the code inside the container div is overwritten and you get an updated version.
the div inside the container div is overwritten yet the script tags somehow are cached into the memory and now each time the out jQuery function calls the context menu i get multiple menus...
I don't think code is needed but I will post it tomorrow.
Any ideas?