Develop Reference

What happens when a script is called immediately below a div tag?

I have just distilled my problem to as simple as this
<div id="case-schedule">
<ul data-role="listview" data-inset="true" data-divider-theme="d">
<li data-role="list-divider">Mail</li>
<li>Inbox</li>
<li>Outbox</li>
<li data-role="list-divider">Contacts</li>
<li>Friends</li>
<li>Work</li>
</ul>
</div>
<script>
function case-shedule() {
}
</script>
When i remove function definition content is loading properly. however when i try to include a function
(just an empty one) i am not getting jquery mobile "look and feel".
whats happening when a script is called immediately below a div tag? does that exclude the other Js files? included?

the function name is invalid... most likely causing the js in the page to fail. Valid variable (and function) names don't include the 'minus' character.
Try:
function caseshedule(){
}

calling an external script and .load jquery conflict

I'm pretty sure this is another DOH! facepalm questions but as designer and not a programmer I need some help getting it right.
What I have is an index file calling local .html files via jQuery .load. Just like this:
(some tabs functionality not relative here - thus the link target call)
Lightbox</li>
<div id=lightbox">
<div class="load">
<script type="text/javascript">
$('.load').load('examples/lightbox.html');
</script>
</div>
</div>
I also have an external .js file that has a bunch of functions that handles some lightboxes among other things. Standard <script src="js/typography.js" type="text/javascript"></script>
Which contains:
$(document).ready(function(){
$(".open-lightbox").on("click", function(){
$('.lightbox').css('display','block');
});
$('.close-lightbox').click(function(){
$('.lightbox').css('display','none');
});
});
My problem is that if the externally called .html file has any elements dependent on the .js file ie. the lightbox popup it doesn't work.
something like :
LightBox Link
<div class="lightbox">
lightbox content
Close
</div>
If i move the html code right to the index page instead of the .load, no problem, same if I moved the JS as an inline <script>...</script> rather than calling it extrenally. Works fine in both cases.
My spidey sense tells me this has something to do with my function and .load not executing in the order I need them to, but my javascript copy/paste skills only go this far.
Can anyone tell me if I can make this combination work? I'd really appreciate it.
EDIT
Maybe I explained my self poorly so let me try and post a better example.
If my index code is as followed everything works: My lightbox pops up as intended.
<li>Link to open Tab Content</li>
<div id="thistabid">
<--Tab Content below-->
<div class="somehtmlpage-load">
LightBox Link
<div class="lightbox">
lightbox content
Close
</div>
</div>
<--End Tab Content-->
</div>
When the said tab is clicked the content inside "thistabid" show up. Whatever that content may be.
Now if i do :
<li>Link to open Tab Content</li>
<div id="thistabid">
<--Tab Content below-->
<div class="somehtmlpage-load">
<script type="text/javascript">
$('.somehtmlpage-load').load('examples/lightbox.html');
</script>
</div>
<--End Tab Content-->
</div>
The lightbox doesn't work. The content of lightbox.html is
LightBox Link
<div class="lightbox">
lightbox content
Close
</div>
Same as the html in the 1st example where everything works. The only difference it's being jQuery loaded rather than hard coded.
What I mean by "if the externally called .html file has any elements dependent on the .js file ie. the lightbox popup" is that if the html is part of the externally called file then the lightbox function isn't working. If it's hard coded it pops up like intended.
On 1st glance the .on seems like should be the solution but most likley my implementation of it is off the mark :/

The 'on' or the 'live' function needs to be applied through an element that exists on the page. Generally some parent of the actual element is used. Can you try something on the following lines with the correct references to the elements on your page:
<li>Link to open Tab Content</li>
<div id="thistabid">
<--Tab Content below-->
<div class="somehtmlpage-load">
<!--leave tab empty for now -->
</div>
<--End Tab Content-->
</div>
<script>
(function(){
$('.somehtmlpage-load').load('examples/lightbox.html');
//live or on needs to be applied to an element that exists on th page
$('#thistabid').on('click', '.open-lightbox', function(){
$('.lightbox').css('display','block');
});
$('#thistabid').on('click', '.close-lightbox', function(){
$('.lightbox').css('display','none');
});
})();
</script>

There seems to be a race condition between your load() and document ready.
To address this you'll need to:
either wait for the load() to complete before you attach the click events
or attach the click to the container of your load() step and use event delegation.
See this page and this other one for more information on how to use on() for delegation.
The code would look like this:
$(".somehtmlpage-load").on("click", ".open-lightbox", function(){
$('.lightbox').css('display','block');
});

Using a SSI solved my problem. I was trying to keep it all Local Drive friendly but it seemed to be causing more problems than anticipated.
Pick your favorite dev environment...I didn't run into any conflicts on either.
ASP - <!--#include file = "examples/lightbox.html" -->
PHP - <?php include 'examples/lightbox.html';?>
Just in case someone else runs into a similar problem.

javascript append method anchor link is not working in jquery mobile

Anchor link is not working with append method i also use link data-ajax="false" please let me know?
$('#serviceContainer').append('<li data-role="list-divider" role="heading">'+trimText(events.event_title,30)+'</li>'+
'<li data-theme="d" class="li_list">'+'<div data-role="content"><a data-ajax="false" data-transition="slide" href="detail.htm?eid='+events.event_id+'">Details</a></div></li>').trigger("create");

If I were you, I would consider using a template to reduce the complexity of your code and make it far easier to work with. There are many templating solutions out there, even a jQuery one.
It's fairly straight forward. You start by providing your template within a script tag:
<script id="itemTemplate" type="text/x-jquery-tmpl">
<li data-role="list-divider" role="heading">
<img src="${img}" />
<div data-role="content">
<a data-ajax="false" data-transition="slide" href="${href}">
Details
</a>
</div>
</li>
</script>
Here I've indicated that I would like to provide an image, and an href value for my template when and if I decide to use it.
Within my jQuery code, I can grab this template and name it:
var itemtmpl = $( "#itemTemplate" ).template();
Lastly, when I'd like to use this I just provide it an object literal that has all of the placeholder values:
$.tmpl( itemtmpl , { img: "mainImage.jpg", href: "main.html" } )
.appendTo( "#mylist" );​​​​​​​​​​​​​​​​​​​​
Note how friendly this is compared to your initial approach.
Demo: http://jsfiddle.net/2k2HQ/

jquery load() specific div not working

Here is the portion of HTML in question as well Javascript related to it:
HTML first:
<div id="menu">
<ul>
<li>click</li>
</ul>
</div>
Javascript goes:
$("#menu a").click(function(){
var link=encodeURI($(this).attr("href"));
$("#divtobeloadedwith").load(link);
return false;
});
content.html structure:
<div id="wrapper">
<div id="diviwant">stuff</div>
<div id="dividontwant">stuff</div>
</div>
Upon clicking on link it loads all the content instead only specific div.

Fundamentally the problem is that you want two different things:
When running without Javascript, you want to use the link content.html#diviwant, as that will load the page content.html and then jump to the element with the ID diviwant.
When running with Javascript, you want to pass content.html #diviwant to jQuery's load() method, as that tells jQuery to load only the fragment with the id diviwant from the target page.
I'd probably use content.html#diviwant as the link, as you've got, then interpret that in the jQuery like this:
$("#divtobeloadedwith").load(link.replace('#', ' #'));
...to add the necessary space for the load().

You need to remove the space between content.html and #diviwant in the href of your link.
<li>click</li>
You also need to make sure that "divtobeloaded" exists.
<div id="menu">
<ul>
<li>click</li>
</ul>
</div>
<div id="divtobeloaded"></div>

simple ajax span question

<span name = "menu">
<!-- javascript here -->
<!-- content called via ajax -->
</span>
<span name = "content">
<!-- content called via ajax -->
<!-- changed by buttons from the menu-->
</span>
Does anyone know how to display contents in the content span using ajax generated menu from the menu span? If I'm not wrong, selecting a span can only happen within the same span. Is there something like parentpage.span like mysql?

If I've understood your question correctly, you can access the span as you have it currently using document.getElementsByName("content"). However, it would probably be easier to give the span an id, then do something like this in your AJAX success function:
document.getElementById("spanID").innerHTML = ajaxResponse.responseText;

It's a better idea to give those span's ID that you can hook into:
<span name="menu" id="menu">
<!-- Content called via Ajax -->
</span>
Then you could use
var div = document.getElementById('menu');
alert(div.name);
I would suggest against having JS code run inside the element because IE can puke all over that.