#javascript #jquery #ajax
#javascript #jquery #ajax
Вопрос:
Я пытаюсь запустить страницу с функциональностью Jquery внутри нее, что происходит, когда я делаю сообщение ajax, оно успешно показывает мне сообщение в окне предупреждения, а затем оно снова перезагружает всю страницу, а затем не может быть запущено снова, и в какой-то момент появляется ошибка типа
$fancybox in undefined, sometimes it shows t is undefined
но другие функции, такие как обновление страницы, снова не работают. Вот приведенный ниже код, который я пробовал
<html>
<head>
<title>View Images</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="/js/fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="/js/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="/js/fancybox/jquery.fancybox-1.3.4.css">
<script type="text/javascript">
$(document).ready(function() {
$("a.zoom2").fancybox({
'zoomSpeedIn' :500,
'zoomSpeedOut' :500,
'overlayShow' :false,
'width' :800,
'height' :600
});
$(".mychecks").click(function(e) {
var data = $("#frmImages").serialize();
var mainID = $("#mainID").val();
$.ajax({
type:"POST",
url:"actionImages.cfm?action=update",
cache:false,
data:data,
success:function(html) {
var i = $("#msg").html(html).text().replace('/s /g', ' ');
alert(i);
$('#reloadImages').load('viewImages.cfm?ID=' mainID 'amp;user=myname');
}
});
});
});
function checkboxes(theElement) {
var theForm = theElement.form, z = 0;
for(z=0; z<theForm.length;z ){
if(theForm[z].type == 'checkbox' amp;amp; theForm[z].name != 'checkall'){
theForm[z].checked = theElement.checked;
}
}
}
</script>
</head>
<body style="background:white;">
<div id="reloadImages">
<form name="frmImages" id="frmImages">
<table align="center" width="100%" cellpadding="1" cellspacing="2">
<tr>
<td colspan="4" align="center"><div style="display:none;" id="msg"></div></td>
</tr>
<tr>
<td colspan="4" align="left" class="BlackBold20"><strong>View Images</strong></td>
</tr>
<td height="30" valign="middle" class="dropdownb"><a class="zoom2" rel="group" title="Bigger Image"
href="/small/5643-Freshy_FRESH_OVAL_OVAL.jpg"> <IMG src="/small/5643.jpg" border='0'></a><br>
<a title="Delete this Image - 5643.jpg" style="cursor:pointer;" id="Del~47780~5643" class="del">[X]</a>amp;nbsp;amp;nbsp; <br>
Show Image:
Yes
<input type="radio" name="display_47780" id="display_1_47780" checked="checked" value="1" title="Check this Radio to show the image on front screen">
amp;nbsp;amp;nbsp;
No
<input type="radio" name="display_47780" id="display_0_47780" value="0" title="Check this Radio to not show the image on front screen">
<br>
<br>
<select name="submitter_47780" id="submitter_47780">
<option value="none" selected="selected">(Select One)...</option>
<option value="cDM" selected="selected">cDM</option>
</select>
<br>
Header Imageamp;nbsp;amp;nbsp;
<select name="headerImage_47780" id="headerImage_47780">
<option value="0" >No</option>
<option value="1" selected="selected">Yes</option>
</select></td>
<td height="30" valign="middle" class="dropdownb"><a class="zoom2" rel="group" title="Bigger Image"
href="/small/5643-Chrysanthemum_13D4294A55.jpg"> <IMG src="/small/5643-Chrysanthemum_13D4294A55.jpg" border='0'></a><br>
<a title="Delete this Image - 5643-Chrysanthemum_13D4294A55.jpg" style="cursor:pointer;" id="Del~47787~5643" class="del">[X]</a>amp;nbsp;amp;nbsp; <br>
Show Image:
Yes
<input type="radio" name="display_47787" id="display_1_47787" checked="checked" value="1" title="Check this Radio to show the image on front screen">
amp;nbsp;amp;nbsp;
No
<input type="radio" name="display_47787" id="display_0_47787" value="0" title="Check this Radio to not show the image on front screen">
<br>
<br>
<select name="submitter_47787" id="submitter_47787">
<option value="none" selected="selected">(Select One)...</option>
<option value="cDM" selected="selected">cDM</option>
</select>
<br>
Header Imageamp;nbsp;amp;nbsp;
<select name="headerImage_47787" id="headerImage_47787">
<option value="0" selected="selected">No</option>
<option value="1" >Yes</option>
</select></td>
<td height="30" valign="middle" class="dropdownb"><a class="zoom2" rel="group" title="Bigger Image"
href="/small/5643-Desert_73A8B513FA.jpg"> <IMG src="/small/5643-Desert_73A8B513FA.jpg" border='0'></a><br>
<a title="Delete this Image - 5643-Desert_73A8B513FA.jpg" style="cursor:pointer;" id="Del~47788~5643" class="del">[X]</a>amp;nbsp;amp;nbsp; <br>
Show Image:
Yes
<input type="radio" name="display_47788" id="display_1_47788" checked="checked" value="1" title="Check this Radio to show the image on front screen">
amp;nbsp;amp;nbsp;
No
<input type="radio" name="display_47788" id="display_0_47788" value="0" title="Check this Radio to not show the image on front screen">
<br>
<br>
<select name="submitter_47788" id="submitter_47788">
<option value="none" selected="selected">(Select One)...</option>
<option value="cDM" selected="selected">cDM</option>
</select>
<br>
Header Imageamp;nbsp;amp;nbsp;
<select name="headerImage_47788" id="headerImage_47788">
<option value="0" selected="selected">No</option>
<option value="1" >Yes</option>
</select></td>
<td height="30" valign="middle" class="dropdownb"><a class="zoom2" rel="group" title="Bigger Image"
href="/small/5643-Hydrangeas_B1AE8A300E.jpg"> <IMG src="/small/5643-Hydrangeas_B1AE8A300E.jpg" border='0'></a><br>
<a title="Delete this Image - 5643-Hydrangeas_B1AE8A300E.jpg" style="cursor:pointer;" id="Del~47789~5643" class="del">[X]</a>amp;nbsp;amp;nbsp; <br>
Show Image:
Yes
<input type="radio" name="display_47789" id="display_1_47789" checked="checked" value="1" title="Check this Radio to show the image on front screen">
amp;nbsp;amp;nbsp;
No
<input type="radio" name="display_47789" id="display_0_47789" value="0" title="Check this Radio to not show the image on front screen">
<br>
<br>
<select name="submitter_47789" id="submitter_47789">
<option value="none" selected="selected">(Select One)...</option>
<option value="cDM" selected="selected">cDM</option>
</select>
<br>
Header Imageamp;nbsp;amp;nbsp;
<select name="headerImage_47789" id="headerImage_47789">
<option value="0" selected="selected">No</option>
<option value="1" >Yes</option>
</select></td>
<span class="dropdownb">
</tr>
</span>
<td height="30" valign="middle" class="dropdownb"><a class="zoom2" rel="group" title="Bigger Image"
href="/small/5643-Jellyfish_BFEB8F8D8F.jpg"> <IMG src="/small/5643-Jellyfish_BFEB8F8D8F.jpg" border='0'></a><br>
<a title="Delete this Image - 5643-Jellyfish_BFEB8F8D8F.jpg" style="cursor:pointer;" id="Del~47790~5643" class="del">[X]</a>amp;nbsp;amp;nbsp; <br>
Show Image:
Yes
<input type="radio" name="display_47790" id="display_1_47790" checked="checked" value="1" title="Check this Radio to show the image on front screen">
amp;nbsp;amp;nbsp;
No
<input type="radio" name="display_47790" id="display_0_47790" value="0" title="Check this Radio to not show the image on front screen">
<br>
<br>
<select name="submitter_47790" id="submitter_47790">
<option value="none" selected="selected">(Select One)...</option>
<option value="cDM" >cDM</option>
</select>
<br>
Header Imageamp;nbsp;amp;nbsp;
<select name="headerImage_47790" id="headerImage_47790">
<option value="0" selected="selected">No</option>
<option value="1" >Yes</option>
</select></td>
<td height="30" valign="middle" class="dropdownb"><a class="zoom2" rel="group" title="Bigger Image"
href="/small/5643-Koala_3BF9D36D8F.jpg"> <IMG src="/small/5643-Koala_3BF9D36D8F.jpg" border='0'></a><br>
<a title="Delete this Image - 5643-Koala_3BF9D36D8F.jpg" style="cursor:pointer;" id="Del~47791~5643" class="del">[X]</a>amp;nbsp;amp;nbsp; <br>
Show Image:
Yes
<input type="radio" name="display_47791" id="display_1_47791" checked="checked" value="1" title="Check this Radio to show the image on front screen">
amp;nbsp;amp;nbsp;
No
<input type="radio" name="display_47791" id="display_0_47791" value="0" title="Check this Radio to not show the image on front screen">
<br>
<br>
<select name="submitter_47791" id="submitter_47791">
<option value="none" selected="selected">(Select One)...</option>
<option value="cDM" selected="selected">cDM</option>
</select>
<br>
Header Imageamp;nbsp;amp;nbsp;
<select name="headerImage_47791" id="headerImage_47791">
<option value="0" selected="selected">No</option>
<option value="1" >Yes</option>
</select></td>
<td height="30" valign="middle" class="dropdownb"><a class="zoom2" rel="group" title="Bigger Image"
href="/small/5643-lamborghini-82a_05F51070AB.jpg"> <IMG src="/small/5643-lamborghini-82a_05F51070AB.jpg" border='0'></a><br>
<a title="Delete this Image - 5643-lamborghini-82a_05F51070AB.jpg" style="cursor:pointer;" id="Del~47792~5643" class="del">[X]</a>amp;nbsp;amp;nbsp; <br>
Show Image:
Yes
<input type="radio" name="display_47792" id="display_1_47792" checked="checked" value="1" title="Check this Radio to show the image on front screen">
amp;nbsp;amp;nbsp;
No
<input type="radio" name="display_47792" id="display_0_47792" value="0" title="Check this Radio to not show the image on front screen">
<br>
<br>
<select name="submitter_47792" id="submitter_47792">
<option value="none" selected="selected">(Select One)...</option>
<option value="cDM" >cDM</option>
</select>
<br>
Header Imageamp;nbsp;amp;nbsp;
<select name="headerImage_47792" id="headerImage_47792">
<option value="0" selected="selected">No</option>
<option value="1" >Yes</option>
</select></td>
<td height="30" valign="middle" class="dropdownb"><a class="zoom2" rel="group" title="Bigger Image"
href="/small/5643-Lighthouse_5D01293FFF.jpg"> <IMG src="/small/5643-Lighthouse_5D01293FFF.jpg" border='0'></a><br>
<a title="Delete this Image - 5643-Lighthouse_5D01293FFF.jpg" style="cursor:pointer;" id="Del~47793~5643" class="del">[X]</a>amp;nbsp;amp;nbsp; <br>
Show Image:
Yes
<input type="radio" name="display_47793" id="display_1_47793" checked="checked" value="1" title="Check this Radio to show the image on front screen">
amp;nbsp;amp;nbsp;
No
<input type="radio" name="display_47793" id="display_0_47793" value="0" title="Check this Radio to not show the image on front screen">
<br>
<br>
<select name="submitter_47793" id="submitter_47793">
<option value="none" selected="selected">(Select One)...</option>
<option value="cDM" >cDM</option>
</select>
<br>
Header Imageamp;nbsp;amp;nbsp;
<select name="headerImage_47793" id="headerImage_47793">
<option value="0" selected="selected">No</option>
<option value="1" >Yes</option>
</select></td>
<span class="dropdownb">
</tr>
</span>
<td height="30" valign="middle" class="dropdownb"><a class="zoom2" rel="group" title="Bigger Image"
href="/small/5643-Penguins1_714BCABE16.jpg"> <IMG src="/small/5643-Penguins1_714BCABE16.jpg" border='0'></a><br>
<a title="Delete this Image - 5643-Penguins1_714BCABE16.jpg" style="cursor:pointer;" id="Del~47794~5643" class="del">[X]</a>amp;nbsp;amp;nbsp; <br>
Show Image:
Yes
<input type="radio" name="display_47794" id="display_1_47794" checked="checked" value="1" title="Check this Radio to show the image on front screen">
amp;nbsp;amp;nbsp;
No
<input type="radio" name="display_47794" id="display_0_47794" value="0" title="Check this Radio to not show the image on front screen">
<br>
<br>
<select name="submitter_47794" id="submitter_47794">
<option value="none" selected="selected">(Select One)...</option>
<option value="cDM" selected="selected">cDM</option>
</select>
<br>
Header Imageamp;nbsp;amp;nbsp;
<select name="headerImage_47794" id="headerImage_47794">
<option value="0" selected="selected">No</option>
<option value="1" >Yes</option>
</select></td>
<td height="30" valign="middle" class="dropdownb"><a class="zoom2" rel="group" title="Bigger Image"
href="/small/5643-sameera-reddy-77a_1C7F77BE41.jpg"> <IMG src="/small/5643-sameera-reddy-77a_1C7F77BE41.jpg" border='0'></a><br>
<a title="Delete this Image - 5643-sameera-reddy-77a_1C7F77BE41.jpg" style="cursor:pointer;" id="Del~47795~5643" class="del">[X]</a>amp;nbsp;amp;nbsp; <br>
Show Image:
Yes
<input type="radio" name="display_47795" id="display_1_47795" checked="checked" value="1" title="Check this Radio to show the image on front screen">
amp;nbsp;amp;nbsp;
No
<input type="radio" name="display_47795" id="display_0_47795" value="0" title="Check this Radio to not show the image on front screen">
<br>
<br>
<select name="submitter_47795" id="submitter_47795">
<option value="none" selected="selected">(Select One)...</option>
<option value="cDM" selected="selected">cDM</option>
</select>
<br>
Header Imageamp;nbsp;amp;nbsp;
<select name="headerImage_47795" id="headerImage_47795">
<option value="0" selected="selected">No</option>
<option value="1" >Yes</option>
</select></td>
<td height="30" valign="middle" class="dropdownb"><a class="zoom2" rel="group" title="Bigger Image"
href="/small/5643-Tulips_F832F5324B.jpg"> <IMG src="/small/5643-Tulips_F832F5324B.jpg" border='0'></a><br>
<a title="Delete this Image - 5643-Tulips_F832F5324B.jpg" style="cursor:pointer;" id="Del~47796~5643" class="del">[X]</a>amp;nbsp;amp;nbsp; <br>
Show Image:
Yes
<input type="radio" name="display_47796" id="display_1_47796" checked="checked" value="1" title="Check this Radio to show the image on front screen">
amp;nbsp;amp;nbsp;
No
<input type="radio" name="display_47796" id="display_0_47796" value="0" title="Check this Radio to not show the image on front screen">
<br>
<br>
<select name="submitter_47796" id="submitter_47796">
<option value="none" selected="selected">(Select One)...</option>
<option value="cDM" >cDM</option>
</select>
<br>
Header Imageamp;nbsp;amp;nbsp;
<select name="headerImage_47796" id="headerImage_47796">
<option value="0" selected="selected">No</option>
<option value="1" >Yes</option>
</select></td>
<input type="hidden" name="mainID" value="5643" id="mainID">
<input type="hidden" name="updmode" id="updmode" value="codes">
<tr>
<td colspan="4" align="left"><input type="button" name="Update" value="Update" class="mychecks" ></td>
</tr>
</table>
</form>
</div>
</body>
</html>
Комментарии:
1. не связанный — jQuery прошел 1.4.2
Ответ №1:
После отправки данных через AJAX вы полностью перезагружаете DOM, поэтому ваши $('.mychecks') и любые другие ссылки на прямые элементы, подобные этому, будут бесполезны, потому что вы удалили их, сказав $('#reloadImages').load(...)
Чтобы исправить это, замените все $('selector').event() на $(document).on('event', 'selector', function() {...}); и на те, которые не связаны с событиями, но используйте .find('selector') вместо .on('event'...etc) , конечно.
Пример:
$(".mychecks").click(function(e) {
превращается в
$(document).on('click', '.mychecks', function(e) {
и это
$("#frmImages").serialize();
может быть это
$(document).find('#frmImages').serialize();
Вы должны обновить свой jQuery до чего-то более современного (по крайней мере,> 1.7), чтобы получить функциональность из того, что я даю вам здесь. Вы можете заменить события на .delegate() but на данный момент .on() заменил его.
ОДНАКО
Я должен предостеречь от всего этого (даже если это работает), потому что этот метод очень неаккуратный и, вероятно, приведет к сбою чьего-либо браузера на старом ПК и т. Д. Что вам нужно сделать, это обновить каждый элемент по отдельности и вместо того, чтобы в основном захватывать всю веб-страницу с помощью AJAX, захватывать только фактические данные, необходимые с помощью JSON или другого управляемого формата.
Это значительно упростит вашу жизнь, а обработка и отображение данных станут для вас несложными.
Комментарии:
1. Я хотел бы использовать новый форматированный способ, пожалуйста, предоставьте мне несколько примеров кода для этого, это будет очень полезно для моей будущей работы. С уважением
2. Вы имеете в виду то, что я упомянул в конце, или основной ответ? Я действительно, действительно предпочитаю, чтобы вы следовали заключительной заметке, которую я включил, о правильном извлечении и обновлении данных с помощью AJAX и DOM. Но если вам нужно больше информации об основном ответе, лучшим ресурсом, который я нашел, на самом деле является сам jQuery API. Начните здесь: api.jquery.com/on
3. Да, следуя за вами, я действительно хочу следовать последнему абзацу, я бы хотел использовать подход, который лучше всего подходит
4. Хотя само по себе это не звездное руководство, оно очень поможет с кодированием (к вашему сведению, есть раздражающее объявление на всю страницу) w3bees.com/2013/08/ajax-image-upload-with-jquery.html
5. Спасибо за ссылку, но приведенный выше ответ, который вы предоставили, не работает, теперь, когда я нажимаю кнопку обновления, он ничего не делает