We Keep Coding

How to load a html page from href into a div by clicking a Li inside a menu?

i have a ul menu
<ul>
<li>
rules
</li>
<li>
Service
</li>
</ul>
and i want when the user press on a tag the html page load on <div id=result> that i have in bottom of this page.
i try that with jquery as i found but the html in href load on new tab there is my code:
<script src="http://code.jquery.com/jquery-1.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(funtction(){
$("#rules").click(function()
$('#result').load(rules.html);
});
$("#service").click(function(){
$('#result').load(service.html);
})
});
</script>

Read up .load() | jQuery API Documentation
You need to pass the paths of HTML files as string.
Replace
$('#result').load(rules.html);
with
$('#result').load('../folder/rules.html');
EDIT:
In response to your comment, try this:
$("#rules").click(function(event)
$('#result').load('../folder/rules.html');
event.preventDefault(); // so that the event does not bubble up
});

How to run javascript code on menu click

I'm creating a squarespace website in which I have a navigation bar.
I would like to add a javascript code as a link in the navigation bar.
The javascript code is the following:
<div>
<script type="text/javascript" src="https://app.ecwid.com/script.js?4549118"></script>
<script type="text/javascript"> xMinicart("style=","layout=Mini"); </script>
</div>
I have the following html code: (I got it with FireBug)
<nav id="main-navigation">
<ul class="cf">
<li class=" active-link">
page1
</li>
<li class="">
page2
</li>
</ul>
</nav>
I cannot edit the code above but I'm able to inject header code.
So, how can I add the javascript code as a third link in the navigation bar?
Thanks a lot!
edit
So I've added the following code
<script>
window.onload=function(){
$('nav ul').append('<li><a onClick="test()" href="javascript:void(0);">Link 3</a></li>');
}
</script>
but I need the original javascript code within the append. I need the actual code to be the link. How do I do that? If you see the javascript in Firefox you'll understand what I mean. I need the actual link it generates in the navigation bar.
Thanks!

window.onload=function(){
$('nav ul').append('<li><a onClick="yourFunction()" href="javascript:void(0);">Link 3</a></li>');
}
Since you specify you don't have direct access to the html. Only the header.
This will add your menu item with a link, that upon click, executes the function yourFunction(). It will add this item as soon as the page loads.
Note: You need jQuery for the above. But it is also possible with raw Js.

Loading HTML in <div> before .ready

At first I'm using JQuery Mobile. I have already investigated about loading HTML inside a div but I having some problems.
The main idea is that I have 3 differents menus (which are lists) and each one stored in a HTML file generated by the server. /Menu1.html, /Menu2.html, /Menu3.html. It has to be this way because menus could change dynamically.
So, the menus looks like this:
<ul>
<il><a href="whatever1> Option1 </a></li>
<ul>
<il><a href="whatever1> Option1.1 </a></li>
</ul>
<il><a href="whatever2> Option2 </a></li>
</ul>
I'm doing it this way:
<div id="menuview">
</div>
<script type="text/javascript">
$("#menuview").load("data/menu1.html");
</script>
And it is loading the list, right, but without css. So What I'm seeing is just the list and not a JQM linked list view like the demo here: http://demos.jquerymobile.com/1.4.0/listview/
If I copy the menu1.html inside the div manually it works perfectly.
I'm not just asking for a solution, maybe is there any better way to do this and I don't know it.
Thanks in advance!

When adding any items dynamically, you need to initialize them manually.
Inside each menu you have, add initialization function.
<ul>
<!-- elements -->
<script>
$(function () {
$("ul").listview();
});
</script>
</ul>
Note that nested listview is removed from jQM 1.4.
To create a nested listview, check this official demo.

write html when a href is clicked

In an unordered list i have some a's with some href's. When clicked I want some html from an external file written. I cannot use any server side languages since it only gonna be running localy.
The structure of my file is:
<body>
<ul>
<li><a href="#">item1</li>
<li><a href="#">item2</li>
<li><a href="#">item3</li>
<li><a href="#">item4</li>
</ul>
<div id="content">
<!-- when a link is clicked write some html from external file to this spot-->
</div>
</body>
</html>
Thanks in advance

Since it looks like you're trying to load a script, there's a better way to do that, by using jQuery.getScript():
$('#triangle').click(function() {
$.getScript("js/triangle.js");
});
Also, as arieljuod points out, you haven't actually loaded jQuery in your HTML file. You'll need to do that to use it:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
(Or pick your favorite jQuery version and CDN; this is one of many.)

You don't want document.write().
You probably want this instead, depending on where you want the new HTML to go:
$('head').append('<script src="js/square.js"></script>');

You can listen for a click on an item and based on that trigger an ajax call for the appropriate file. Load the contents of that file into your content div within the success callback.
Happy to walk you through sample code live over here: https://sudonow.com/session/525cb34035e089113700000a
Pasting the content of the code editor here:
<body>
<ul>
<li id="item1" class="item"><a href="#">item1</li>
<li id="item3" class="item"><a href="#">item2</li>
<li id="item4" class="item"><a href="#">item3</li>
<li id="item5" class="item"><a href="#">item4</li>
</ul>
<div id="content">
<!-- when a link is clicked write some html from external file to this spot-->
</div>
</body>
</html>
//JS
//convert some file content to html
var genHtmlContent = function(content){
//do something here depending on how data is stored e.g. we could just return an html string from some keyvalue json
return content.htmlContent;
}
//Use javascript to detect a click on a list item and grab the appropriate content
$("item").click(function(event){
var selectedId = event.target.id;
var url = "http://www.mysite.com/" + selectedId + ".json";
$.get(url, function(content) {
var htmlContent = genHtmlContent(content);
$("#content").val(htmlContent);
})
})
//sample json file on server
//item1.json
{htmlContent: "<div>I am Item 1</div>"}

A quick and easy solution will be an iframe. Add as many iframes as you want, each having a different url. Give them a common class and hide them using CSS or jQuery. On clicking a link, prevent default and show the corresponding iframe, like;
<ul>
<li><a href="#" id="item1">item1</li>
</ul>
<div id="content">
<iframe class="iframes" id="iframe1" src="http://www.page1.com"></iframe>
</div>
and in your JavaScript, add this;
$('.iframes').hide();
$('#item1').click(function() {
event.preventDefault();
$('#iframe1').show();
});

Changing the div content with a link in an div which leads to an externa

I have a task to solve and I am quite new in js and stuff, so please help me out on this.
I've got this in php(I use php cause I need to use databases as well):
What I want is to put external html contents in the container without reloading the whole page. Lets call the external contents link1.html;link2.html...
When load the page I want the container with the content of link1.html whick is also available and can be recalled by clicking link1.
I tried jquery and stuff but it was not really work for me. I'd like to use external js or ajax or jquery or something like that.
Please help!!!
Thank you in advance for everyone!
<div id="links">
<ul>
<li id="link1">link1</li>
<li id="link2">link1</li>
<li id="link3">link1</li>
<li id="link4">link1</li>
</ul>
</div>
<div id="container"></div>

You can use load(), $.get() or $.ajax for loading stuff, an example:
<div id="links">
<ul>
<li id="link1"><a href='path'>link1</a></li>
...
</ul>
</div>
$('#links a').on('click', function(event) {
event.preventDefault();
$('#container').load(this.href);
});