javascript - Turbolinks - Showing datetimepicker only on Scheduled posts - hidden by default -


i'm having _form partial in oorder create/edit posts. form has dropdown setting post status, if user sets status scheduled datetimepicker shows in order select date, otherwise should hidden default (ie when status "draft" or "published").

# app/views/posts/_form.html.haml = simple_form_for ["admin", @post] |f|    = f.input :title    = f.input :status, collection: ["draft", "published", "scheduled"], selected: status_for(@post)    .published-field     = f.input :published_at, as: :date_time_picker  ...  # app/helpers/posts_helper.rb module postshelper   def status_for(post)     if post.published_at?       if post.published_at > time.zone.now         "scheduled"       else         "published"       end     else       "draft"     end   end end  # app/assets/javascripts/posts.coffee changevisibility = (status) ->   if status == "scheduled"     $(".published-field").show()   else     $(".published-field").hide()  jquery ->   changevisibility $("#post_status :selected").text()   $("#post_status").on "change", (e) -> changevisibility $(this).find(":selected").text()

the problem comes when user access page first time, status set draft default (as expected), datetimepicker visible isn't supposed (remeber? should visible if user selects schedule post). if refresh page @ point when vieweing fomr, datepicker disapears.

the original issue can found here https://gorails.com/episodes/scheduling-posts

this issue caused because of turbolinks. have tried use jquery-turbolinks gem, didn't manage solve problem. ideas how fix issue?

if want use turbolinks, important remember works not having real page loads @ all, xhr request replaces html within <body>, while saving old <body> implement button.

this means no scripts executed, wont document load/ready events, etc. $(handler) same $.ready(handler) , run on page load once "page's document object model (dom) becomes safe manipulate.".

turbolinks fires turbolinks:load on document, use $(document).on('turbolinks:load', handler) such things.

you need aware of fact kept copy of old <body> dom , scripts did, memory used that, , other javascript last "page" such timeouts , animation frames, etc. keeps running. , used implement show/hide based on css selector @ load time.

this rails guide has more information, turbolinks library itself.


Comments

Post a Comment

Popular posts from this blog

ubuntu - PHP script to find files of certain extensions in a directory, returns populated array when run in browser, but empty array when run from terminal -

i running os ububtu 16.04. ultimate goal able run php script cron job every minute. here php script located @ /var/www/html/tests/test/index.php : <?php $directorypath = $_server['document_root']."/tests/test/data/"; echo "directorypath: $directorypath<br><br>";//check $imagefilepathsarray = glob($directorypath . "*.{png,gif}", glob_brace); echo "<br><br>imagefilepathsarray: "; print_r($imagefilepathsarray);//check ?> when open php script in browser visiting url my-ip-address/tests/test/index.php , get: directorypath: /var/www/html/tests/test/data/ imagefilepathsarray:array( [0] => /var/www/html/tests/test/data/pic.png [1] => /var/www/html/tests/test/data/pic.gif ) before writing cron job in crontab file, need check if can run anywhere using terminal . opened ubuntu terminal @ /home/ location, , executed in terminal: sudo php /var/www/html/tests/test/index.php i got following out...
Read more

php - How can i create a user dashboard -

today have questions you, want create user dashboard site, include (obviously), users data, example -email -username -and others stuff how can information, , print them in html page? if can, how can these information via php sessions? shuld use session? example, if user login, , start new session ( session_start() ), how can data print in dashboard? should use php "project"? in advice, have day , thank time!
Read more

javascript - How to detect toggling of the fullscreen-toolbar in jQuery Mobile? -

i have jquery mobile page fixed full-screen toolbar, data-tap-toggle enabled. straight under toolbar have positioned banner should slide upwards when toolbar hiding , slide downward when toolbar showing. jquery mobile toggles toolbar applying , removing ui-fixed-hidden class - sadly, can't find in documentation of toolbar widget toggle , hide or show event that. how can detect when toolbar toggled, reposition banner? .banner { position: fixed; background-color: darkseagreen; top: 46px; min-height: 48px; width: 100%; text-align: center; line-height: 48px; } <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"> <script src="https://code.jquery.com/jquery-1....
Read more