MyBB Community Forums

Full Version: Problem with alerts
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hi guys,
I'm changing inline message of my plugin file manager with jGrowl alers but I have a problem.
This is the video with the problem:
http://www.chack1172.altervista.org/file...er_bug.mp4

This is the code:
$page->extra_header .= '
<style>
.file__icon { width: 100%;height: auto;min-width: 40px }
</style>
<script type="text/javascript">
$(document).ready(function() {
	$(".rename").click(function(event){
		event.preventDefault();
		var tr = $(this).parents(".file"),
            name = tr.find(".file__name__link").text();
		tr.find(".file__name__form").remove();
		tr.find(".file__name__link").hide();
		tr.find(".file__name").append(\'<form action="#" method="post" name="form_rename" class="file__name__form"><input type="text" name="new_name" value="\'+name+\'" class="text_input"> <input type="button" name="rename" value="'.$lang->file_button_rename.'" class="submit_button"> <input type="button" name="cancel" value="'.$lang->file_button_cancel.'" class="submit_button"></form>\');
		
        tr.on("click", "input[name=\'cancel\']", function() {
			tr.find(".file__name__link").show();
			tr.find(".file__name__form").remove();
		});
		
		tr.on("click", "input[name=\'rename\']", function() {
			var form = $(this).parent(".file__name__form");
			form.find("input").prop(\'disabled\', true);
			
			var new_name = form.find("input[name=\'new_name\']").val(),
				formData = {
                    \'new_name\' : new_name,
                    \'file\' : tr.find(".file__name__link").text()
                }
			
			$.ajax({
				url: "./modules/file/rename.php?directory='.$dir.'",
				type: "post",
				dataType: "json",
				data: formData,
				success: function(data) {
					if(data.success) {
						tr.find(".file__name__link").show().html("<strong></strong>").text(new_name);
						form.remove();
                        $.jGrowl(data.text);
					}
					
					if(data.error) {
						$.jGrowl(data.text);
						form.find("input").prop(\'disabled\', false);
					}
				},
				error: function(data){
					$.jGrowl("'.$lang->file_error_rename.'");
					form.find("input").prop(\'disabled\', false);
				}
			});
		});
	})
})
</script>
';
You are attaching 2 click events to input[name='cancel'] and input[name='rename'] every time you click on .rename. You can:

1) call .off('click') on those inputs before attaching your events;
2) move the handlers outside the click event on .rename;
3) switch from event delegation (using .on()) to event binding (using .click()).
Thank you Shade, I'll try it

Now it works, thank you Smile