jQuery load() can not work with syntaxhighlighter - javascript

I use syntaxhighlighter in my page and it works well.
<pre id="code" class="brush:js">
some code here
</pre>
But it doesn't work when I save to a html file then use jquery load function to load them.
$(function(){
$("#code").load("test.html");
});
Everything is displayed well except the code scope. Could some one tell me why? Thx!
I figured it out, the solution is:
$(function(){
$("#code").load("test.html", function(){
SyntaxHighlighter.highlight();
});
});

Change #test into #code:
$(function(){
$("#code").load("test.html");
});

You will probably have to run this code to initialize the syntax highlighter after you have dynamically loaded your code.
SyntaxHighlighter.all()
this could probably be done by the following
$(function(){
$("#code").load("test.html", function() {
SyntaxHighlighter.all();
});
});

Related

jQuery $(document).on() not working properly

My service, in general, uses jQuery 1.7.2.
I'm trying to handle an event in a jsp using:
$(document).on("xyzEvent", function(){
console.log("xyzEvent completed");
//some more code
});
There is no output.
But if I explicitly include jQuery version in my jsp
<script type="text/javascript" src="abc.com/ajax/libs/jquery/1.7.2/jquery.min.js">
the above code also starts working. What could be the possible cause?
jQuery(document).ready(function(){
jQuery('body').on("click", function(){
console.log("xyzEvent completed");
//some more code
});
});
https://jsfiddle.net/7xd14gb7/
it is not advisible to register an event on document, try 'body' instead

toggle two images on click

I'm trying to use someone's code from an earlier post that I posted on here, and in it, he provided a jsFiddle that shows how to toggle between two images.
I'm trying to replicate exactly what that person is doing, but it doesn't seem to work on my code:
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$('#ellomatey').toggle(
function(){
$(this).attr('src', 'bgimage.png');
},
function(){
$(this).attr('src', 'redsquare.png');
});​
</script>
</head>
<body>
<img id="ellomatey" src="bgimage.png" />
</body>
</html>
Does anyone know what I'm doing wrong? I have a feeling that it's not calling the function correctly, but it seems to work on that person's example.
The other two answers talk about the actual problem, but they don't tell you how you get to discover that, this is where debugging comes into play.
console.log("before");
$('#ellomatey').toggle(
function(){
console.log("bgimage"); $(this).attr('src', 'bgimage.png');
},
function(){
console.log("redsquare"); $(this).attr('src', 'redsquare.png');
});​
console.log("after");
If you do this, you'll notice "before" and "after" in your console. That's okay. But when clicking on the image, you would expect the other console logs, which means that the toggle function isn't doing what you thought it would do.
You can somewhat suppose the heavily used function to work properly, so there must be something up with the selector. Let's inspect that.
console.log($('#ellomatey'));
Heh, what?! No elements.
And then you start to think why and then you'll discover you need to wait till the DOM loaded; supposing you would have some underlying background in how a webpage loads, which is a prerequisite for what you're doing.
Wrapping
$(document).ready(function() { ... });
around it does exactly that.
All it takes is a little understanding and some simple debug output...
Don't just mindlessly code supposing it'll work, but verify your assumptions while you do it.
You need to wrap your code in a document.ready call. The way you have it the code will try to run before the actual content of the page has loaded.
<script>
$(document).ready(function() {
$('#ellomatey').toggle(
function(){
$(this).attr('src', 'bgimage.png');
},
function(){
$(this).attr('src', 'redsquare.png');
});​
});
</script>
You're defining your toggle function for an element that doesn't exist yet in the document, so you should wrap the js code on window.load handler (assuming you want to wait the complete image load) or at document.ready event
I created a flexible toggle script:
jsBin demo
put the second image url inside an data attribute for your image:
<img id="ellomatey" src="img_1.jpg" data-src="img_2.jpg" />
and on click just call the 'swap' function!
$(function(){ // BTW, you were just missing this 'ready' function :)
function swap(){
var mem = this.src;
this.src = $(this).data('src');
$(this).data('src',mem);
}
$('#ellomatey').click( swap );
});
This snippet can also handle multiple elements by just nesting your elements:
$('#ellomatey, .button, #something').click( swap );
(Added also in the demo a pure JS version. Have fun!)

Execute jQuery Popup When Page Loads?

I'm using the Reveal modal plugin by Zurb.
http://www.zurb.com/playground/reveal-modal-plugin
Does anybody know how I can get the modal to execute (as in open the popup box) when my page has finished loading as opposed to when the handler is clicked?
I'd like to use it to display a simple message each time somebody opens my homepage.
I've dug through the code and tried a few things, but I'm a self confessed jQuery noob.
I was going to post the entire contents of the jQuery plugin itself, but it might just be easier to download it and take a look for yourself.
Thanks!
:)
$(function() {
$('#myModal').reveal();
});
OR
$(document).ready(function() {
$('#myModal').reveal();
});
Couldn't you just do the following after you instantiate your modal:
$(document).ready(function() {
// instantiate modal first
$('#myModal').reveal();
});
Something like this should work:
<script type="text/javascript">
$(document).ready(function() {
$('#myModal').reveal();
});
</script>
Hey had trouble getting this to work on a page using other .js libraries where JQuery NoConflict was being used -- in that case try this:
jQuery(document).ready(function($) {
$('#myModal').reveal();
});

Dropdownlist change event not working in IE9

I have this piece of code, that just refuses to co-operate, I've tried to look over the syntax, tried .change, .click events, nothing works, I am trying to alert the user, if the function works, nothing.
Heres the Javascript code:
$('#ProductNamesList').change(function () {
alert('JQuery works!');
});
And the HTMLHelper that generates the drop down list
#Html.DropDownList("ProductNamesList", New SelectList(Model.ProductList))
Can someone please help? I can't test it in other browsers, due to our requirements here -.-
For the record, I am using jquery-1.6.4.js and jquery-ui-1.8.16.js
Try this
$(document).ready(function() {
$('#ProductNamesList').live('change', function (event) {
alert('JQuery works!');
});
});
Looking at your live demo, it seems the problem is with the use of name="#sel". The correct notation is id="sel".
If you insist on use of name attribute, use jQuery selector [name="sel"]. Also note that the hash sign is redundant in attribute value.
I don't see anything wrong with it, the following worked for me in Firefox and IE8 (don't have IE9 available here).
#Html.DropDownList("ProductNamesList", new SelectList(Model.ProductList))
<script type="text/javascript">
$('#ProductNamesList').change(function () {
alert('JQuery works!');
});
</script>
Is the masterpage hooked up properly, and the reference to jquery correct?
I have tried the following code and it works.
<form action="">
<select id="sel">
<option>AUDI</option>
<option>Axel</option>
<option>BCS</option>
<option>BIBO</option>
</select>
</form>
<p id=result>
And the javascript:
$(document).ready(function() {
$("#sel").change(function () {
alert("JQuery works!");
});
});
When I try it at your live demo, I am getting error $ is not defined. I have created a jsfiddle which also works fine.
http://jsfiddle.net/rtFUs/
So all you have to do is to make sure that you are adding jquery correctly and the id of the select box is "mySelectBoxId" and you reference it using #, for example $("#mySelectBoxId"), that's it.

Any ideas as to why this jQuery does not work?

I have an HTML page where a click event is captured and hides #testContent. I put the HTML and Javascript in a jsFiddle here: http://jsfiddle.net/chromedude/VSXY7/1/ . For some reason in the actual page the .click() does not work, but in the jsFiddle works. Does anybody have a clue why this would be?
I have ensured that the jQuery and Javascript file were both correctly attached and show up in the Webkit Inspect and Firebug. I am not getting console errors either. It's quite confusing.
UPDATE:
You can check out the actual page here: http://blankit.co.cc/test/77/
It looks like your javascript is not loaded correctly.
<script type="text/javascript" src="../../includes/jquery.js"></script><script type="text/javascript" src="../../includes/navbar.js"></script><script type="text/javasript" src="../../includes/study.js"></script>
You can put some alert() function inside your javascript file to make sure it is loaded correctly.
Your script tag has a typo in the type change it to text/javascript you are missing a letter.
Change study.js from
$(function(){
console.log('hello');
alert('hello');
/*var testContent = $('#testContent').val();
var contentArray = testContent.split(" ");
$('#studyTestLink').click(function() {
$('#testContent').hide();
alert('hello');
});*/
});
to
$(function(){
$('#studyTestLink').click(function() {
var testContent = $('#testContent').val();
var contentArray = testContent.split(" ");
$('#testContent').hide();
alert('hello');
});
});
I added your code to a page (using jquery 1.5.2) and it works fine. Don't you have any other code that could be breaking it?

Categories

Resources