Проблема с классами и Ajax

У меня проблемы с классом JS и вызовом ajax. Никогда еще не было столько проблем с чем-то настолько простым, лол. axaj не будет работать, но даже более простой вариант LastID всегда не определен. Не уверен, что случилось.

 var communityObj = new Community('none');


function Community(IDSET){


var lastID = IDSET;


this.fetch = function()


{


var ID = this.return_id();


alert(ID);


// ajax call to select x number of


$.ajax({


url: "php/handle_community_scroll_sleuths.php",


method:"POST"


data:{idObj:ID}


}).done(function( data ) {


alert(data);


});


};


this.return_id = function()


{


return this.lastID;


}


}

Код (разметка):

Чертовски легче для глаз. Опечатки, которые я видел (возможно, были и другие): 1) длина вместо длины 2) комментарии вместо комментариев Теперь у вас возникла проблема с синтаксисом использования {, {, ) и ). Исправьте это и посмотрите, поможет ли это. P.S. Я никогда не использовал ajax, никогда не занимался серверной частью и почти никогда не использовал javascript, поэтому я слишком невежда, чтобы ответить на большинство ваших вопросов.

Хорошо, я сделал это.

Я извлек для себя ценный урок.

Когда я могу быть на сервере, будь на сервере, лол. Итак, я получил первый бит до одного вызова ajax.

Это выскакивает первые три поста сыщика.

Я хотел бы получить комментарии во втором вызове ajax, но это возвращает меня к той же проблеме.

Как мне их связать? По крайней мере, теперь глазам легче.

 this.fetch_first = function()


{


// fetch first six objects and store last ID in class lastID 


// ajax call to select x number of records


var fetchSleuth = $.ajax({


method:"POST",


url: "php/handle_community_scroll_sleuths.php"


}).done(function( data ) {


$('#sleuthswrapper').append(data);


// End fetch sleuths ajax


}) 


// end fetch first


};

Код (разметка):

У меня есть вопрос. Было бы проще создать HTML-код на стороне сервера и получить его с помощью вызовов ajax? Вызов Axaj -> получить первые три поста сыщика серверная конструкция html. возвращенный html отображается из JS То же самое с прокруткой вниз.

Я решил эту проблему, но обнаружил новую ошибку. Я создаю экземпляр html в пустую строку и добавляю к нему пару вызовов ajax, но когда я дохожу до конца функции, строка оказывается пустой. Не знаю почему.

 function Community(IDSET){


this.lastID = IDSET;


this.fetch = function()


{


var ID = this.return_id();


var html = '';


// ajax call to select x number of


$.ajax({


url: "php/handle_community_scroll_sleuths.php",


method:"POST",


dataType: "json",


data:{idObj:ID}


}).done(function( data ) {


for(i = 0; i <= data.length; i++)


{


html += "<div class=\"panel\"> \


<div class=\"sleuth\"> \


<img class=\"img-circle\" src=\"images/profile.jpg\" height=\"34\" width=\"34\" /> \


<span><b>JeremyBenson11</b> > TYPE</span><br><br> \


<p class=\"sleuth-text\">DESC</p> \


<p style=\"margin-top:12px;\"> \


<a href=\"php/handle_like_sleuth.php?token=&username=\"><i style=\"margin-right:6px;\" class=\"fa fa-thumbs-o-up\"></i></a><b style=\"margin-left:8px;\"></b> \


<i style=\"margin-left:12px;\" class=\"fa fa-comment-o\"></i> COUNT \


<i style=\"margin-left:12px; margin-right:4px;\" class=\"fa fa-retweet\"></i> repost \


<i style=\"margin-left:12px; margin-right:4px;\" class=\"fa fa-retweet\"></i> page</p> \


<hr> \


<a href=\"\" target=\"_BLANK\" >Title</a> \


<hr>";


// Fetch comments for the sleuth


var sleuthToken = data[i].token;


$.ajax({


url: "php/handle_community_fetch_sleuth_comments.php",


method:"POST",


dataType: "json",


data:{token:sleuthToken}


}).done(function( commentData ) {


if(data.length >= 1)


{


html += "<div class=\"comments\" style=\"overflow-y:scroll;max-height:24em;\">";


for(i = 0; i<data.lenght; i++)


{


html += "<div class=\"comment\">" +


"<h5><b>USERNAME</b></h5>" +


"<p>COMMENT</p>" +


"<a href=\"php/handle_like_sleuth_comment.php?token=&username=&page=community\"><i style=\"margin-right:6px;\" class=\"fa fa-thumbs-o-up\"></i></a><b style=\"margin-left:8px;\">LIKES</b>" +


"</div>";


}


html += "</div>";


} 


// End fetch comments ajax


});


html += "<hr> \


<form method=\"POST\" action=\"php/handle_comment_sleuth.php\"> \


<textarea rows=\"4\" style=\"width:100%;\" name=\"comment\"></textarea> \


<input type=\"hidden\" name=\"token\" value=\"TOKEN\" /> \


<input type=\"hidden\" name=\"username\" value=\"USERNAME\" /> \


<input style=\"float:right;margin-top:8px;\" class=\"post-button btn btn-primary\" type=\"submit\" value=\"POST\" /> \


</form> \


<div style=\"clear:both;\"></div> \


</div></div>";


}


// End fetch sleuths ajax


});


alert(html);


// END Fetch Function


};


this.return_id = function()


{


return this.lastID;


};


}

Код (разметка):

Я вижу две потенциальные проблемы. Во-первых, похоже, что есть по крайней мере одно слово с ошибкой, которое необходимо исправить. Во-вторых, похоже, что вы выполняете два цикла, один внутри другого, с одинаковым именем переменной.

Как правило, такие циклы не будут работать должным образом.

Используйте разные имена переменных для вложенных циклов.

Эй, спасибо, я получил комментарии. У меня новая проблема. Я хотел бы добавить событие клика к динамической кнопке. Я попробовал все. Вот мой JS.

 <div title="'.$final[$key]['ID'].'" class="sleuth" token="'.$final[$key]['token'].'">


<img class="img-circle" src="images/profile.jpg" height="34" width="34" />


<span><b>'.$final[$key]['username'].'</b> > '.$final[$key]['type'].'</span><br><br>


<p class="sleuth-text">'.$final[$key]['description'].'</p>


<p style="margin-top:12px;">


<a href="php/handle_like_sleuth.php?token='.$final[$key]['token'].'&username='.$final[$key]['username'].'&page=community"><i style="margin-right:6px;" class="fa fa-thumbs-o-up"></i></a> '.$final[$key]['likes'].'<b style="margin-left:8px;"></b>


<i style="margin-left:12px;" class="fa fa-comment-o"></i> <span id="commentscount'.$final[$key]['token'].'">'.$count.'</span>


<i style="margin-left:12px; margin-right:4px;" class="fa fa-retweet"></i> repost


<i style="margin-left:12px; margin-right:4px;" class="fa fa-retweet"></i> page</p>


<hr>


<a href="'.$final[$key]['link'].'" target=\"_BLANK\" >'.$final[$key]['title'].'</a>


<hr>


<div id="'.$final[$key]['token'].'" token="'.$final[$key]['token'].'" last="0" class="comments" style="overflow-y:scroll;max-height:24em;"></div>


<hr>


<textarea rows="4" style="width:100%;" name="comment"></textarea>


<input type="hidden" name="token" value="'.$final[$key]['token'].'" />


<input type="hidden" name="username" value="'.$final[$key]['username'].'" />


<input type="hidden" name="page" value="community" />


<button token="'.$final[$key]['token'].'" style="float:right;margin-top:8px;" class="btn btn-primary commentsubmit">POST</button>


<div style="clear:both;"></div>


</div>

Код (разметка): HTML-код, скопированный из php.

 $(function(){ communityObj = new Community(); communityObj.resetID(); communityObj.fetch_first(); $('.sleuth').on("click", "button.commentsubmit" , function() { alert('clicked'); }); }); 

Код (разметка):

Первое, что я хотел бы сделать, — это упростить правила именования.

У вас слишком много имен функций и переменных, очень похожих друг на друга, что затрудняет отслеживание кода и очень легко их неправильно разместить или написать с ошибкой.

Вы исправили предыдущее слово(а) с ошибкой, но есть одно или несколько новых слов, которые необходимо исправить.

Спасибо ребята.

Цените комментарии.

Мне удалось заставить это работать частично.

Я пытаюсь это исправить, связав ajax с помощью обещаний.

Мне нужно четыре вызова ajax, один за другим.

Именно в таком порядке: они начинаются тогда, когда заканчиваются предыдущие.

Мои сообщения выходят, но, несмотря на то, что php возвращает три, шесть зацикливаются. Вот новый код, пытающийся использовать $.when.

Насколько я знаю, его никогда не вызывают.

Нет никакого оповещения.

Кроме того, циклы html должны быть помещены в if, перебирая индекс 0 в .done, верно? Также в основном пользовался советами Popsicle.

Только не длинная строка html

 


var fetchSleuth = $.ajax({


method:"POST",


url: "php/handle_community_scroll_sleuths.php",


dataType: "json"


}).done(function( data ) {


for(i = 0; i <= data.length; i++)


{


html += '<div class="sleuth"> \


<img class="img-circle" src="imagesprofile.jpg" height="34" width="34" /> \


<span><b>'+data[i].username+'</b> > '+data[i].type+'</span><br><br> \


<p class="sleuth-text">'+data[i].description+'</p> \


<p style="margin-top:12px;"> \


<a href="php/handle_like_sleuth.php?token="+data[i].token+"&username="+data[i].username+"&page=community"><i style="margin-right:6px;" class="fa fa-thumbs-o-up"></i></a> '+data[i].likes+'<b style="margin-left:8px;"></b> \


<i style="margin-left:12px;" class="fa fa-comment-o"></i> <span id="commentscount'+data[i].token+'"></span> \


<i style="margin-left:12px; margin-right:4px;" class="fa fa-retweet"></i> repost \


<i style="margin-left:12px; margin-right:4px;" class="fa fa-retweet"></i> page</p> \


<hr> \


<a href="'+data[i].link+'" target="_BLANK" >'+data[i].title+'</a> \


<hr> \


<div id="'+data[i].token+'" class="comments" style="overflow-y:scroll;max-height:24em;"></div>';


// Fetch comments for the sleuth


html += '<hr> <form method="POST" action="php/handle_comment_sleuth.php"> \


<textarea rows="4" style="width:100%;" name="comment"></textarea> \


<input type="hidden" name="token" value="TOKEN" /> \


<input type="hidden" name="username" value="USERNAME" /> \


<input style="float:right;margin-top:8px;" class="btn btn-primary" type="submit" value="POST" /> \


</form> \


<div style=\"clear:both;\"></div> \


</div>';


$('#sleuthswrapper').append(html);


} 


// End fetch sleuths ajax


}),


fetchSleuthCommentCount = $.ajax({


url: "php/handle_fetch_sleuth_comment_count.php",


method:"POST",


// dataType: "html",


data:{token:sleuthToken}


}).done(function( commentsCountData ) {


$('#commentscount' + sleuthToken).append(commentsCountData);


}),


fetchSleuthComments = $.ajax({


url: "php/handle_community_fetch_sleuth_comments.php",


method:"POST",


dataType: "json",


data:{token:sleuthToken}


}).done(function( commentData ) {


if(data.length >= 1)


{


for(i = 0; i<commentData.length; i++)


{


var commentHtml = '<div class="comment"> \


<h5><b>'+commentData[i].username+'</b></h5> \


<p>'+commentData[i].comment+'</p> \


<a href="php/handle_like_sleuth_comment.php?token='+commentData[i].token+'&page=community"><i style="margin-right:4px;" class="fa fa-thumbs-o-up"></i></a><span>'+commentData[i].likes+' likes</span> \


</div>';


$('#'+sleuthToken).append(commentHtml);


}


selfObj.fetch_comment_comments_count(sleuthToken);


} 


// End fetch comments ajax


}),


fetchSleuthCommentCommentsCount = $.ajax({


url: "php/handle_fetch_sleuth_comment_count.php",


method:"POST",


// dataType: "html",


data:{token:sleuthToken}


}).done(function( commentsCountData ) {


$('#commentscount' + sleuthToken).append(commentsCountData);


});


$.when(fetchSleuth, fetchSleuthCommentCount, fetchSleuthComments, fetchSleuthCommentCommentsCount).done(function(sleuthData, sleuthCommetnsCountData, sleuthCommentsData, sleuthCommentCommentsCountData){


alert('done');


});

Код (разметка):

Есть несколько проблем, в том числе лишние обратные слэши в последнем html-блоке.



Кстати, заключите HTML в одинарные кавычки вместо двойных, и вам не нужно будет экранировать каждую двойную кавычку внутри HTML (вместо этого вам нужно будет экранировать одинарные кавычки, но это намного менее агрессивно). Кроме того, лучше, чем использовать + или любое другое объединение, просто напишите HTML, а затем удалите лишние разрывы строк/пробелы - т. е. создайте целый HTML-блок без разрывов строк и тому подобного, что сэкономит вам немного кода и сделает его немного проще убедиться, что ваша переменная действительно содержит то, что вы хотите.