Develop Reference

Dynamic google-code-prettify doesn't work

Is it possible for a button to call a function that would 'prettify' a dynamic <code><pre>? I can't get it to work.
After the page loads, the initial <code> is prettified(?), but when I change it and call prettyPrint() afterwards, it no longer works.
Example: http://jsfiddle.net/uwBjD/2/
Edit: Sorry, I was using a local prettify.js. Updated it, still encountered the same error.

Apparently after the code is prettified, an additional class is added which is prettyprinted. Anything with the class of prettyprinted is not re-prettified. You need to remove that class before recalling the function:
$('input[type=button]').click( function() {
$("#jsExample").text(" var user = 'private'; //Do NOT store your API Key on a script.")
.parent().removeClass("prettyprinted");
prettyPrint();
});
http://jsfiddle.net/uwBjD/3/

custom checkbox images for html returned via ajax

So I'm using the simpleImageCheck jQuery plugin to change checkboxes into images. This works fine for the simple pages I return from the server normally:
$(document).ready(function () {
$("input[type='checkbox']").simpleImageCheck({
image: './content/themes/base/images/fail.png',
imageChecked: './content/themes/base/images/success.png'
});
}
However, on some of my pages there are divs that are loaded dynamically on a button click:
function GetData() {
$.get("/Ajax/Aapt", variables, function (data) {
$("#AaptTab").html(data);
});
$("input[type='checkbox']").simpleImageCheck({
image: './content/themes/base/images/fail.png',
imageChecked: './content/themes/base/images/success.png'
});
}
The get request will return a partail HTML page. When this occurs the div is loaded fine but the checkboxes are not replaced with the images. I think I understand why it is happening, my problem is that I don't know what I should do to fix it....
Since the HTML is returned as a string should I just use a string replacement? Or is there a better way around this?
Also every checkbox I am displaying is disabled as they are just used to view data.

This happens because of '$.get' request takes time and works asynchronously.
Try this:
function GetData() {
$.get("/Ajax/Aapt", variables, function (data) {
$("#AaptTab").html(data);
$("input[type='checkbox']").simpleImageCheck({
image: './content/themes/base/images/fail.png',
imageChecked: './content/themes/base/images/success.png'
});
});
}

How to create a global function that closes a jQuery colorbox?

First I am using the jQuery colorbox plugin that is working fine so far but then I want to close the colorbox using a button. Unfortunately I can't just trigger the click event on that button by selecting its ID using jQuery, instead of that the button must call a javascript function called closepan() (this behavior is unfortunately mandatory for me).
I tried to create the function
closepan() {
$.colorbox.close();
}
first case : inside the
$(document).ready(function(){...});
but then I got the error closepan is undefined.
second case : before the
$(document).ready(function(){...});
but then it's the colorbox method that is undefined!
I gave up after gazillion hours of fiddling with several solutions I've found all around stackoverflow.com regarding this topic! I can't figure out how to make this working!
In other words, how to create a function named closepan() that can execute $.colorbox.close(); while being available globally for my button?

No matter where you create a variable or function if you create it on window it will be available globally.
window.closepan = function() {
// hello there
}

function closepan() {
if($.colorbox) {
$.colorbox.close();
}
}
However, at the point where someone clicks your button all external scripts should have been loaded so that check shouldn't be necessary...

Don't forget to put the keyword function in front of your declaration...
function closepan() {
$.colorbox.close();
}
Working JSFiddle

jQuery/MVC3 function html onclick only working once

Ok, i have a function that is called when in image is clicked. For some reason it is only calling one time when i click it and I'm a little puzzled as to why.
Here's my javascript (combined with a small amount of razor), essentially all it does is call a post method in the controller that returns a partial view and updates that partial view.
function mFunction() {
#{ x = x = 1; }
$.post('/Home/_MyPartial', { 'param1': "#x" }, function(result) {
$('.myUpdatedDiv').html(result);
$('.anotherDiv').empty();
$('.anotherDiv').append('#x');
});
}
Then i have my tag like this
Hello
It updates the view perfectly fine as i expect it to, with some goofy exceptions.
It does hit the controller every time it is clicked (multiple times). So i know it's working that way
The page itself does not get updated and nothing gets replaced a second time. The controller successfully returns the partial view, but the javascript only updates it once.
So i'd appreciate any help as to why it isn't updating more than once.
thanks
edit
Ok lets say i do this:
#{ int x = 0; }
<script type="text/javascript">
function tester() {
#{ x++; }
$('.H').empty();
$('.H').append('#x');
}
</script>
<div class="H"></div>
Click
Clicking on the tag will display '1' and clicking it on it will always display '1'. Does this have something to do with the razor code only rendering once or something? is there a way around it?

try this
<script type="text/javascript">
var indx = 1;//Set this to be the value from the model you want to display
function tester() {
$('.H').empty();
$('.H').append(indx);
indx++;
}
</script>
<div class="H"></div>
Click

Razor code is only run on the server, when the page has been downloaded all you have is the javascript with the Razor values output in place so your second example will look like this:
<script type="text/javascript">
function tester() {
$('.H').empty();
$('.H').append('1');
}
</script>
<div class="H"></div>
Click
This is why it will only ever append 1.

I suggest you use Firefox's Firebug or the Web Console (Ctrl+Shift+K) to look at the asynchronous calls. You'll know there if the browser is actually hitting the server on every click (and you can even see with what parameters whether POST or GET).
It looks like it should be contacting the server everytime, but because state is not kept between calls, you are always getting the same result after the 1st call (because you are always sending the same X value after the first call).

jQuery AJAX is not showing output after first PHP conditional

I am having trouble using the jQuery AJAX call. The query runs properly and debug output also shows the correct data, but anything apart from the first PHP conditional in the document being called is not being shown.
First, there are two buttons, one linked to "core" the other "email":
Here's the relevant JavaScript:
$("#core").click(function(){
loaddetails ("core");
});
$("#email").click(function(){
loaddetails ("email");
});
function loaddetails(type) { var query = "details=" + type;
$.post("details.php", query , function( data ) {
$("#d-features").html(data); alert (data);});
return false;
};
And the contents of details.php:
<? if($_POST['details']=='core'){ ?> blah1 <? }
if($_POST['details']=='email') { ?> blah2 <? } ?>
Both "blah1" and "blah2" appear in the alert box debug output. But, only "blah1" ever gets posted on the page div (#d-features), as "blah2" never appears on the page.
I have checked Firebug and there are absolutely no errors. But I suspect the second conditional request may have gone in a loop, as the alert window showing up when "email" button is clicked shows "Prevent page from creating additional dialogs", though no additional dialogs show up even when unchecked.
What is causing this problem and how to fix it?

.html() replaces the content instead of appending.
Try changing that line to see if all the data is returned from both calls:
$("#d-features").html(data); ==> $("#d-features").append(data);

A small modification on your code, you could try to see if this works:
function loaddetails(type) {
$.post(
"details.php",
{
details: type
},
function( data ) {
$("#d-features").html(data);
alert (data);
}
);
return false;
}

Ok, it seems to be a conflict with the tabs effect I loaded for a div that encompassed these links. So once I removed that effect, it works now. But I'm not sure what is wrong with the effect yet, I'll post another question to figure it out.
Thanks to those that offered assistance!