Попробуйте по-другому.
HTML
Ваш HTML имеет следующее: onclick="confirmDeleteUser();"
Почему?Предполагается, что jQuery сделает это проще для вас, не сложнее .
Ваш HTML должен быть чистым и не вызывать функции (за исключением ультра-экстремальных обстоятельств, с которыми вы вряд ли столкнетесь),Почему бы не использовать библиотеку jQuery для привязки события к элементу, а не смешивать вызовы функций javascript с вашим HTML?Вы должны делать что-то подобное в тегах <script> после оператора готовности документа.
$("#delete_btn").click(function(e){
/*Code that runs on click of the "delete_btn" ID tag*/
});
Если вы не знакомы с селекторами и событиями jQuery, тогда начните читать здесь .
Другая причина, по которой вам следует это сделать, заключается в том, что документ не полностью / правильно загружен, чтобы не допустить его взлома пользователями.
CSS
Вы также сделали это: style="float:left; margin:0 7px 0 0;" в теге HTML?Это зло, чувак.Просто зло.Как я собираюсь поддерживать этот код в течение пяти месяцев?
Вместо этого используйте CSS.
В ваших тегах или файле CSS вам нужна запись, такая как:
.dialogAdjust {
float: left;
margin: 0 7px 0 0;
}
Тогда в своем HTML-коде вы бы сказали:
<span class="ui-icon ui-icon-alert dialogAdjust"></span>
И теперь вы можете настроить эту вещь на свое усмотрение. Лучше, если вы можете создать класс в диалоговом элементе div, а не отдельные элементы HTML, и в этом случае вы абсолютно точно можете это сделать.
JavaScript
Ладно, вот ваша функция:
function confirmDeleteUser()
{
$('#dialog-modal').dialog({
autoOpen: false,
width: 400,
modal: true,
resizable: false,
buttons: {
"Cancel": function() {
$(this).dialog("close");
return false;
},
"Delete User": function() {
var self = $(this);
var form = $('#edit_user_form');
tmpElm = $('<input type="hidden" />');
tmpElm.prop('name', 'delete');
tmpElm.prop('id', 'delete');
tmpElm.val(true);
tmpElm.appendTo(form);
form.submit();
return true;
}
}
});
$('#dialog-modal').dialog('open');
}
Что здесь происходит?Первый шаг, вы должны попытаться использовать инструмент для измерения качества кода.Двумя популярными являются JSHint и JSLint .Вам не нужно следить за тем, что они говорят, так как это единственный способ написания кода, но он очень полезен для поиска ошибок из-за мелких ошибок.Мне нравится JSHint, поэтому мы собираемся запустить его через это.
И вот вывод:
Errors:
Line 17 tmpElm = $('<input type="hidden" />');
'tmpElm' is not defined.
Line 18 tmpElm.attr('name', 'delete');
'tmpElm' is not defined.
Line 19 tmpElm.attr('id', 'delete');
'tmpElm' is not defined.
Line 20 tmpElm.val(true);
'tmpElm' is not defined.
Line 21 tmpElm.appendTo(form);
'tmpElm' is not defined.
Упс.Похоже, у вас есть неопределенная переменная, то есть теперь она глобальная.Глобальные переменные плохие, они нарушают область видимости и могут заставить ваш код функционировать странным образом.
Мы должны это исправить.Вы всегда должны объявлять локальные переменные в локальной области видимости.Это означает, что вы должны поставить var tempElm; вверху функции «Удалить пользователя».
Избавьтесь от этой функции-обертки, она вам не понадобится.Ваш код должен создать объект диалога и код, когда документ будет загружен, и открыть диалоговое окно, когда он щелкнет.То, что происходит в вашем исходном коде, создает диалоговое окно и открывает его каждый раз, когда вы нажимаете эту кнопку.В чем проблема с этим?Вы продолжаете создавать объект, даже если он создан.Вы создаете один и тот же объект снова и снова и снова.В этой реализации вы этого не заметите, но ваш дизайн перенесется в те места, где он будет, если вы не заметите это сейчас.
Итак, как это выглядит?В вашем теге <head> вы должны увидеть что-то вроде этого:
<script>
/*
This makes all the code inside
run when the window is done loading,
not before, which may cause issues.
*/
$(window).load(function(){
/*
This sets up the dialog
as you've described before
*/
$('#dialog-modal').dialog({
autoOpen: false,
width: 400,
modal: true,
resizable: false,
buttons: {
"Cancel": function() {
$(this).dialog("close");
return false;
},
"Delete User": function() {
var self = $(this);
var form = $('#edit_user_form');
//We've added the var infront of tepElem
var tmpElm = $('<input type="hidden" />');
tmpElm.prop('name', 'delete');
tmpElm.prop('id', 'delete');
tmpElm.val(true);
tmpElm.appendTo(form);
form.submit();
return true;
}
}
});
/*
This is the part where I talked
about selectors and events in the HTML
*/
$("#delete_btn").click(function(e){
$('#dialog-modal').dialog('open');
});
});
</script>
При обращении за помощью используйте инструмент, такой как jsFiddle, для публикации JavaScript, чтобы другим людям было проще помочь вам.
Вот jsFiddle ревизий, которые мы сделали до сих пор. Потратьте немного времени на изучение того, как его использовать, если вы много работаете в JavaScript и хотите действительно быстро что-то протестировать.
Вот почему я хотел, чтобы вы изучили jsFiddle:
Вы не дали нам достаточно кода для успешной работы, что привело меня к написанию этого огромного поста о качестве кода и о том, как спрашивать.вопросы, вдвойне, когда вы публикуете награду.
Если вам нужна помощь, не заставляйте людей по-настоящему усердно работать для нее.Вы не получите хорошую помощь, если кто-то не станет полностью безумным.
jsFiddle требует, чтобы вы опубликовали фактический рабочий код (или нерабочий код), который позволяет нам увидеть, есть ли проблема с form.submit (), такие как какие-либо странные атрибуты или свойства в элементе формы, или любое количество других проблем что может быть вокруг, что вы исключили.
Итак, давайте посмотрим, что нарушает вашу функцию «Удалить пользователя».
function() {
var self = $(this);
var form = $('#edit_user_form');
tmpElm = $('<input type="hidden" />');
tmpElm.prop('name', 'delete');
tmpElm.prop('id', 'delete');
tmpElm.val(true);
tmpElm.appendTo(form);
form.submit();
return true;
}
- Почему вы объявили себя? Вы никогда не используете его один раз. Давайте избавимся от этого.
- Вы можете использовать то, что называется цепочкой, это действительно ваше дело. Некоторые люди ненавидят это.
- Вы добавляете в форму совершенно новый ввод для чего-то, что выглядит как выбор, я не уверен, что это разумно. Я бы предложил изменить значение обычного ввода или использовать другой шаблон, это может привести к множеству проблем, но ради вопроса, я думаю, это сделано по всем правильным причинам. Однако будьте осторожны, если кто-то дважды щелкнет на кнопке «Отправить», этот вход будет два раза.
form - это слово, зарезервированное для использования в DOM, его следует избегать, чтобы избежать путаницы между вашей переменной и DOM API. - Какую кнопку отправки формы мы нажимаем здесь? У вас много, и jQuery не собирается угадывать и надеяться на лучшее.
Как должны выглядеть формы:
W3 объясняет, что такое формы и цель вещей.
Ключевые моменты:
- Имена связаны со значениями
- Отправленная кнопка отправки отправлена, кнопки отправки не нажаты.
- В DOM можно перемещаться на основе атрибутов NAME и ID
Что-то странное происходит в вашей форме.
Вот форма, которую javascript понимает как отправить:
http://jsfiddle.net/YS8uW/2/
Вот javascript, пытающийся отправить вашу форму (урезанный до костей):
http://jsfiddle.net/LfDXh/
Что здесь отличается?
- У вас есть идентификаторы повсюду.
- Вы используете ключевые слова для имен
Давайте посмотрим на то, что вы сделали, учитывая идентификатор отправки чего-либо:
http://jsfiddle.net/fdLfC/
И что происходит, когда мы не используем это в качестве идентификатора?
http://jsfiddle.net/fdLfC/1/
Ааа. Так странно.
Это похоже на то, что присвоение ему идентификатора submit не позволит вам позвонить submit. Правильное объяснение состоит в том, что вы переписали это, потому что dom сделал это, когда вы присвоили этот идентификатор и имя, он пытается вызвать элемент.
Вы можете увидеть это, если откроете отладчик или что-то еще, это даст вам предупреждение о:
TypeError: свойство 'submit' объекта # не является функцией
Не используйте ключевые слова для обозначения чего-то другого, и вы не попадете в эти странные ловушки.
Большое спасибо @ MattMcDonald за то, что он связал меня с этим ресурсом , в котором объясняется, как обращаться с атрибутами NAME и ID и почему они перезаписывают встроенные Методы HTML DOM.
Делай другие вещи, которые я тоже сказал. Отказ от ответственности: все будут вести войну за меня, говоря, что это не абсолютно то, что вы должны делать все эти вещи, я согласен, но я думаю, что этот пост достаточно длинный, и мы все согласимся, что выполнение этих действий - шаг вперед в качестве кода, а не в обратном направлении. В конце вам решать, но старайтесь избегать смешивания вещей в большой грязный горшок. Подумайте о выполнении вашего кода и о том, как это происходит.