 Editar post sin recargar página - 6/5/2017, 8:23 pm
Editar post sin recargar página ¡Hola gente! Este tutorial es muy sencillo, basta con añadir el código JavaScript en la sección con la inversión en cada página y listo. Lo que tenemos es como la imagen de abajo tomada de un foro IPBoard: Pero, ¿cómo funciona?Simple: Inicialmente, el código crea un nuevo campo en el perfil de los miembros, una vez creado, el miembro exacta ubicación se registra en este espacio. - Código:
var sFE_oldMsg = '', oFE_msgID = 0, sFE_subject = '';
$(function () {
var sCSS = '' +
'<style>' +
'.input_submit.alt {' +
'background: none repeat scroll 0 0 #cdf16c;' +
'border-color: #DAE2EA;' +
'border-radius: 3px 3px 3px 3px;' +
'border-style: solid;' +
'border-width: 1px;' +
'box-shadow: 0 1px 0 0 #cdf16c inset, 0 2px 3px #cdf16c;' +
'color: #cdf16c;' +
'margin-left: 4px !important;' +
'padding: 4px;' +
'text-decoration: none;' +
'}' +
'.input_text, .fdfButton {' +
'padding: 4px !important;' +
'box-shadow: 0 1px 0 0 #EFF3F8 inset, 0 2px 3px rgba(0, 0, 0, 0.2);' +
'}' +
'.desc {' +
'background-color: #2c2c2c;' +
'padding: 9px;' +
'color: #848484;' +
'font-size: 11px;' +
'}' +
'</style>';
document.head.insertAdjacentHTML('beforeEnd', sCSS);
$('a[href*="mode=editpost"]').click(function (event) {
event.preventDefault();
var datahref = $(this).attr('href');
var post_ID = datahref.split('p=')[1].split('&')[0];
/* Forum versions! */
var phpBB2 = $('#p' + post_ID).find('td .postbody div:eq(0)');
var phpBB3 = $('#p' + post_ID).find('div.content');
var punbb = $('#p' + post_ID).next().find('div.entry-content');
var invision = $('#p' + post_ID).find('div.post-entry');
if (phpBB2.length) {
oFE_msgID = phpBB2;
} else if(phpBB3.length) {
oFE_msgID = phpBB3;
} else if(punbb.length) {
oFE_msgID = punbb;
} else if(invision.length) {
oFE_msgID = invision;
};
fastEditMsg(post_ID);
});
});
/***
* Fast edit post!
* Function: fastEditMsg(post_ID);
*/
fastEditMsg = function(post_ID){
if (isNaN(post_ID) || ($('#p' + post_ID).length == 0) ) {return false}
sFE_oldMsg = oFE_msgID.html();
var sHtml = '<div class="main-content topic">' +
'<div class="post">' +
'<div id="editor_' + post_ID + '">' +
'<textarea cols="9" id="text_editor_textarea_' + post_ID + '" name="message" onclick="storeCaret(this)" onkeyup="storeCaret(this)" onselect="storeCaret(this)" rows="15" style="width: 98%; height: 250px;" tabindex="3" wrap="virtual">' +
'\n\n\n\n\n\nCargando el post...</textarea>' +
'<div class="row2 desc">' +
'Reason for edit: <input type="text" value="" name="post_edit_reason_' + post_ID + '" id="post_edit_reason_' + post_ID + '" class="input_text" maxlength="250" size="35"> ' +
'<input type="checkbox" value="1" id="add_edit_' + post_ID + '" name="add_edit_' + post_ID + '" style="vertical-align: middle ! important;"> <label for="add_edit_' + post_ID + '"> \'Motivo de edición\'</label>' +
'</div>' +
'<fieldset class="submit" style="font-size: 13px !important; padding: 15px 6px; text-align: center; border: 0 none; background-color: #2c2c2c;">' +
'<input class="button2 fdfButton" name="post" tabindex="6" type="button" value="Guardar" onclick="fastEditSave(' + post_ID + ')"> ' +
'<a class="input_submit alt" href="/post?p='+ post_ID + '&mode=editpost">Editor avanzado</a>' +
' or ' +
'<a class="cancel" title="Cancel" href="javascript:void(0);" onclick="fastEditCancel(' + post_ID + ');">Cancelar</a>' +
'</fieldset>' +
'</div>' +
'</div>' +
'</div>';
oFE_msgID.html(sHtml);
var text_area = $('#text_editor_textarea_' + post_ID);
text_area.val(sFE_oldMsg.replace(/<br\s?\/?>/g,"\n"));
/* text_area.val(HtmlToBBCode(sFE_oldMsg)); */
try
{
text_area.sceditor({
locale: "pt",
height: "250px",
width: "auto",
plugins: "bbcode",
toolbar: "bold,italic,underline,strike|left,center,right,justify|quote,code,faspoiler,fahide|servimg,image,link,youtube|size,color,font,removeformat|emoticon,date,time,maximize,source",
parserOptions: {
/*breakAfterBlock: false,*/
/*removeEmptyTags: false, */
/*fixInvalidNesting: false,*/
/*fixInvalidChildren: false*/
},
style: "http://illiweb.com/rs3/85/frm/SCEditor/minified/$.sceditor.default.min.css",
rtl: false,
emoticonsEnabled: true,
emoticonsCompat: true,
emoticonsRoot: "",
emoticonsURL: "/smilies.forum?f=9&mode=smilies_frame&t=1383011440"
});
text_area.sceditor("instance").toggleSourceMode();
text_area.sceditor("instance").focus();
$("a.sceditor-button-source").addClass("hover");
var container = $('.sceditor-container');
var ciframe = container.find('iframe');
var ctextarea = container.find('textarea');
ciframe.width(ciframe.width() - 9);
ctextarea.width(ctextarea.width() - 9);
$('.sceditor-resize-cover').show();
} catch(e) { if( typeof(console) != 'undefined' ) { console.error(e); } }
$.get("/post?p=" + post_ID + "&mode=editpost", function(data) {
sFE_subject = $(data).find('input[name="subject"]').val();
var user_Msg = $(data).find('#text_editor_textarea[name="message"]').val();
text_area.val(user_Msg);
text_area.sceditor('instance').val(user_Msg);
}).done(function(){
$('.sceditor-resize-cover').hide();
}).fail(function(){
oFE_msgID.html(sFE_oldMsg);
alert('Atención!\n\n ¡ocurrio un error!');
});
$('html,body').animate({
scrollTop: $('#p' + post_ID).offset().top
}, 1200);
};
fastEditCancel = function(post_ID){
oFE_msgID.html(sFE_oldMsg);
$('html,body').animate({
scrollTop: $('#p' + post_ID).offset().top
}, 400);
};
fastEditSave = function(post_ID) {
if (isNaN(post_ID) || ($('#p' + post_ID).length == 0) ) {return false}
var text_area = $('#text_editor_textarea_' + post_ID);
var edit_reason = '', send_txt = "Enviar";
text_area.sceditor("instance").toggleSourceMode();
var user_Msg = text_area.sceditor('instance').val();
var sHtml = text_area.sceditor('instance').getSourceEditorValue();
if($('#add_edit_' + post_ID).is(':checked')) {
edit_reason = $('#post_edit_reason_' + post_ID).val();
}
oFE_msgID.html(sHtml);
if (sHtml.indexOf('<code>') !== -1) {
var tagCode = oFE_msgID.children('code');
var sContent = tagCode.html();
tagCode.before('<div class="punbbtop">Código <button onclick="punbbExpand(this); return false;">expand</button><button style="display: none" onclick="punbbCollapse(this); return false;">collapse</button> <button onclick="punbbSelect(this); return false;">select</button> <button onclick="punbbPopup(this); return false;">popup</button> <button style="margin-right: 50px; float: right;" onclick="punbbAbout(this); return false;">?</button></div><pre class="highlight punbb_block">' + sContent + '</pre>');
tagCode.remove();
$.getScript('http://balupton.github.io/$-syntaxhighlighter/scripts/$.syntaxhighlighter.min.js', function () {
$.SyntaxHighlighter.init({
'wrapLines': false
})
})
}
$.post("/post", {
p: post_ID,
mode: 'editpost',
subject: sFE_subject,
message: user_Msg,
edit_reason: edit_reason,
attach_sig: '1',
notify: "0",
post: send_txt
}).done(function(){
/* */
}).fail(function(){
oFE_msgID.html(sFE_oldMsg);
alert('Atenção!\n\n Ocorreu um erro ao salvar a edição do post, aguarde 10 segundos e tente editar novamente!');
});
$('html,body').animate({
scrollTop: $('#p' + post_ID).offset().top
}, 400);
}; Para que este código funcione correctamente, usted tiene que modificar estos cambios de acuerdo a la imagen a continuación.
|
Linear Mode
Supervisor
