I have a page on my website that I am making a call to using a jQuery ajax call. It loads in a div. But whenever I the page is loaded, it loses the snytax highlighting that it should be displaying. Ex:
<html>
<head>
<!-- syntax highlighting script -->
<script type="text/javascript" src="syntaxhighlighter.js"></script>
</head>
<body>
<!-- div that displays ajax page cal -->
<div id="awesomeo">
</div>
</body>
</html>
It works on the initial page load if I have something in awesomeo but if a page is loaded via AJAX into the div, the syntax disappears.
EDIT:
The following is the code that is in the header:
<script type="text/javascript" src="/scripts/shCore.js"></script>
<script type="text/javascript" src="/scripts/shBrushBash.js"></script>
<script type="text/javascript" src="/scripts/shBrushCpp.js"></script>
<script type="text/javascript" src="/scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="/scripts/shBrushJava.js"></script>
<script type="text/javascript" src="/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="/scripts/shBrushPlain.js"></script>
<link type="text/css" rel="stylesheet" href="/styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="/styles/shThemeDefault.css"/>
<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = '/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
This is from: http://alexgorbatchev.com/wiki/SyntaxHighlighter
That is all that is used for syntax highlighting... Suggestions?
Figured it out:
Adding
<script type="text/javascript">
SyntaxHighlighter.highlight();
</script>
on the page being called works.
your syntaxhighlighter probably has a function bound to document.onload. You'll need to find that function and call it again.
How is your syntax highlighting function called? If the syntax highlighting is fired on a body onload() event, it will obviously not work after an AJAX call because the body is already loaded.
When you receive the ajax response, write this code there too to re-style the code.
// your ajax respone code here and after that:
SyntaxHighlighter.config.clipboardSwf = '/scripts/clipboard.swf';
SyntaxHighlighter.all();
Related
I have one line of JavaScript;
alert('test');
It's included through the following HTML:
<html>
<head>
<script type="text/javascript" src="code.jquery.com/jquery-latest.min.js"></script>;
<script type="text/javascript" src="test.js"></script>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<script type="text/javascript" src="test.js"></script>
</body>
</html>
It fires the alert box twice. All browsers.
Why?
Is this normal?
Please!
More code is needed to be sure (always list the full example) but while using Google Chrome try placing debugger; before your alert('test'); call and you will be able to compare the call stacks from the first and second passes through the code. This should be enough information to help you figure out why.
You import the same script twice in your HTML, thus running it twice. Remove one of the two script tags and you should be groovy.
<html>
<head>
<script type="text/javascript" src="code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="test.js"></script>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
</body>
</html>
On a separate note - you don't need that semi-colon after the jQuery import.
I am attempting to add some simple jQuery through an external file. I would like the code to remain in the external .js file. I'm using Dropbox so I can test my site locally, and I am almost certain JavaScript works through this method, but I don't know about the jQuery library. I can't seem to get any feedback through trial and error. Here is the simple form of the code I'm attempting.
The HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel='stylesheet' type='text/css' href='style.css'/>
<script type="text/javascript" src="functions.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
</head>
<body>
<div id='container'>
<div class='menu'>
<h2>Title of menu/h2>
</div>
<div class='panel'>
<p>
Some text here
</p>
</div>
</div>
</body
This is the entire .js file so far. Does this need to be defined as a function and then added into the HTML? Is it a scope issue?
$(document).ready(function(){
$('.menu').click(function(){
$('.panel').slideToggle('slow')
})
})
You load your file before the library your file is using. Change the two <script> lines so that jQuery is loaded first:
Change
<script type="text/javascript" src="functions.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
to
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="functions.js" ></script>
You need to add your code after the jQuery inclusion..
So swap these lines
<script type="text/javascript" src="functions.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
to
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="functions.js" ></script>
That is because your code uses jQuery, so you need to load jQuery before you can use the $.
I am trying to setup bootstrap-calendar, but I am having some difficulties. I used the command
$ bower install bootstrap-calendar
to download the dependences and I created a test index file which looks like this:
<html>
<head>
<title>calendar test</title>
<script type="text/javascript" src="bower_components/bootstrap-calendar/js/language/en-GB.js"></script>
<script type="text/javascript" src="bower_components/bootstrap-calendar/js/calendar.js"></script>
<script type="text/javascript" src="bower_components/bootstrap/docs/assets/js/bootstrap.js"></script>
<script type="text/javascript" src="bower_components/jquery/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/moment/moment.js"></script>
<script type="text/javascript" src="bower_components/underscore/underscore-min.js"></script>
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap-calendar/css/calendar.css">
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/docs/assets/css/bootstrap.css">
<script type="text/javascript">
var calendar = $('#calendar').calendar();
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
Opening index.html with a browser, gives an empty page. Any idea why?
Thanks in advance
It is possible that simply the order which you include your scripts is wrong. I usually put jQuery on top (considering most things are dependent upon it, it will need to be loaded first) then bootstrap.js below it, then underscore, so on and so forth. Scripts should also be included at the end of the body for speed, although it could also be possible that your scripts are running in the head before the dom is loaded, and #calendar is not found simply because it's not there yet. Try those things, good luck!
Weired because it shouldn't matter how things done in Server side.
Master Page:
<head runat="server>
<script src="jquery/jquery-2.0.2.min.js" type="text/javascript"></script>
<asp:ContentPlaceHolder ID="PageHeadPlaceHolder" runat="server">
</asp:ContentPlaceHolder>
</head>
Content Page:
<asp:Content ContentPlaceHolderID="PageHeadPlaceHolder" Runat="Server">
<link href="prettyPhoto315/css/prettyPhoto.css" type="text/css" rel="stylesheet" />
<script src="prettyPhoto315/js/jquery.prettyPhoto.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("a[rel^='prettyPhoto']").prettyPhoto({
});
});
</script>
</asp:Content>
though client finds jquery-2.0.2.min.js it fails to execute $(document).ready...
saying '$ reference is not defined'.
I Tried:
when i move the <script src="jquery/jquery-2.0.2.min.js" type="text/javascript"></script> to the content page... everything works right.
using <script src="~/jquery/jquery-2.0.2.min.js" type="text/javascript"></script>
the script is not found at all.
same happens if i move a <link href="prettyPhoto315/css/prettyPhoto.css" type="text/css" rel="stylesheet" /> to the master page, the page does not show the specific style sheet.
when checking the output HTML, it all seem correct in the right order.
i uploaded the output HTML to http://pastebin.com/ULi228BF
please help asap. thanks.
Do it declaratively in the master page by dragging the jQuery files from Solution Explorer window to the code view of the mark-up. Then see if it works and compare the two versions of the paths.
GOT IT! OMG KNEW it is something that shouldn't matter
IrishChieftain post got me to test the pages again, and found the problem!
Apperantly the jquery.magnifier.js library i used is incompatible with jQuery 1.6+
are is breaking jQuery script for some reason overriding
therefore:
<script src="jquery/jquery-2.0.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="windowfiles/dhtmlwindow.js"></script>
<script type="text/javascript" src="jquery.magnifier.js"></script>
<script type="text/javascript"> $(document).ready(); </script>
wont work...
while:
<script src="jquery/jquery-1.3.6.min.js" type="text/javascript"></script>
<script type="text/javascript" src="windowfiles/dhtmlwindow.js"></script>
<script type="text/javascript" src="jquery.magnifier.js"></script>
<script src="jquery/jquery-2.0.2.min.js" type="text/javascript"></script>
<script type="text/javascript"> $(document).ready(); </script>
does!
hope someone can make use of this info.
and thanks for the help.
I have an h2 element with an id of title and I have the following script:
<script type="text/javascript">
$(document).ready(function(){
$("#title").css("background-color","red");
)};
</script>
The background-color is not changing though and I can't figure out why?
<html>
<head>
<title>Table Sorter</title>
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.tablsorter.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#title").css("background-color","red");
)};
</script>
</head>
<body>
<h2 id="title">Table Sorter</h2>
</body>
</html>
<script type="text/javascript">
$(document).ready(function()
{
$("#title").css("background-color","red");
$("#myTable").tablesorter();
}
);
</script>
Replace
<link type="text/javascript" src="/js/jquery-1.3.2.min.js"/>
with
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
You also have a syntax error in your jQuery function at the closing brackets. They should be
$(document).ready(function(){
$("#title").css("background-color","red");
});
If that still does not fix your problem, then put an alert in there like this...
$(document).ready(function(){
alert("Howdy!");
});
If you do not see the alert message, then your jQuery script is not loaded, which means the relative path in the SRC attribute is incorrect.
It seems you've made another typo:
<title>Table Sorter</table>
^^^^^
Replace table with title:
<title>Table Sorter</title>
Can you get it working without jQuery? Try:
document.getElementById("title").style.backgroundColor = "#F00";
instead of your current script. If this does not work, check that you have well-formed HTML.
UPDATE: now that you've posted your HTML, I can see that you need to use a script tag instead of a link tag to import jQuery
Replace
<link type="text/javascript" src="/js/jquery-1.3.2.min.js"/>
with
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"/>
Here you go. Other people have pointed out some small problems you had, such as using a link tag where you need a script tag, etc. This code works for me:
<html>
<head>
<title>Table Sorter</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#title").css("background-color","red");
});
</script>
</head>
<body>
<h2 id="title">Table Sorter</h2>
</body>
</html>
It looks like there was a typo in your code at the end of your $(document).ready section where you had )}; instead of });. If you use Firefox you can open up the error console and view any Javascript errors or warnings.
Ok, I figured it out and I don't know why it is was happening. Below the JQuery script tag, I had another script tag:
<script type="text/javascript" src="/js/jquery.tablsorter.min.js"/>
When I removed the above, it worked. But I don't know why?