We Keep Coding

How to use jQuery to load codepress

I am using codepress in a CMS to edit files in the filesystem. Everything works nicely, however when trying to load the same page using jQuery load() function, codepress seems to break.
My javascript code looks like this which loads the php file with codpress, however codepress seems to not fire.
$('.content').on('click', '#fileSystemWrap a', function (event) {
event.preventDefault();
var fileName = $(this).data('file');
$('#rightColWrap').fadeOut(150, function(){
$('#rightColWrap').load('/?url=developer/edit-file.php&open=' + fileName, function(){
$('#rightColWrap').fadeIn(150);
});
});
});
Digging into codepress.js I see this at the end of the file but I'm not understanding if there is something I could add to my initial on click event listner script to help codpress fire.
if(window.attachEvent) window.attachEvent('onload',CodePress.run);
else window.addEventListener('DOMContentLoaded',CodePress.run,false);
Here is the link to codepress on sourceforge
https://sourceforge.net/projects/codepress/

To be logic : when the data are loaded, we want to initialize CodePress.
So your code should look like :
$('.content').on('click', '#fileSystemWrap a', function (event) {
event.preventDefault();
var fileName = $(this).data('file');
$('#rightColWrap').fadeOut(150, function(){
$('#rightColWrap').load('/?url=developer/edit-file.php&open=' + fileName, function(){
CodePress.run();
$('#rightColWrap').fadeIn(150);
});
});
});
If this didn't work please provide error from the console.
Edit : corrected answer, seen Robson França's comment.
Last issue was that CodePress.run; should have been written CodePress.run();

The answer was that we needed to add parentheses to CodePress.run and after the fadeIn() call.
$('#content').on('click', '#fileSystemWrap a', function (event) {
event.preventDefault();
var fileName = $(this).data('file');
$('#content').fadeOut(150, function(){
$('#content').load('/?url=developer/edit-file.php&open=' + fileName, function(){
$('#content').fadeIn(150, function(){
CodePress.run();
});
});
});
});

jquery - colorbox - adding a function to the popup

I have a "quick view" feature that captures a dynamic URL also known as "qvURL" and creates a colorbox with it via:
<script type="text/javascript">
$(function(){
$(".quickview_btn").click(function(e){
e.preventDefault();
var qvURL = $(this).attr("href");
$.colorbox({"href": qvURL})
});
$.colorbox.resize();
});
</script>
Now. I need to make some changes in the child window - but it seems the AJAX or whatever is wiping out the entire DOM and anything I load from the parent window doesn't reflect.
For instance - let's say I just want to add a div that says qwerty!
[I'm actually wanting to create an mbox around a Call To Action]
Any insight would be greatly appreciated!
Please note - the URLs it's loading is content that I can not manipulate - so it has to be done in the parent window.
Thanks!
Please see below for my full snippet:
<script>
$( document ).ready(function() {
$('.quickview_btn').click(function(){
//Quickview tracking
$('.quickview').attr('id', 'quickviewClicked-area');
mboxDefine('quickviewClicked-area','quickviewClicked','clicked=Y');
$( 'div.quickview' ).bind( 'click', function() {
console.log('clicked!');
product = $(this).children().attr('href');
console.log(product)
mboxUpdate('quickviewClicked', "link="+product);
});
//thumbnail add to cart tracking
$('div.add-to-cart').attr('id', 'ThumbnailAddToCart-area');
mboxDefine('ThumbnailAddToCart-area','ThumbnailAddToCartClicked','clicked=Y');
$( 'div.qlBtns' ).bind( 'click', function() {
;
mboxUpdate('ThumbnailAddToCartClicked', "clicked=Y");
console.log('mbox updated!')
});
});
});
/*
$(document).ready(function(){
$(qvURL).$colorbox({
iframe : true,
frastIframe: false,
onComplete: function(){
$('.name').html('yeah you got it');
}
});
});
*/
</script>
< script >
$(document).ready(function() {
$('.quickview_btn').click(function() {
//Quickview tracking
$('.quickview').attr('id', 'quickviewClicked-area');
mboxDefine('quickviewClicked-area', 'quickviewClicked', 'clicked=Y');
$('div.quickview').bind('click', function() {
console.log('clicked!');
product = $(this).children().attr('href');
console.log(product)
mboxUpdate('quickviewClicked', "link=" + product);
});
//thumbnail add to cart tracking
$('div.add-to-cart').attr('id', 'ThumbnailAddToCart-area');
mboxDefine('ThumbnailAddToCart-area', 'ThumbnailAddToCartClicked', 'clicked=Y');
$('div.qlBtns').bind('click', function() {;
mboxUpdate('ThumbnailAddToCartClicked', "clicked=Y");
console.log('mbox updated!')
});
});
});
/*
$(document).ready(function(){
$(qvURL).$colorbox({
iframe : true,
frastIframe: false,
onComplete: function(){
$('.name').html('yeah you got it');
}
});
});
*/
< /script>

I see this line in your code:
$.colorbox({"href": qvURL})
and my first question is whether or not that selector is enough. Mind you I am more a middle-ware than a client-side guru, but from my knowledge of jQuery, that selector won't do anything because jQuery can't tell what you mean. See how you used the quotes in the assignment of the click function?
$(".quickview_btn").click(function(e){
e.preventDefault();
if you used $("#colorbox") to get the object (if that is its id) or $(".colorbox" if is is a a class you are targeting.
(I am not an expert, as I said, but those who are agree:
$(".someClass") selects all elements with class name someClass
$("#testButton") selects the element with the id value of testButton
-- Courtesy of the DZone jQuery Ref Card at https://dzone.com/refcardz/jquery-selectors
So it may be that everything else is fine, you just aren't passing your code anything to hook into the colorbox object.

JQuery code working properly in jsfiddle but not in browser even with $(window).load(function())

So I'm trying to make a search using a dropdown list, which will show/hide some checkboxes depending on the chosen answer. The problem is that it works perfectly on jsfiddle.net but refuses to load properly on my local machine. I saw a similar post and said something about adding $(window).load(function()) before the rest of the script, but even then it refused to work. I might be doing something wrong so any help is appreciated.
The link for jsfiddle is this: http://jsfiddle.net/CDyZf/66/
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script>
$(window).load(function());
$('.drop-down-show-hide').hide();
$('#dropDown').change(function () {
$(this).find("option").each(function () {
$('#' + this.value).hide();
});
$('#' + this.value).show();
});
</script>

The argument of load() needs to be a function.
load(function()) would pass it the return value of calling a function called function, if function wasn't a reserved word making it a error.
function init() {
$('.drop-down-show-hide').hide();
$('#dropDown').change(function () {
$(this).find("option").each(function () {
$('#' + this.value).hide();
});
$('#' + this.value).show();
}
$(window).load( init );

Linking button to jQuery through service

I have a small problem that should be very easy to overcome. For some reason I cant work this out. So the problem is I cannot get a button to link to some jquery. My set-up is as follows (showing the relevant code):
Default.aspx
jQuery:
function getContent() {
var data = {
numberID: 1
};
$.jsonAspNet("ContentService.asmx", "GetContent", data,
function (result) {
$('#content').html(result);
});
}
jQuery(document).ready(function () {
getContent();
});
HTML:
<div id="content"></div>
ContentService.vb
<WebMethod()> _
Public Function GetContent(number As Integer) As String
Dim sb = New StringBuilder
sb.AppendLine("<table>")
sb.AppendLine("<tr>")
sb.AppendLine("<td class='ui-widget-header ui-corner-all'>Number</td>")
sb.AppendLine("</tr>")
sb.AppendLine("<tr>")
sb.AppendLine("<td>" & number & "</td>")
sb.AppendLine("<td><a href='#' id='test' class='fg-button ui-state-default ui-corner-all'><img src='" & Context.Request.ApplicationPath & "/images/spacer.gif' class='ui-icon ui-icon-pencil' /></a></td>")
sb.AppendLine("</tr>")
sb.AppendLine("</table>")
Return sb.ToString
End Function
So that's the basics of what I have everything works but I'm not sure how to get the a button (id='test') to get linked to some jQuery. I want it to be pressed and bring up a popup.
I have tried to put the jQuery on default.aspx but this doesn't seem to work unless the button is place in the HTML on that page.
$('#test').unbind('click').click(function () {
alert('Working');
});
I'm sure this is easy to do, but I have been trying for a while and cannot seem to get it to work.

Is the problem that you're trying to bind to the element that ISN'T in existance yet?
are you calling the $('#test').unbind('click').click(function () {
alert('Working');
}); BEFORE the service has returned?
$('#test').on('click', function () {
alert('Working');
});
This will bind the event to the '#test' element once it has been inserted in to the DOM.

As you load the content via ajax, you have to bind to $('#content'). Like this:
$(function () {
$('#content').on('click', '#test', function () {
e.preventDefault(); // if a default action is not needed needed
alert('Working');
});
});

I guess this is about not preventing the default behaviour of the A href tag. Now it will probably link to '#' instead of firing the onclick event.
$('#test').on('click', function (e) {
alert('Working');
e.preventDefault();
});
You could try to wrap this in a document ready, or eventually use the .on binder from jQuery, since it's dynamic content.

Solved
It was a very small thing that caused this. The code to fix this problem is as follows:
$('#test').unbind('click').click(test);
This needed to go inside the function with the json so:
function getContent() {
var data = {
numberID: 1
};
$.jsonAspNet("ContentService.asmx", "GetContent", data,
function (result) {
$('#content').html(result);
$('#test').unbind('click').click(test);
});
}
Thank you to everyone that has tried to help me.

random li (list) with jQuery before page get loaded

how I can random a list with jQuery before page get loaded?
i found this example on the web: http://whatanswered.com/websites-javascript/random-elements-using-jquery.php
(you must scroll down a bit to see)
but it works only after mouse press the button. *this is my problem, i need it to work atomatically before the page is getting loaded.
Any ideas?
I copied the code in this FIDDLE, if anyone would like to help, it might be usefull!
$(function() {
$('button').click(function() {
$("div.list").randomize("div.cat");
});
});
(function($) {
$.fn.randomize = function(childElem) {
return this.each(function() {
var $this = $(this);
var elems = $this.children(childElem);
elems.sort(function() { return (Math.round(Math.random())-0.8); });
$this.remove(childElem);
for(var i=0; i < elems.length; i++)
$this.append(elems[i]);
});
}
})(jQuery);

You can just call the randomize plugin when the page loads - be aware though the plugin needs to have been loaded before hand:
$(function() {
$("div.list").randomize("div.cat");
});
Updated fiddle: http://jsfiddle.net/yNChm/1/

The easiest way is to call the randomize() function after the document.ready event has fired:
$(document).ready(function() {
$("div.list").randomize("div.cat");
});

You should be able to accomplish this by doing a $(window).ready, or something along those lines:
$(function() {
console.log('Yo');
$("div.list").randomize("div.cat");
});
Make sure you register the plugin first!