Il file js.erb è in esecuzione due volte. Ruby on Rails - private_pub

Question

Sto lavorando al modulo chating. Per quello ho usato private_pub gem. In questo modulo ho realizzato tre canali, ma non posso menzionarli tutti qui, perché mostrerà una pagina molto, molto grande. Quindi atteniamoci a un canale.

clicco su un link con il canale "<%= subscribe_to "/conversations/send_invitation" %>" e poi ajax opere e va a "conversations/send_invitation" (solo una volta - che è ok) e nel mio "/conversations/send_invitation" ho

def send_invitation 
@conversation = Conversation.new(conversation_params) 
respond_to do |format| 
format.js { render :layout => false } 
format.html 
end 
end 

e poi nella mia send_invitation.js.erb file che ho il seguente

<% publish_to "/conversations/send_invitation" do %> 
var recipient_id = "<%=@conversation.recipient.id %>"; 
var current_temp_user = $("#current_temp_user").val(); 

if(recipient_id == current_temp_user){ 
console.log('here') 
$("#invitation_div").html("<%=j(render :partial => '/restaurants/invitation')%>"); 
    card_modal = $('#invitation_card').modal(); 
    card_modal.modal('show'); 
} 
<% end %> 

Ecco il mio file application.js

//= require jquery 
// require jquery-ui 
//= require jquery_ujs 
// require turbolinks 
//= require bootstrap 
//= require jquery.raty 
//= require private_pub 
//= require_tree . 

E le visualizzazioni modali a recipient side (che è buono).

Ora il problema è che posso vedere due modal con il same id nel mio firefox console/html. E lo buttons per closing/submit il modal ha smesso di funzionare. Anche il console.log nel mio file send_invitation.js.erb ha mostrato due volte il risultato console.log, quindi è chiaro che il file js.erb è in esecuzione due volte. Ma il punto da notare è che ajax ha funzionato solo una volta. Ho sprecato paio di ore su di esso e solo This link trovato che, inoltre, non ha funzionato per me, perché quando rimuovo sia jquery.js o jquery_ujs.js mi dà errori

Answer 1

non riuscivo a trovare una soluzione, ma ho pensato che Sarebbe utile che qualcuno informasse sul problema.

Nel mio caso il problema era che stavo creando due canali sulla stessa pagina, ecco perché stava facendo due volte l'handshake con il thin server.

Nota Ma in un caso generico può verificarsi anche se abbiamo incluso il file js due volte.

Answer 2

Con $(document).on('keydown', '.chatboxtextarea', function (event){....}); il mio oggetto messaggio è stato creato una sola volta, ma è stato visualizzato più volte in base a quante volte sono tornato alla pagina con i turbolink senza ricaricare la pagina intera. Per aggirare questo problema nel file js.erb ho aggiunto event.handled per controllare se è già stato aggiunto un partial.

application.js il file

//= require jquery 
//= require jquery-ui 
//= require jquery_ujs 
//= require turbolinks 
//= require jquery.remotipart 
//= require chat 
//= require refile 
//= require bootstrap-sprockets 
//= require private_pub 
//= require local_time 
//= require moment 
//= require fullcalendar 
//= require bootstrap-datetimepicker 
//= require_tree . 

js

//submitting chat message (it's OUTSIDE $(document).on('page:change'..) 
//bind submit to document --> not affected by turbolinks 
$(document).on('keydown', '.chatboxtextarea', function (event) { 
    var id = $(this).data('cid'); 
    checkInputKey(event, $(this), id); 
}); 

function checkInputKey(event, chatboxtextarea, conversation_id) { 
    if (event.keyCode == 13 && event.shiftKey == 0) { 
    event.preventDefault(); 

    //checking if field is empty and submitting the form 
    message = chatboxtextarea.val(); 
    message = message.replace(/^\s+|\s+$/g, ""); 
    if (message != '') { 
     $('#conversation_form_' + conversation_id).submit(); 
    } 
    } 
} 

forma html.erb

<div class="chatboxinput"> 
    <%= form_for([@conversation, @message], :remote => true, :html => {id: "conversation_form_#{@conversation.id}"}) do |f| %> 
    <%= f.text_area :body, class: "chatboxtextarea", "data-cid" => @conversation.id %> 
    <% end %> 
</div> 
...... 
<%= subscribe_to conversation_path(@conversation) %> 

_message.html.erb

<li class="<%= self_or_other(message) %>"> 
    <div class="chatboxmessagecontent"> 
    <p> 
     <%= message.body %> 
    </p> 
    </div> 
</li> 

create.js.erb

<% publish_to @path do %> 
    var id = "<%= @conversation.id %>"; 
    var chatbox = $(".chatboxcontent"); 
    var lastMessage = chatbox.children().last(); 

    //with this one message will be displayed only once 
    if(event.handled !== true) { 

    $message = $('<%= j render @message %>'); 
    chatbox.append($message); 
    chatbox.scrollTop(chatbox[0].scrollHeight); 

    //for displaying incoming and outgoing messages differently 
    if(sender_id != receiver_id) { 
     chatbox.children().last().removeClass("self").addClass("other"); 
     chatbox.scrollTop(chatbox[0].scrollHeight); 
    } 

    event.handled = true; 
    }; 
<% end %> 

Answer 3

Utilizzare il metodo unbind per rimuovere chiamate indesiderate/multiple da eseguire con i propri eventi. Questo farà il trucco. Ma la ragione dietro le chiamate multiple non è ancora chiara.

$("#foo").unbind("click", handler); 

Spero che sia d'aiuto.

Answer 4

Utilizzare questo gioiello invece

gem "private_pub", :git => 'https://github.com/ryleto/private_pub.git'