I've recently created a website with a menu-bar to the left. My next step is to update the right side of the page with content based on what option you choose on the in the menu. I know you can use iframe but I was wondering if there is an alternative to it, like a more dynamic one!
Most of the menu options are input-forms, I've read about ajax-calls to fill a div but couldn't find a good tutorial on how to achieve it.
edit:
Here's a sketch http://imageshack.us/photo/my-images/16/smlithis.png/
Consider using JQuery. Handling Ajax requests is so much easier than using ordinary JS.
Documentation for the ajax function: http://api.jquery.com/jQuery.ajax/
Using the success callback (the function that is executed upon success) you can fill in your div:
$.ajax({
url: 'ajax/test.html',
success: function(data) {
$('.result').html(data);
alert('Load was performed.');
}
});
Instead of .result, point the selector to your main div. The .html() function fills your div with data, which is the data returned from the ajax request.
Edit: It's 2018. Use the Fetch API.
You can use jQuery
This is how your menu button will look like:
<a href='#' onclick='return fillDiv(1)'>GoTo1</a>
<script>
function fillDiv(pageNum){
$("#id_of_div_to_load_to").load("some_page.php",{ 'pahe_num': pageNum } );
return false;
}
</script>
It is just one of many ways to do it.
Ajax can get data from a server but it cannot fill anything. Ajax is just javascript used to communicate with the server. Javascript can take that data and insert data and create elements to fill that div.
You mean something like this:
How to update div when on select change in jquery
If you actually want to get the data dynamically from another source that would be an entire different matter.
Related
I know that it is possible to send a user to a specific a name by using a link; however, for what I'm doing, I'd prefer not to use this link element.
Ex:
http://www.domain.com/link.php#aname
will send the user down to
<a name="aname">
Is there a method of doing this on page load, like perhaps adding a line of code to the body tag or something?
I'm using this in conjunction with PHP, so basically if a particular variable is defined, I will be sending them to the location. I know how to do the PHP side of it, just not the html side of it without the use of the link element.
Use the animate method from jquery to get a nice smoothe effect
$("#down").click(function () {
$('html,body').animate({
scrollTop: $("#b").offset().top
});
});
Example
Update: onload
$(document).ready(function () {
$('html,body').animate({
scrollTop: $("#b").offset().top
});
});
Cheers!!
Few Assumptions :
You know/declared the ID/NAME
You are sure that a NAME/ID exist
Recommendation :
Use Id along with the name.
Make sure you have unique Id for that part of page where you want to send the user to.
Add this simple javascript before the end of </body> tag OR after all ids are echo
<script type="text/javascript">window.location.hash=id;</script>
Please change id to your required id. Once the page load first the div with a declared id is created and when everything is complete the javascript will try to move the page to the specific part.
If you will use scrollto then it requires far more steps and is complicated. You will need to
measure the page height
measure the location of that id
scroll to that id if possible
Hope it works for you
I want to be able to have one image that loads into static html pages based on a conditional argument; so if X="something" then src="something.jpg", if X="another" then src="another.jpg" and so on.
I can't use a database.
So I am looking for some other technique or method that can use some kind of array and load one image from that array depending on something unique within the page.
I'm guessing that jQuery might do the job or maybe using XML/XSLT but I'm no programmer so any suggestions/guidelines/pointers will be gratefully received :)
If you are willing to use jQuery, you can add the image once the DOM finishes loading.
Add a div tag in your html
<div id="test"></div>
and add the image with your logic using JavaScript
$(document).ready(){
yourLogic = true;
if (yourLogic){
('#test').prepend('<img id="imgId" src="path.png" />')
}else{
('#test').prepend('<img id="imgId" src="someOtherPath.png" />')
}
}
I have an iframe and in order to access parent element I implemented following code:
window.parent.document.getElementById('parentPrice').innerHTML
How to get the same result using jquery?
UPDATE: Or how to access iFrame parent page using jquery?
To find in the parent of the iFrame use:
$('#parentPrice', window.parent.document).html();
The second parameter for the $() wrapper is the context in which to search. This defaults to document.
how to access iFrame parent page using jquery
window.parent.document.
jQuery is a library on top of JavaScript, not a complete replacement for it. You don't have to replace every last JavaScript expression with something involving $.
If you need to find the jQuery instance in the parent document (e.g., to call an utility function provided by a plug-in) use one of these syntaxes:
window.parent.$
window.parent.jQuery
Example:
window.parent.$.modal.close();
jQuery gets attached to the window object and that's what window.parent is.
You can access elements of parent window from within an iframe by using window.parent like this:
// using jquery
window.parent.$("#element_id");
Which is the same as:
// pure javascript
window.parent.document.getElementById("element_id");
And if you have more than one nested iframes and you want to access the topmost iframe, then you can use window.top like this:
// using jquery
window.top.$("#element_id");
Which is the same as:
// pure javascript
window.top.document.getElementById("element_id");
in parent window put :
<script>
function ifDoneChildFrame(val)
{
$('#parentPrice').html(val);
}
</script>
and in iframe src file put :
<script>window.parent.ifDoneChildFrame('Your value here');</script>
yeah it works for me as well.
Note : we need to use window.parent.document
$("button", window.parent.document).click(function()
{
alert("Functionality defined by def");
});
It's working for me with little twist.
In my case I have to populate value from POPUP JS to PARENT WINDOW form.
So I have used $('#ee_id',window.opener.document).val(eeID);
Excellent!!!
Might be a little late to the game here, but I just discovered this fantastic jQuery plugin https://github.com/mkdynamic/jquery-popupwindow. It basically uses an onUnload callback event, so it basically listens out for the closing of the child window, and will perform any necessary stuff at that point. SO there's really no need to write any JS in the child window to pass back to the parent.
There are multiple ways to do these.
I) Get main parent directly.
for exa. i want to replace my child page to iframe then
var link = '<%=Page.ResolveUrl("~/Home/SubscribeReport")%>';
top.location.replace(link);
here top.location gets parent directly.
II) get parent one by one,
var element = $('.iframe:visible', window.parent.document);
here if you have more then one iframe, then specify active or visible one.
you also can do like these for getting further parents,
var masterParent = element.parent().parent().parent()
III) get parent by Identifier.
var myWindow = window.top.$("#Identifier")
I have 6 different links,and each link is going to call a different Ajax function.
I'm using the <a href> tag because I want it to appear as a link....Can I use this tag to call the Ajax function? or it only works with URL links?
THANKS!
This is how I call mine. I give my elements a class name such as 'clickable' then use Jquery's click function as so.
$('.clickable').click(function() {
//do ajax
});
Then in the function, I get the id of the element as so. var id = this.id, this will get the unique id of the element.
After that I use the $.post method of Jquery, the shorthand version of ajax and complete whatever call you need to make when the user clicks that link using the id.
Of course, in my case I never use the anchor tag, I just make is a button or apply the . click to the element I wish to add the ajax call to, but you could just surround the "link" in a span or a div to simulate the same effect.
Hope this helps in some way or another.
Text
or even as they wrote, with jquery
Text
<script type="text/javascript">
$(document).load(function(){
$('#blabla').click(function(){
alert("Clicked");
});
});
</script>
Yes you can incorpore the link in the following way:
- on your link you can write ...
Here you can see further information about this topic:
What is the difference between the different methods of putting JavaScript code in an ?
You can extract the value of the href attribute and use it for your AJAX call...
(it is actually the proposed way to handle it..)
yes you can, if any client side script functions (javascript or jquery) applied than it will execute first.
Using mootools.js 1.3.2 and mootools-more.js
As far as I can tell this is supposed to reveal the div and also hide the content and linkTab divs at the same time.
$('blogLink').addEvent('click', function(){
$('homeLink').removeClass('active');
$('linkTab').removeClass('active');
$('blogLink').addClass('active');
content.slideOut();
linkTab.slideOut();
blogLink.slideIn();
});
This is the HTML
Blog
<div id="blogContent">
content here
</div>
It all works properly and that's OK but in addition to this, I also want to be able to give people a URL like http://mysite.com/#blogLink and have that blogContent div opened. When I do that now, it takes me to the top of the page and the blogContent div is hidden.
How do I do achieve that? I did try adding the mootools-smoothscroll.js and using the method outlined here http://davidwalsh.name/smooth-scroll-mootools but that just broke the entire page - would not load properly.
I have zero experience with mootools and weak on Javascript so please excuse me if I take a while to 'get' what you're trying to explain.
Many thanks.
First, are you particularly attached to MooTools? If you're a JavaScript newbie, jQuery is probably easier to use and definitely has a larger support community. But I'll post a solution that should work in MooTools for now:
If I understand you correctly, what you want to achieve is the following:
The anonymous function you posted will run when "Blog" is clicked
The function will also run if someone visits the page with #blogLink in the URL.
That's not too difficult to achieve:
// Once the DOM has loaded - so that our elements are definitely available
window.addEvent('domready', function() {
// Check for #blogLink hashtag, and reveal blog
if(window.location.hash == 'blogLink') { revealBlog(); }
// Make sure blog is revealed when link is clicked
$('blogLink').addEvent('click', revealBlog);
});
function revealBlog() {
$('homeLink').removeClass('active');
$('linkTab').removeClass('active');
$('blogLink').addClass('active');
content.slideOut();
linkTab.slideOut();
blogLink.slideIn();
}
You could also change your link mark-up to:
Blog
To make sure they're always on the correct link when the blog is revealed.