1

When I click on my button I it can refresh div once fine but if I go to click it again will not refresh div.

I have to reload page by clicking on F5

Question: How ever many times I decied to click on my button How can make it to be able to refresh the #rep div?

success: function(response){
    if (response.success == true) {
        //window.location.reload();
        $('#rep').load(window.location.href + ' #rep');
    } 
}

Full Script

<script type="text/javascript">
$(document).ready(function() {
    $('#vote-up-icon').on('click', function(e) {
        e.preventDefault();
        $.ajax({
            url: "<?php echo base_url('thread/voteup/');?><?php echo $thread_id;?>",
            type: 'post',
            dataType: 'json',
            data: {
                voteup: $(this).parent().find('#vote_up').val()
            },
            success: function(response){
                if (response.success == true) {
                    //window.location.reload();
                    $('#rep').load(window.location.href + ' #rep');
                } 
            }  
        });
    });
});     
</script>

HTML

<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 text-center">
<div id="rep">

<div class="form-group">
<i class="fa fa-chevron-up fa-2x" id="vote-up-icon" aria-hidden="true" style="cursor: pointer;"></i>
<input type="hidden" name="vote_up" id="vote_up" value="1" />
</div>

<div class="form-group" class="votes">
<?php echo $thread_votes;?>
</div>

<div class="form-group">
<i class="fa fa-chevron-down fa-2x" id="vote-down-icon" aria-hidden="true" style="cursor: pointer;"></i>
<input type="hidden" name="vote_down" id="vote_down" value="0" />
</div>

</div>
</div>
  • 1
    The problem is that you add `#rep` to your URL. If you are already on a page and then load an anchor (`#...`) it won't refresh the page, but it will follow the "in page" link. – GreyRoofPigeon Oct 12 '16 at 11:44
  • Take a look at http://stackoverflow.com/questions/10612438/javascript-reload-the-page-with-hash-value – Isaac Oct 12 '16 at 11:45
  • 2
    This will happen if `vote-up-icon` is a child of `rep` – Satpal Oct 12 '16 at 11:46
  • 1
    ***⇑⇑⇑*** Ya, you'd need to delegate click event – A. Wolff Oct 12 '16 at 11:46
  • @wolfgang1983 happy to help. Currently lying in bed on my phone browsing SO... – Isaac Oct 12 '16 at 11:50
  • @Isaac But this has nothing to do with OP's issue... ;) – A. Wolff Oct 12 '16 at 11:51
  • Im on my phone, i saw hash urls, something about not loading correctly, was thinking "maybe its not reloading cos its already loaded the anchor" – Isaac Oct 12 '16 at 11:52
  • @Isaac, I would suggest you to get off phone and have a sound sleep :), just a banter – Satpal Oct 12 '16 at 11:53
  • Its too late for sleep :( – Isaac Oct 12 '16 at 11:54
  • I'm quite sure this would result in dupe IDs: `$('#rep').load(window.location.href + ' #rep')` because it means set `#rep` content as `#rep` element. So e.g: `
    `. I'm never sure if `load()` and fragment URL load targeted element content or element itself BUT the doc suggests it is loading element itself: http://api.jquery.com/load/#loading-page-fragments     – A. Wolff Oct 12 '16 at 11:54
  • I have added the HTML section –  Oct 12 '16 at 11:56
  • 1
    So try: `$('#rep').on('click', '#vote-up-icon', function(e) {...});` and be sure you aren't generate invalid HTML markup with duplicate IDs, see my previous comment. In your case it would be: `$('#rep').parent().load(window.location.href + ' #rep');` – A. Wolff Oct 12 '16 at 11:57
  • Use `delegate` instead of `on` – MAZux Oct 12 '16 at 11:59
  • @MAZux No, `on()` is preferred, `delegate` is deprecated – A. Wolff Oct 12 '16 at 11:59
  • @A.Wolff I think you way worked the best –  Oct 12 '16 at 12:00
  • @wolfgang1983 Feel free to post it as answer – A. Wolff Oct 12 '16 at 12:01

1 Answers1

1

Solution

Thanks to A. Wolff and every one else

<script type="text/javascript">
$(document).ready(function() {
    $('#rep').on('click', '#vote-up-icon', function(e) {
        e.preventDefault();
        $.ajax({
            url: "<?php echo base_url('thread/voteup/');?><?php echo $thread_id;?>",
            type: 'post',
            dataType: 'json',
            data: {
                voteup: $(this).parent().find('#vote_up').val()
            },
            success: function(response){
                if (response.success == true) {
                    $('#rep').load(window.location.href + ' #rep');
                } 
            }  
        });
    });
});     
</script>
Community
  • 1
  • 1