none
JavaScript in CEWP not working when changing page in list RRS feed

  • Question

  • I have a content editor webpart in my list that is incharge in resizing the size of the image of a Picture field.

    It works at first load, but once I started to go to the next page (31-60) the images becomes bigger, and when I go back to the 1st page (1-30) it now becomes big.

    I put an alert in my script to check if the javascript is still running when navigating to other pages in my view but its not running.

    How can I solve this?

    Friday, January 13, 2017 6:17 AM

Answers

  • Hi Ton, 

    This is because the DOM gets loaded and the document.ready is not  fired for pagination as Amol has mentioned. You can try couple of options.

    Option 1: Use the JS Link to resize the image Or write a simple Display template.

    Option 2: Use Styles, instead instead of script in the CEWP as below. Replace the "/Style" with some part of the image source, assuming all your images are stored in a single location.

    <style>
    img[src*="/Style"]{
    width:60px !important;
    }
    tr.ms-alternating{
    background-color:#EAEAEF;
    }
    </style>

    Please remember to mark the replies as answers if they help.

    Friday, January 13, 2017 2:00 PM

All replies

  • You can write the code on click on "back" and "forward" arrows of pagination from 1-30 and verify.

    Thank you.


    Amol C kadam

    Friday, January 13, 2017 11:39 AM
  • Hi Ton, 

    This is because the DOM gets loaded and the document.ready is not  fired for pagination as Amol has mentioned. You can try couple of options.

    Option 1: Use the JS Link to resize the image Or write a simple Display template.

    Option 2: Use Styles, instead instead of script in the CEWP as below. Replace the "/Style" with some part of the image source, assuming all your images are stored in a single location.

    <style>
    img[src*="/Style"]{
    width:60px !important;
    }
    tr.ms-alternating{
    background-color:#EAEAEF;
    }
    </style>

    Please remember to mark the replies as answers if they help.

    Friday, January 13, 2017 2:00 PM
  • Sorry for the late reply. was able to use JSLink before I read your answer. I referenced my js using JS Link. and it now works :)
    Friday, January 20, 2017 6:22 AM