Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

JQuery/AJAX problem

1
Skriv svar
Permalänk
Medlem
●

JQuery/AJAX problem

Morn

Sitter här med ett ganska stor javascript/jquery, ska pröva förklara så gott jag kan.

Det är i princip en facebookvägg, alltså man kan skriva poster och kommentera på poster.
Allt "fungerar" i princip men ett stort problem har uppstått, jag har allt som händer med jquery/ajax i en stor "LoadMe" funktion som körs först när document.ready, sen i slutet av den när den gjort allt så setter jag en windows.setTimeout(LoadMe, 2000)

Alltså den kör samma funktion igen som när den laddat klart sidan, har en del checkar så den kastar med högsta ID för poster och kommentarer och hämtar in nyare och det fungerar, det som inte fungerar är att för varje gång den kör LoadMe, vart annat sekund, så bindar den om submits, alltså skriver man en kommentar så postas den kommentaren X antal gånger beroende på hur länge man varit inne på sidan.

Har experimenterat lite med .live() .off().on() men inget som riktigt fungerar...

Är det någon som har stött på liknande problemer med "auto-refresh" och submit som "stackar" och som har en lösning på detta?

Väldigt tacksam för svar och förklaringar! 

$.ajaxSetup({
    cache: false
});

$(document).ready(LoadMe);

function LoadMe() {


    $('.wall-new-post-input').off().on('focus', function() {
        if ($(this).val() === 'write something') {
            $(this).val('');
        }
    }).blur(function() {
        if ($(this).val() === "") {
            $(this).val('write something');
        }
    });

    var highest = 0, this_id;
    $(".wall-new-comment").each(function(i, v) {
        this_id = parseInt($(this).attr('id'));
        if (this_id > highest) {
            highest = this_id;
        }
    });

    $.get('index/xhrFetchComments/' + highest, function(o) {
        for (var i = 0; i < o.length; i++) {

            if (o[i].commentid > highest)
                highest = o[i].commentid;

            var delBtn = '';

            $('#msg' + o[i].messageid).append(
                    '<div id="' + o[i].commentid + '" class="wall-new-comment">' +
                    '<div class="fleft" style="width: 390px;">' +
                    '<span class="actorPhoto">' +
                    '<img class="profilePicMini" src="' +
                    'avatar.gif"' +
                    ' />' +
                    '</span>' +
                    '<p> <span class="actorName"><a href="sip:' + o[i].mail + '">' +
                    o[i].fullname + '</a></span></p><p> ' +
                    o[i].comment +
                    '</p>' +
                    '<span class="comment-margin">' + o[i].created + ' · ' + '' + o[i].location + '</span>' +
                    '</div>' +
                    '<div class="fright rBtn">' +
                    delBtn +
                    '</div>' +
                    '</div>'
                    );
        }

    }, 'json');

    $('.wall-new-comment').off().on('submit', function() {
        var url = $(this).attr('action');
        var data = $(this).serialize();

        $.post(url, data, function(o) {

            $('#input' + o.messageid).val(''); // clear input field

            // append a new div element with new comment
            $('<div id="' + o.commentid + '" class="wall-new-comment ' + admincolor + '">' +
                    '<div class="fleft" style="width: 390px;">' +
                    '<span class="actorPhoto">' +
                    '<img class="profilePicMini" src="' +
                    'avatar.gif"' +
                    ' />' +
                    '</span>' +
                    '<p> <span class="actorName"><a href="sip:' + o.mail + '">' +
                    o.fullname + '</a></span></p><p> ' +
                    o.comment +
                    '</p>' +
                    '<span class="comment-margin">' + o.created + ' · ' + '' + o.location + '</span>' +
                    '</div>' +
                    '<div class="fright rBtn">' +
                    '<a href="#" rel="' +
                    o.commentid +
                    '" class="del">X</a>' +
                    '</div>' +
                    '</div>').hide().appendTo('#msg' + o.messageid).fadeIn(1000);
        }, 'json');

        return false;
    });

    $('.wall-new-post').live('submit', function() {

        var url = $(this).attr('action');
        var data = $(this).serialize();


        // Send post to var url
        $.post(url, data, function(o) {
            $(o.data).hide().prependTo("#wallItems").fadeIn(1000);
        }, 'json');

        $('.wall-new-post-input').val('write something');

        return false;
    });

    window.setTimeout(LoadMe, 2000);
}
Senast redigerat lite kod snippet
Redigera
Citera flera Citera
Permalänk
Inaktiv
●

Dela upp din kod?

Redigera
Citera flera Citera
Permalänk
Medlem
●

Hmm den er ganska lång, och en del konfidentiell information, kan pröva ta ut en snippet om det hjälper brb

Redigera
Citera flera Citera
Permalänk
Inaktiv
●

Menade mer att du verkligen ska dela upp din kod, inte dela med dig av den. De bitar som du endast vill ska köras en gång, lägg dom så dom endast körs en gång.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av anon150287:

Dela upp din kod?

Gå till inlägget

dela lite av koden i huvudposten, hoppas det hjälper att förstå problemet

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av anon150287:

Menade mer att du verkligen ska dela upp din kod, inte dela med dig av den. De bitar som du endast vill ska köras en gång, lägg dom så dom endast körs en gång.

Gå till inlägget

Ja ok missförstod lite, jo måste nog pröva det...

Det som ska reloadas är väl om det kommit nya post sen sista gång den reloada, men om det har det så måste jag binda events till dem nya posterna och då blir det lite förvirrande hur jag ska dela upp det, men om det inte går på något annat sätt så blir det att pröva den lösningen

Redigera
Citera flera Citera
Permalänk
Medlem
●

Som havsmonstret sa borde du dela upp koden. Du får väl göra en metod som binder alla events till noderna, sen anropa den metoden efter att du lagt till en ny kommentar.
Du borde också komma på en bättre lösning än att skriva ut all markup som en sträng.
Liten sak jag stör mig på: Funktionsnamn som börjar med versal antyder att det är en konstruktor och att man ska använda nyckelordet "new" framför.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Yxskaftet:

Som havsmonstret sa borde du dela upp koden. Du får väl göra en metod som binder alla events till noderna, sen anropa den metoden efter att du lagt till en ny kommentar.
Du borde också komma på en bättre lösning än att skriva ut all markup som en sträng.
Liten sak jag stör mig på: Funktionsnamn som börjar med versal antyder att det är en konstruktor och att man ska använda nyckelordet "new" framför.

Gå till inlägget

Har nu delat upp koden som han sa, fungera bra det

Det med markup som en sträng, har inte ännu fixat det på nya comments, på nya poster så returneras hela text strängen med markup i ajax kallet från PHP'n och så skal det bli på allt så att ingen markup finnes i JS filen

Att funktionsnamnet borde starta med liten bokstav har du helt klart rätt i och det är ändrat nu!

Nu kommer nästa challenge för att detta ska bli "klart nog", poster som är raderade i databasen vill ju inte tas bord utan att ladda om sidan... någon som har ett bra förslag? Tänker först att slänga med alla ID's istället för bara det högsta på alla poster som är skrivet ut på sidan, kommer aldrig vara fler än 10 stk, men vet inte helt hur jag ska hantera det i PHP, vad ska returneras, vill inte ta bort alla post och ladda in dem på nytt för då upplever man ett blinkande på sidan...

Redigera
Citera flera Citera
Permalänk
Avstängd
●

Kan vara det värsta exemplet jag sätt på koppling mellan logik och vy...

Visa signatur

Min blogg

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av CyberVillain:

Kan vara det värsta exemplet jag sätt på koppling mellan logik och vy...

Gå till inlägget

Haha ja det kan jag hålla med om, var bara enklare att göra det så medans jag fick det att fungera, nu håller jag på flytta över markupen till PHP delen som kallas med AJAX så att den bygger upp det og returnerar hela skiten

Redigera
Citera flera Citera
Permalänk
Medlem
●

Om det inte löser sig finns det ett ramverk jag vet en del använder för att åstadkomma just detta. www.pusher.com

Redigera
Citera flera Citera
Permalänk
Avstängd
●

Kolla på Knockout, Angular, Backbone etc, de hjälper dig bryta ut logik och vy i två lager

Visa signatur

Min blogg

Redigera
Citera flera Citera
Permalänk
Medlem
●

Jo har sett på en del rammeverk men tingen är att jeg är väldigt begrensad till vad jag kan använda. Detta är då inte till privat bruk.
Men nu har jag brutit upp koden och saker och ting ser bra ut och fungerar som förväntat

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av python_ormen:

Nu kommer nästa challenge för att detta ska bli "klart nog", poster som är raderade i databasen vill ju inte tas bord utan att ladda om sidan... någon som har ett bra förslag? Tänker först att slänga med alla ID's istället för bara det högsta på alla poster som är skrivet ut på sidan, kommer aldrig vara fler än 10 stk, men vet inte helt hur jag ska hantera det i PHP, vad ska returneras, vill inte ta bort alla post och ladda in dem på nytt för då upplever man ett blinkande på sidan...

Gå till inlägget

Det är väl bara att returnera om det gick vägen eller inte att ta bort kommentaren från databasen.
Om det gjorde det är det väl att bara gömma kommentaren?

Redigera
Citera flera Citera
Permalänk
Medlem
●

Jepp allt sånt fungerar nu, nästa ting på listan blev ju direkt problem.... Nu ska jag ha bilduppladdning för poster.
Vet at det inte går som det är nu utan jag måste använda ajaxForm, utan att blande in filuppladdning så blir det problem med att den "submittar". Alltså att den går vidare till index/xhrInsertPost som då blir en blank sida med json objectet som skrivs ut...

Någon som jobbat med ajaxForm som har någon idè? 

$('.wall-new-post').ajaxForm({
    dataType: 'json',
    beforeSubmit: function() {

    },
    success: function(o) {
        $(o.data).hide().prependTo("#wallItems").fadeIn(1000);
    }
});
Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av python_ormen:

Jepp allt sånt fungerar nu, nästa ting på listan blev ju direkt problem.... Nu ska jag ha bilduppladdning för poster.
Vet at det inte går som det är nu utan jag måste använda ajaxForm, utan att blande in filuppladdning så blir det problem med att den "submittar". Alltså att den går vidare till index/xhrInsertPost som då blir en blank sida med json objectet som skrivs ut...

Någon som jobbat med ajaxForm som har någon idè? 

$('.wall-new-post').ajaxForm({
    dataType: 'json',
    beforeSubmit: function() {

    },
    success: function(o) {
        $(o.data).hide().prependTo("#wallItems").fadeIn(1000);
    }
});
Gå till inlägget

Denna funktion kanske kan vara till hjälp, tror den ska gå att använda i detta fall.

http://api.jquery.com/event.preventDefault/

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av BuruZ:

Denna funktion kanske kan vara till hjälp, tror den ska gå att använda i detta fall.

http://api.jquery.com/event.preventDefault/

Gå till inlägget

Har prövat den överallt utan att det blir någon skillnad.. fan. tack för hjälp i alla fall

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Skicka innehållet med ajax till en fil som accepterar det.

Typ så här:

function postForm(url, params, successFunc, faildFunc) {
    $.ajax({
        type: "POST",
        url: url,
        data: params,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: successFunc,
        error: faildFunc
    });
}

function getParametersForSendMessage() {
	var userListForMail = getCheckedUsersForSendMessage();
	var replyId = getReplyIdIfExist();
	var subject = $("#tbSendMessageSubject").val();
	var subject = $("#taSendMessageBody").val();
	var cbSendSms = $("#cbSendAsSms").is(":checked");

	var params = "{recipients: " + JSON.stringify(userListForMail) + ", replyId: '" + replyId + "', subject: '" + subject + "', body: '" + body + "', cbSendSms: " + cbSendSms + "}";
	
	return params;

}

function submitSendMessageForm()
{
		

		var params = getParametersForSendMessage();
		var url = "SendMessage.aspx/SendMail";
		
		
        postForm(url, params,
            function (data) {
				if(data && data.d) {
					var dia = $("#dialog_popupSendMsg");
					Dialog.close(dia);
					showStatusPopup('Meddelande skickat!', 'Ditt meddelande till är nu skickat', false);
					$("#SendButtonLoader").hide();
					$("#divSendAsAjaxButton").show();
				} else {
					showStatusPopup('Meddelande fel!', 'Något gick fel! Meddelande kunde inte skickas!', true);
				}
            },
            function () {
                showStatusPopup('Meddelande fel!', 'Något gick fel! Meddelande kunde inte skickas!', true);
            }
        );
}
Redigera
Citera flera Citera
Permalänk
Medlem ★
●

I översta exemplet har du använd on och off fel.

Ungefär så här använder man det:

function doStuffOnBind() {
// do stuff
}


// on page load we bind
$(function() {

	$("#button").on("click", doStuffOnBind);

	// If we bind like this, we cannot unbind this specific function

	$("#button").on("click", function(e, ui) {
		doStuffOnBind(e, ui);
	});

});

	// If we wanna unbind "doStuffOnBind" from #button

	$("#button").off("click", doStuffOnBind);

	// If we wanna unbind all click events from #button

	$("#buton").off("click");
Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara