Auto refresh without reload entire page












10















I'm trying to update the content of "mydiv" without refreshing the entire index page.
@mydata is given by mycontroller. I need to recalculate it every n seconds and pass it to "mydiv"



With "link_to" it works!



index.html.erb



<%=
link_to('refresh', '/mycontroller/index', :remote => true)
%>

<div id="mydiv">
<%=
@mydata
%>
</div>


index.js.erb



$('#mydiv').html('<%= escape_javascript(@mydata) %>')


Now I need to refresh the content of "mydiv" automatically every n seconds (so without click on the link). I have tried solutions from:




  • First Link

  • Second Link


but no luck.



In my application.js I have writed this:



function executeQuery() {
$.ajax({
//url: '/index',
success: function(data) {
$('#mydiv').html(data)
}
});
setTimeout(executeQuery, 500);
}

$(document).ready(function() {
setTimeout(executeQuery, 500);
});




For who is facing my same problem, I solved it by replacing



$('#mydiv').html(data)


with



$('#mydiv').load('/mycontroller/index #mydiv')









share|improve this question

























  • shouldn't it be window.setTimeout(executeQuery, 500)?

    – My God
    Mar 7 '13 at 14:23











  • @SaurabhJain I think It's the same. It refresh but It returns all the page into "mydiv". I need to refresh only "mydata"

    – dp.carlo
    Mar 7 '13 at 14:28











  • You need to create a page that has only the contents you want instead of loading the complete page.

    – JJJ
    Mar 7 '13 at 14:39













  • @Juhana instead of using $('#mydiv').html(data), I have replaced it with $('#mydiv').load('/mycontroller/index #mydiv') and now it works!

    – dp.carlo
    Mar 7 '13 at 16:21
















10















I'm trying to update the content of "mydiv" without refreshing the entire index page.
@mydata is given by mycontroller. I need to recalculate it every n seconds and pass it to "mydiv"



With "link_to" it works!



index.html.erb



<%=
link_to('refresh', '/mycontroller/index', :remote => true)
%>

<div id="mydiv">
<%=
@mydata
%>
</div>


index.js.erb



$('#mydiv').html('<%= escape_javascript(@mydata) %>')


Now I need to refresh the content of "mydiv" automatically every n seconds (so without click on the link). I have tried solutions from:




  • First Link

  • Second Link


but no luck.



In my application.js I have writed this:



function executeQuery() {
$.ajax({
//url: '/index',
success: function(data) {
$('#mydiv').html(data)
}
});
setTimeout(executeQuery, 500);
}

$(document).ready(function() {
setTimeout(executeQuery, 500);
});




For who is facing my same problem, I solved it by replacing



$('#mydiv').html(data)


with



$('#mydiv').load('/mycontroller/index #mydiv')









share|improve this question

























  • shouldn't it be window.setTimeout(executeQuery, 500)?

    – My God
    Mar 7 '13 at 14:23











  • @SaurabhJain I think It's the same. It refresh but It returns all the page into "mydiv". I need to refresh only "mydata"

    – dp.carlo
    Mar 7 '13 at 14:28











  • You need to create a page that has only the contents you want instead of loading the complete page.

    – JJJ
    Mar 7 '13 at 14:39













  • @Juhana instead of using $('#mydiv').html(data), I have replaced it with $('#mydiv').load('/mycontroller/index #mydiv') and now it works!

    – dp.carlo
    Mar 7 '13 at 16:21














10












10








10


7






I'm trying to update the content of "mydiv" without refreshing the entire index page.
@mydata is given by mycontroller. I need to recalculate it every n seconds and pass it to "mydiv"



With "link_to" it works!



index.html.erb



<%=
link_to('refresh', '/mycontroller/index', :remote => true)
%>

<div id="mydiv">
<%=
@mydata
%>
</div>


index.js.erb



$('#mydiv').html('<%= escape_javascript(@mydata) %>')


Now I need to refresh the content of "mydiv" automatically every n seconds (so without click on the link). I have tried solutions from:




  • First Link

  • Second Link


but no luck.



In my application.js I have writed this:



function executeQuery() {
$.ajax({
//url: '/index',
success: function(data) {
$('#mydiv').html(data)
}
});
setTimeout(executeQuery, 500);
}

$(document).ready(function() {
setTimeout(executeQuery, 500);
});




For who is facing my same problem, I solved it by replacing



$('#mydiv').html(data)


with



$('#mydiv').load('/mycontroller/index #mydiv')









share|improve this question
















I'm trying to update the content of "mydiv" without refreshing the entire index page.
@mydata is given by mycontroller. I need to recalculate it every n seconds and pass it to "mydiv"



With "link_to" it works!



index.html.erb



<%=
link_to('refresh', '/mycontroller/index', :remote => true)
%>

<div id="mydiv">
<%=
@mydata
%>
</div>


index.js.erb



$('#mydiv').html('<%= escape_javascript(@mydata) %>')


Now I need to refresh the content of "mydiv" automatically every n seconds (so without click on the link). I have tried solutions from:




  • First Link

  • Second Link


but no luck.



In my application.js I have writed this:



function executeQuery() {
$.ajax({
//url: '/index',
success: function(data) {
$('#mydiv').html(data)
}
});
setTimeout(executeQuery, 500);
}

$(document).ready(function() {
setTimeout(executeQuery, 500);
});




For who is facing my same problem, I solved it by replacing



$('#mydiv').html(data)


with



$('#mydiv').load('/mycontroller/index #mydiv')






ruby-on-rails ajax ruby-on-rails-3






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited May 23 '17 at 10:29









Community

11




11










asked Mar 7 '13 at 14:18









dp.carlodp.carlo

342824




342824













  • shouldn't it be window.setTimeout(executeQuery, 500)?

    – My God
    Mar 7 '13 at 14:23











  • @SaurabhJain I think It's the same. It refresh but It returns all the page into "mydiv". I need to refresh only "mydata"

    – dp.carlo
    Mar 7 '13 at 14:28











  • You need to create a page that has only the contents you want instead of loading the complete page.

    – JJJ
    Mar 7 '13 at 14:39













  • @Juhana instead of using $('#mydiv').html(data), I have replaced it with $('#mydiv').load('/mycontroller/index #mydiv') and now it works!

    – dp.carlo
    Mar 7 '13 at 16:21



















  • shouldn't it be window.setTimeout(executeQuery, 500)?

    – My God
    Mar 7 '13 at 14:23











  • @SaurabhJain I think It's the same. It refresh but It returns all the page into "mydiv". I need to refresh only "mydata"

    – dp.carlo
    Mar 7 '13 at 14:28











  • You need to create a page that has only the contents you want instead of loading the complete page.

    – JJJ
    Mar 7 '13 at 14:39













  • @Juhana instead of using $('#mydiv').html(data), I have replaced it with $('#mydiv').load('/mycontroller/index #mydiv') and now it works!

    – dp.carlo
    Mar 7 '13 at 16:21

















shouldn't it be window.setTimeout(executeQuery, 500)?

– My God
Mar 7 '13 at 14:23





shouldn't it be window.setTimeout(executeQuery, 500)?

– My God
Mar 7 '13 at 14:23













@SaurabhJain I think It's the same. It refresh but It returns all the page into "mydiv". I need to refresh only "mydata"

– dp.carlo
Mar 7 '13 at 14:28





@SaurabhJain I think It's the same. It refresh but It returns all the page into "mydiv". I need to refresh only "mydata"

– dp.carlo
Mar 7 '13 at 14:28













You need to create a page that has only the contents you want instead of loading the complete page.

– JJJ
Mar 7 '13 at 14:39







You need to create a page that has only the contents you want instead of loading the complete page.

– JJJ
Mar 7 '13 at 14:39















@Juhana instead of using $('#mydiv').html(data), I have replaced it with $('#mydiv').load('/mycontroller/index #mydiv') and now it works!

– dp.carlo
Mar 7 '13 at 16:21





@Juhana instead of using $('#mydiv').html(data), I have replaced it with $('#mydiv').load('/mycontroller/index #mydiv') and now it works!

– dp.carlo
Mar 7 '13 at 16:21












1 Answer
1






active

oldest

votes


















0














Set layout to false in the action and just pass on the relevent content, not the entire page



def action1
<your code here>
end
def action2
<your code here>
render :layout => false
end


Your view for action2 should have content pertaining only to #mydiv.



A better solution would be to use a single action and change render options based on type of request. (Ajax or non ajax)






share|improve this answer



















  • 1





    This was solved 2 years ago. Answer is in my question.

    – dp.carlo
    Dec 10 '14 at 13:39











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f15273540%2fauto-refresh-div-without-reload-entire-page%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









0














Set layout to false in the action and just pass on the relevent content, not the entire page



def action1
<your code here>
end
def action2
<your code here>
render :layout => false
end


Your view for action2 should have content pertaining only to #mydiv.



A better solution would be to use a single action and change render options based on type of request. (Ajax or non ajax)






share|improve this answer



















  • 1





    This was solved 2 years ago. Answer is in my question.

    – dp.carlo
    Dec 10 '14 at 13:39
















0














Set layout to false in the action and just pass on the relevent content, not the entire page



def action1
<your code here>
end
def action2
<your code here>
render :layout => false
end


Your view for action2 should have content pertaining only to #mydiv.



A better solution would be to use a single action and change render options based on type of request. (Ajax or non ajax)






share|improve this answer



















  • 1





    This was solved 2 years ago. Answer is in my question.

    – dp.carlo
    Dec 10 '14 at 13:39














0












0








0







Set layout to false in the action and just pass on the relevent content, not the entire page



def action1
<your code here>
end
def action2
<your code here>
render :layout => false
end


Your view for action2 should have content pertaining only to #mydiv.



A better solution would be to use a single action and change render options based on type of request. (Ajax or non ajax)






share|improve this answer













Set layout to false in the action and just pass on the relevent content, not the entire page



def action1
<your code here>
end
def action2
<your code here>
render :layout => false
end


Your view for action2 should have content pertaining only to #mydiv.



A better solution would be to use a single action and change render options based on type of request. (Ajax or non ajax)







share|improve this answer












share|improve this answer



share|improve this answer










answered Dec 1 '14 at 13:38









Sushruth SivSushruth Siv

2518




2518








  • 1





    This was solved 2 years ago. Answer is in my question.

    – dp.carlo
    Dec 10 '14 at 13:39














  • 1





    This was solved 2 years ago. Answer is in my question.

    – dp.carlo
    Dec 10 '14 at 13:39








1




1





This was solved 2 years ago. Answer is in my question.

– dp.carlo
Dec 10 '14 at 13:39





This was solved 2 years ago. Answer is in my question.

– dp.carlo
Dec 10 '14 at 13:39




















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f15273540%2fauto-refresh-div-without-reload-entire-page%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

Ottavio Pratesi

Tricia Helfer

15 giugno