The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
#1
|
|||
|
|||
Jquery Application not working
Hi there -
I am trying to implement a jquery / php inline edit function into my Vbulletin install. When I developed this in standalone pages, the product worked fine, but when I try to implment this into VB it simply doesn't fire my method. Can anyone help with this matter? Below is my Html / Jquery / Javascript - I have left the ajax / php out because the method in its simplest form (no saving) doesn't even work. Thanks in advance! HTML Code:
<table> <tr> <td class="editableSingle categoryName removable id1">My Name????</td> </tr> </table> Code:
$(function(){ $.inlineEdit({ categoryName: 'ajax.php?type=name&categoryId=', categoryPrice: 'ajax.php?type=price&categoryId=', remove: 'ajax.php?remove&type=price&categoryId=' }, { animate: false, filterElementValue: function($o){ if ($o.hasClass('categoryPrice')) { return $o.html().match(/\$(.+)/)[1]; } else { return $o.html(); } }, afterSave: function(o){ if (o.type == 'categoryPrice') { $('.categoryPrice.id' + o.id).prepend('$'); } } }); }); Code:
/** * jQuery Inline Edit * Copyright (c) 2009 Markus Hedlund, Mimmin AB * Version 1.0 * Licensed under MIT license * http://www.opensource.org/licenses/mit-license.php * http://labs.mimmin.com/inlineedit * * * Adds inline edit to html elements with classes editableSingle and editableMulti. * Elements must have class to identify type of data and id. * Types are linked to urls * * Example: * <li class="editableSingle categoryName id3"> * * Javascript: * $.inlineEdit({categoryName: 'category/edit/id/'}); * * * Or: * <td class="editableSingle videoTitle id3"></td> * <td class="editableMulti videoDescription id3"></td> * * Javascript: * $.inlineEdit({ * videoTitle: '/video/edit/title/', * videoDescription: '/video/edit/description/' * }); */ (function($){ $.inlineEdit = function(urls, options){ var editableUrls = urls; var options = jQuery.extend({ afterSave: function(){}, afterRemove: function(){}, getId: getId, filterElementValue: function($o){return $o.html();}, animate: true, colors: { success: 'green', error: 'red'/*, standard: '#000'*/ } }, options); var initialValues = {}; var editableFields = false; var linkClicked = false; if ($('.editableSingle, .editableMulti').length > 0) { var simpleMode = $('.editableSingle, .editableMulti')[0].tagName.toLowerCase() != 'td'; options.colors.standard = $('.editableSingle, .editableMulti').eq(0).css('color'); } $('.editableSingle').click(function(){ if (linkClicked) { linkClicked = false; return; } if (!editableFields || $('.editField').length < editableFields) { var value = options.filterElementValue($(this)); saveInitialValue($(this)); $(this).addClass('isEditing').css('color', options.colors.standard).stop(); if ($('.editFieldFirst').length == 0) { editableFields = $(this).siblings('.editableSingle, .editableMulti').length + 1; $(this).html('<div class="editFieldWrapper"><input type="text" value="' + value + '" class="editField editFieldFirst" /></div>'); if (!simpleMode) { $(this).siblings('.editableSingle, .editableMulti').click(); } else { editableFields = 1; } addSaveControllers(function(){ $('.editFieldFirst').focus(); }); } else { $(this).html('<div class="editFieldWrapper"><input type="text" value="' + value + '" class="editField" /></div>'); } } }); $('.editableMulti').click(function(){ if (linkClicked) { linkClicked = false; return false; } if (!editableFields || $('.editField').length < editableFields) { var value = options.filterElementValue($(this)); saveInitialValue($(this)); $(this).addClass('isEditing').css('color', options.colors.standard).stop(); if ($('.editFieldFirst').length == 0) { editableFields = $(this).siblings('.editableSingle, .editableMulti').length + 1; $(this).html('<div class="editFieldWrapper"><textarea class="editField editFieldFirst">' + value + '</textarea></div>'); if (!simpleMode) { $(this).siblings('.editableSingle, .editableMulti').click(); } addSaveControllers(function(){ $('.editFieldFirst').focus(); }); } else { $(this).html('<div class="editFieldWrapper"><textarea class="editField">' + value + '</textarea></div>'); } } }); $('.editableSingle a, .editableMulti a').click(function(){ linkClicked = true; }); function addSaveControllers(callback) { if ($('.editFieldWrapper:last').parent().hasClass('removable')) { $('.editFieldWrapper:last').append('<div class="editFieldSaveControllers"><button>Save</button>' + ', <a href="javascript:;" class="editFieldRemove">Remove</a> or ' + '<a href="javascript:;" class="editFieldCancel">Cancel</a></div>'); } else { $('.editFieldWrapper:last').append('<div class="editFieldSaveControllers"><button>Save</button> or ' + '<a href="javascript:;" class="editFieldCancel">Cancel</a></div>'); } $('.editFieldSaveControllers > button').click(editSave); $('.editFieldSaveControllers > a.editFieldCancel').click(editCancel); $('.editFieldSaveControllers > a.editFieldRemove').click(editRemove); $('input.editField').keydown(function(e){ if (e.keyCode == 13) { // Enter editSave(); } else if (e.keyCode == 27) { // Escape editCancel(); } }); if (options.animate) { $('.editFieldWrapper').slideDown(500, callback); } else { $('.editFieldWrapper').show(); callback(); } } function editCancel(e) { linkClicked = typeof(e) != 'undefined'; // If e is set, call comes from mouse click $('.editField').each(function(){ var $td = $(this).parents('.editableSingle, .editableMulti'); removeEditField($td, getInitialValue($td), false); }); } function editRemove() { linkClicked = true; if (!confirm('Are you sure that you want to remove this?')) { return false; } $('.editFieldSaveControllers > button, .editField').attr('disabled', 'disabled').html('Removing...'); var $td = $('.editField').eq(0).parents('.editableSingle, .editableMulti'); var url = editableUrls.remove; var id = options.getId($td); $.ajax({ url: url + id, type: 'POST', success: function(msg){ $('.editField').each(function(){ var $td = $(this).parents('.editableSingle, .editableMulti'); if (msg == 1) { if (options.animate) { $td.slideUp(500, function(){ $(this).remove(); }); } else { $td.remove(); } } else { removeEditField($td, getInitialValue($td), false, options.colors.error); } }); options.afterRemove({ success: msg == 1, id: id }); }, error: function(){ $('.editField').each(function(){ var $td = $(this).parents('.editableSingle, .editableMulti'); removeEditField($td, getInitialValue($td), false, options.colors.error); }); } }); } function removeEditField($td, value, animateColor, fromColor) { var f = function(){ $td.html(value).removeClass('isEditing'); if (animateColor) { $td.css('color', fromColor)/*.animate({color: options.colors.standard},5000)*/; setTimeout(function(){ $td.css('color', options.colors.standard); }, 5000); } else if (typeof(fromColor) != 'undefined') { $td.css('color', fromColor); } }; if (options.animate) { $td.children('.editFieldWrapper').slideUp(500, f); } else { $td.children('.editFieldWrapper').hide(); f(); } } function saveInitialValue($td) { var index = options.getId($td) + getTypeAndUrl($td).type; initialValues[index] = $td.html(); } function getInitialValue($td) { var index = options.getId($td) + getTypeAndUrl($td).type; return initialValues[index]; } function getId($td) { var id; $.each($td.attr('class').split(' '), function(index, name){ if (name.match(/^id[0-9]*$/)) { id = name.match(/^id([0-9]*)$/)[1]; return false; } }); return id; } function getTypeAndUrl($td) { var typeAndUrl; $.each(editableUrls, function(index, name){ if ($td.hasClass(index)) { typeAndUrl = {type: index, url: name}; return false; } }); return typeAndUrl; } function editSave() { $('.editFieldSaveControllers > button, .editField').attr('disabled', 'disabled'); $('.editField').each(function(){ var $td = $(this).parents('.editableSingle, .editableMulti'); var typeAndUrl = getTypeAndUrl($td); var url = typeAndUrl.url; // Get save URL var id = options.getId($td); var value = $(this).val(); var color = options.colors.standard; $.ajax({ url: url + id, data: {data: value}, type: 'POST', success: function(msg){ if (msg == 1) { removeEditField($td, value, true, options.colors.success); } else { removeEditField($td, value, false, options.colors.error); } options.afterSave({ success: msg == 1, type: typeAndUrl.type, id: id, value: value }); }, error: function(){ removeEditField($td, value, false, options.colors.error); } }); }); } }; })(jQuery); |
Thread Tools | |
Display Modes | |
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
More Information | |
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|