1

After ajax load of html content I need to scroll to specific element. The element has attr data-event-id="" But sometimes this variable $('.timelineToolPanel[data-event-id="'+id+'"]').offset().top; returns 0. Whole ajax code is: 

function refreshContent(id)
{
    var scrollNumber = 0;

    $.ajax({
        type: 'POST',
        url: '<?php echo Yii::app()->createAbsoluteUrl("user/ajaxEventLoad"); ?>',
        dataType:'html',
        success:function(data){
            $("#eventListBlock").empty().append(data);
            if(id!=null) {
                console.log(id);
                scrollNumber = $('.timelineToolPanel[data-event-id="'+id+'"]').offset().top;
                console.log(scrollNumber);
                $("html, body").animate({
                    scrollTo: scrollNumber
                }, 1000, function() {
                    // alert("Finished animating");
                });
            }
        },
        error: function(data) { // if error occured
            alert("Error occured. please try again");
        }
    });
}

and html:

    <div id="eventListBlock">
            <?
            $this->renderPartial('/windows/timelineWindow', array(
                'dataProvider'=>$dataProvider
            ));
            ?>
        </div>

with rendering this part:

<div class="cd-timeline-block">
    <div class="cd-timeline-icon" style="background: <? echo $data->color ?>">
        <i class="fa fa-<? echo $data->icon ?>"></i>
    </div>

    <div class="cd-timeline-content">
        <div class="timelineToolPanel" data-event-id="<? echo $data->id ?>">
            <i class="fa fa-pencil timelineToolPanelEdit"></i>
            <i class="fa fa-trash timelineToolPanelDelete"></i>
        </div>

        <h2><? echo $data->title ?></h2>
        <p><? echo $data->content ?></p>
        <span class="cd-date"><? echo date("d. m. Y", strtotime($data->date_event)); ?></span>
    </div>
</div>

where #eventListBlock is fixed container.

Jean Sapharick
  • 47
  • 1
  • 7

1 Answers1

3

custom attributes in html have to be defined with "data-*", otherwise it won't work.

http://www.w3schools.com/tags/att_global_data.asp

name your attr in "data-event-id=" and it should do the job, even when i have not proofed the JS code :D

messerbill
  • 5,499
  • 1
  • 27
  • 38
  • ok, that's first problem :D but still it is not working.. **scrollNumber** returns 0 and scrolling is as well broken.. – Jean Sapharick Jun 25 '15 at 10:36
  • and i think you need scrollTo() as well - http://stackoverflow.com/questions/1144805/how-do-i-scroll-to-the-top-of-the-page-with-jquery – messerbill Jun 25 '15 at 10:53
  • But it behaves oddly.. sometimes it returns 0, sometimes 100 or 200.. I thought that offset().top is height from top of page to element.. – Jean Sapharick Jun 25 '15 at 10:54
  • 1
    yes it does, i think you should post more of your code. I need the HTML and the complete Ajax. Please update your question to post the code – messerbill Jun 25 '15 at 10:59
  • i've just had an idea...do you want the script always to scroll to the top of the page? – messerbill Jun 25 '15 at 13:31
  • After calling refreshContent() I need to scroll from current position to element with data-element-id with specific id.. – Jean Sapharick Jun 25 '15 at 13:35
  • and if this is NOT always at the top of the page, it's clear that scrollNumber is not the same everytime Oo - what do i not get? :D – messerbill Jun 25 '15 at 13:37
  • http://www.saveimg.com/J3KX here is printscreen.. It's simple timeline with button for create a new one in top.. so.. I can add new even everywhere at timeline and offset will be different (according to date of the event) – Jean Sapharick Jun 25 '15 at 13:51
  • ah sry, i really just saw it now...try scrollNumber = $('.timelineToolPanel[data-event-id="'+id+'"]').first().offset().top; - the jquery class selector returns an array becuase there could be several classes with the same classname – messerbill Jun 25 '15 at 14:05
  • no changes.. still returns 0 (scrollNumber).. but the elements really exists.. I checked it now.. – Jean Sapharick Jun 25 '15 at 14:13
  • $('.timelineToolPanel[data-event-id="'+id+'"]').first() returns the correct element? – messerbill Jun 25 '15 at 14:15
  • yes... It does. It returns one of parameters: **selector: ".timelineToolPanel[data-event-id="95"]"** – Jean Sapharick Jun 25 '15 at 15:21