igor-alexandrov / wiselinks Goto Github PK

I have the same problem as this person http://stackoverflow.com/questions/19213399/is-it-possible-to-send-javascript-request-using-wiselinks

Can it be a feature request?

Can anyone help me to make this work :(
I use sublime text 2 editor with coffeescript compile, and i compiled your coffee code.
Now i included, in this order: jquery, _history.adapter.jquery.js, _history.js, _json2.js, jquery.plugin1.js, jquery.plugin2.js, wiselinks.js, application.js.

application.js:

$(document).ready(function() {
  window.wiselinks = new Wiselinks($('body'));
  $(document).off('page:loading').on('page:loading', function(event, url, target, render) {
    return console.log("Wiselinks loading: " + url + " to " + target + " within '" + render + "'");
  });
  $(document).off('page:complete').on('page:complete', function(event, xhr, settings) {
    return console.log("Wiselinks page loading completed");
  });
  $(document).off('page:success').on('page:success', function(event, $target, status) {
    return console.log("Wiselinks status: '" + status + "'");
  });
  return $(document).off('page:error').on('page:error', function(event, data, status) {
    return console.log("Wiselinks status: '" + status + "'");
  });
});

and on link 'data-push="true"', and it doesn't work, what can be the problem ? :(
Btw, all these scripts are minified in one, with google minify.
Website is written in PHP.

Sometimes it works, but that is 1 in 10 times.

I have a standalone setup from your example like that (file: catalog.php):

$(document).ready(function() {
  window.wiselinks = new Wiselinks($('#catalog'));
});
</script>

<div class="filter">
    <form action="" method="get" data-push="true" data-target="#catalog">
        <input type="text" size="30" name="title" id="title">

        <select name="scope" id="scope">
            <option value="">All Tax Liens</option>
            <option value="accruing">Accruing Interest</option>
            <option value="awaiting_payment">Awaiting Payment</option>
            <option value="closed">Closed</option>
            <option value="trashed">Trash</option>
        </select>

        <input type="submit" value="Find" name="commit">
    </form>
</div>

<div id="catalog">
    <!-- the list of your items -->
    ...
</div>

When I submit the form, I suppose, the desired behavior is to pass the POST values to 'catalog' container and reload it, leaving ".filter" untouched. Correct me if Im wrong.

The problem is after submit, the whole page gets appended to 'catalog' container, so in the end I end up having everything duplicated. Is this normal behavior?

Hi!

I think selectors works bad.

$form.find(':input[value=""]:not(:disabled)')

Maybe should try through 'filter' function?

Prove:
jQuery 1.9.1: http://jsfiddle.net/junglecore/Keevt/
jQuery 1.8.3: http://jsfiddle.net/junglecore/Keevt/1/

Please can someone tell me where I am going wrong with a simple attempt to use wiselinks.

I am trying to use it on my Users#index page.

I have an application layout file which has the top menu and a main content container div.

In index.html.erb I then have my heading and then I loop through and display a list of users.

I am using will_paginate.

I have applied data-push="true" to the page links as required. I haven't used a partial because my index view has no real need for one so I was trying to just update the body html in this case. I haven't applied a target to the links either.

However, when I click any of the links it is replacing the entire of the page body with just the html that is in index.html.erb.

Where am I going wrong?
Is it something to do with wiselinks_layout that I need to apply?

Thanks

I'm getting this error in the console. I thought I was using another javascript plugin in my project that include the history.js before wiselinks, but I created a fresh new rails application and just add jquery and wiselinks and still getting this error.

Do you have any plans and/or opinion about adding 'prefetch' ability to wiselinks - so links marked with data-prefetch could be preemptively requested?

I doesn't found any API with which I could change current page through wiselinks from JavaScript. Does wiselinks has this feature?

I'm not understanding the target replacement properly. Below is the rough layout of the rendered DOM on about every page:

body
  #container
    header
    .feed_container
    .sidebar
    .search_holder
    #dynamic_content

Every page has the div #dynamic_content but this is on template level, not in the layout. The layout is:

body
  #container
  header
    :yield
  footer

If I click any link with data-true then my header and footer disappear. How can I prevent this?

I'm using wiselinks in a Rails application. I'm telling it to change the content of #content selector, which is what is returned by the yield statement.

The problem is that I have a language menu outside of #content. The items of this language menu are generated from the application layout through the following type of code:

li = link_to "English", url_for(locale: "en")

I can't see any easy way to manage that small portions of dynamic layout with wiselinks. I don't know if I am missing something... Of course I could use some custom javascript to change it when page:done, but this is an ugly workaround, because then I'm using two approaches to get the same result: the one in rails, and the one in javascript.

Is there an easy way to manage that situations?

Thank you.

Hi!

I can't use form param with value like this "http://www.site.com/data.htm?stamp=2013.1.0.116.CaxH13&base=1007.77.0.0&id=9094497" because it's trimmed by _process_form function into "http://www.site.com/data.htm?stamp=2013.1.0.116.CaxH13"

I've tried to use escape function:

for key of params
  serialized.push("#{key}=#{escape(params[key])}")

But your line with replace(/%|!/g, '') function breaks my idea. :)

Hi,

I have an index page and a show page that both use the same sub_level_layout layout that extend the application layout.

layouts
- application
- sub_level_layout

sub_level_layout has a partial (my_partial) which is the part of the page that I would like to reload/update.

Here's the code I'm using:

def index
  ...
  if request.wiselinks_partial?
    render :partial => 'my_partial'
  else
    render :layout => 'sub_level_layout'
  end
end

def show
  ...
  if request.wiselinks_partial?
    render :partial => 'my_partial'
  else
    render :layout => 'sub_level_layout'
  end
end

This works fine for clicking through pages of results on the index page and also allows me to click the link for one of the results to go to the show page.

However, it fails if I load the index page, click one of the results to display the show page and then click the back button. It doesn't seem to know what to use to render the index page it just shows a blank page. I need it to just refresh the contents of the partial so that the index will be displayed again.

If I load the index page, click through to a different page (paging done using wiselinks as well), then click one of the results to display the show page and then click the back button it works fine.

It doesn't seem to like clicking the back button to go to the starting page (page initially loaded as html rather than via wiselinks) and only refreshing contents using a partial rather than the full screen.

When the page fails to load the headers for the fail request contain X-Requested-With:XMLHttpRequest and X-Wiselinks:template

Does that make sense?

Any ideas where I'm going wrong?

Thanks

Hi,

We have a problem with HTML4 browser and our routes.

i got

scope "(:locale)", :locale => "/en-be|fr-be|nl-be|INTL|BE/" do
match "/en-be(/_path)" => redirect { |params, req| URI::escape "/en/#{params[:path]}".chomp("/") + add_query(req.query_parameters) }
match "/fr-be(/_path)" => redirect { |params, req| URI::escape "/fr/#{params[:path]}".chomp("/") + add_query(req.query_parameters) }
end

so when we try to reload the same page, the browser HTML4 (IE9) go back to the homepage like the history is not saved, and come back to the correct page.

if i try to go directly to the right url like :

dev.mysite.fr/fr/articles the page is loaded and he reload again the page by going to the home again and come back to the right url with
dev.mysite.fr/#./articles .

it's not easy to debug i have try to remove all History.back into your wiselinks-1.1.2.js but it does not help. Of course if i disable wiselinks for HTML4 browser everything work fine.

Heyyo,

All requests appear as if not having a trailing slash via request.url (broken Rails convention, you could say). The correct and actual request URI is stored in request.env['REQUEST_URI']

When a request comes through with a trailing slash, Rails' request.url omits the trailing slash, creating a mismatch between the URL of wiselinks request and the X-Wiselinks header, causing the page:redirected event to be fired in all cases, effectively breaking a bunch of JS and so on and so forth.

Hi!

I'm always getting a value of undefined for url variable with this code.

$(document).off('page:fail').on(
'page:fail'
(event, $target, status, url, error) ->
console.log("Wiselinks status: '#{status}'")
console.log("Wiselinks url: '#{url}'")
)

Here is console log:

Wiselinks status: 'error'
Wiselinks url: 'undefined'

I think, that good behaviour will be:

1. ignore need for reload
2. puts warning to browser console, if browser console present

Let me start off by saying I really like and appreciate what you've already completed in this gem. I am very impressed.

I found one quirk specifically regarding html4 browsers (...I no, I hate supporting old browsers too ;)

To replicate the problem:

Perform a subdirectory launch of a given rails app.
Then, use wiselinks on the subdirectory app.

For example: you have domain www.myrailsapp.com
your subdirectory launch url is: www.myrailsapp.com/other_rails_app

You will see in HTML5 browsers after load:
www.myrailsapp.com/other_rails_app

You will see in HTML4 browsers ( i.e. 7, 8 for example) after load for a split second:
www.myrailsapp.com/.#/other_rails_app

then immediate loading/redirect to:
www.myrailsapp.com

Obviously this won't be a top priority to fix ( if it's even possible ), I just thought I would point it out to you if you decided to make a 'gotchas' section of your wiki. ( I do realize you give an option to turn off wiselinks for HTML4, but I wasn't sure if this was the specific reason to do so). Thanks again for all your hard work!

There is a way to use the redirect_to with wiselinks?

Hello,

For business logic of my application has worked properly, I need to know which page user came from. For this purpose I use request.referer. But when I had started using wiselinks, I noticed that the referer wasn't set correct. It's set equal URL of final page, but not the page user came from.

Hi! And thanks for a great solution.

What do you think about adding the option to turn wiselinks by default for all links and forms?

I am developing a website where all the links have to be handled with wiselinks and a little uncomfortable add data-push for each link. Personally, I would be more convenient to add data-no-push for links where wiselinks not needed.

thank you

I have a function that needs to be run when I submit my wiselinks-form but before wiselinks actually processes the form fields and loads the new page.

Before I added wiselinks I was using e.originalEvent.type.toLowerCase() === "submit" to check for the form being submitted. If it was then I used e.preventDefault(); to stop it, then I ran my function and then on completion of my function I submitted my form using myForm.submit();

Unfortunately, wiselinks seems to be processing the page as soon as the form is submitted which means my code above actually seems to be causing it to be submitted twice (the original key press and then .submit()) and so the page gets processed twice.

Is there any way I can prevent wiselinks from processing the page as soon as the form is submitted and only do it when I submit it using myForm.submit();?

Thanks

Function reload() in wiselinks 0.5.5 works only once, but in 0.5.2 everything is ok. Could you fix it?

I'm not sure, if this is simple an annoyance or an actual bug: When the target-container (either defined locally on the link form with data-target or globally in the setup) is not present, then wiselinks does not complain, but makes the call, and updates the non-existing container. Maybe this behavior should be configurable? It should be possible to either:

• fail with an exception
• only write a console.log-message
• do nothing silently (as it is right now)
• fall back to non-ajax-submit

if the target-container is not present. This would certainly help to see, if wiselink is set up correctly...

I has page1 and page2.

Page1 has layout application.html.erb, Page2 has layout custom.html.erb.

How I can change page layout, when going from page1 to page2 or vice versa?

I have noticed that an automatic hash is created for HTML4 browser. This is a great fallback, but the final URL for them is quite ugly because the id generated. It would be great if we could have some control over the hash generated, for example using a data-hash attribute.

Here's the scenario:

I've set up a pager using kaminari and added the wiselinks data-attributes (push=true, and a target='#paging-content' ), templates now look like this:

%span.last
  = link_to_unless current_page.last?, raw(t 'views.pagination.last'), url, {:remote => remote, :data => defined?(data) ? data : {}}

and the paginator is called like this:

= paginate @my_models, data: {push: true, target: "#paging-content"}

The paging itself works fine, however, the back-button shows the last page but only unstyled: only the content that is normally rendered into #paging-content is shown, the rest has vanished.

I'm not yet sure, if this is a general problem or it only does not work with a specified target (maybe anything that is less than the whole html causes this problem?!) - or if this is indeed what the back-button in this case is supposed to do?!

I've read the lengthy and tiring discussion in #9, but I still hope that we can find a way to reproduce the scenario and get the back-button to work...

PS: thx for the quick "exception"-fix!

I am using wiselinks for a side menu for a single page app. The problem I am running into is: if a user clicks another link before the content for a first one finished loading the second link can be loaded and the replaced by the first.

More clearly:

Link A
Link B

A--->server---------------------------->client
B--->server--->client

In the above the user clicks A sees the loading screen, changes their mind and clicks B which loads quickly. However when A finishes the done() handler for the AJAX requests finishes and replaces the HTML.

Is there a way to work around this?

Hi,

I'm getting a:

Uncaught Error: SecurityError: DOM Exception 18

when I try to navigate around a HTTPS site.
I see that the X-Wiselinks-Url: is being sent as http:// - is that the issue?

Thanks.

Hi.
I have added wiselinks into Gemfile.
Done with bundle install.
and added next into my application.coffee:

#= require jquery
#= require jquery_ujs
#= require bootstrap
#= require modernizr
#= require jquery
#= require wiselinks
#= require_tree .

$(document).ready ->
  window.wiselinks = new Wiselinks()

Bu AJAX don't works by default, how in turbolinks.
Why?

Any idea how to get this up and running with a Rails 2.3.x app? When booting after bundling the app crashes with uninitialized constant Rails::Engine (NameError) with the backtrace coming from wiselinks-0.6.4/lib/wiselinks/rails.rb:3

I can't make redirects work still, saw new version, but nothing changes on link..
Check out here click on "Add new event".
Any solution ?

occurs when | render :action at wiselinks (0.3.2) lib/wiselinks/headers.rb:21:in `render'

I debug the code link.port is "0" in safari that is not match with location.port

Steps to replicate:

• Go to http://wiselinks.herokuapp.com/
• Click "Proceed to sample product catalog…"
• Click "3" to go to page 3 of catalog
• Click "About Wiselinks"
• Click browser back button.

After clicking back, the expected behaviour is to go to page 3 of catalog. The observed behaviour is incorrect.

There are a number of edge cases associated with History.js, and I know them well. I have in fact authored my own gem for this - https://github.com/ronalchn/ajax_pagination, so when I saw this gem, I decided to test this in your demo application. There are a number of other associated problems, which I won't detail here, but some of these cases are demonstrated by a video I made with my gem http://ronalchn.github.com/ajax_pagination/, which shows the correct behaviour.

In fact, I have thought very carefully about this problem to find a solution, because this was also a weakness with the pjax gem. The solution is in my javascript, in the scheme I used to track the changed sections, to restore it properly. I suppose this roundabout solution is required partly because of a weakness in the browser pushState API, causing it to return a popped state which is off by one, when what we want is actually the changes between the previous state, and the next state we need to move to.

In my gem, I also implemented form submission with POST. I also have a ruby API to optionally avoid rendering unused portions of the page.

If you are interested, perhaps we could work together to develop something which is correct, but also kept well-maintained. I put together almost all the code in my gem, but if we have more contributors working together on one gem, then it may make maintenance easier.

in pjax you can specify which links you need to use pjax on and the container
I have a big site powered by pjax I can't override all links to add data-push to it

I met a problem when Wiselinks refused to send request to server. I found the reason is my links containing hash, like "http://localhost:3000/foo/123#bar". Then I removed the hash "#bar" and it works.

To verify this, I cloned wiselinks-example repo, manually changed the link in iindex.html.slim from catelog_path to /catelog#bar. Then the link stopped working - hashState changed, but no request sent to server.

I browsed source and could only find code related to hashbang #! but not hash. I can't figure out why. Any clues or suggestions? Thanks!

Hello,

I don't know this is a wiselinks bug or a problem of my application, but when there is a redirect the application processes redirected page twice.

Started GET "/postal_orders/new" for 127.0.0.1 at 2013-03-24 18:55:27 +0400
Processing by PostalOrdersController#new as HTML
Redirected to http://localhost:3000/delivery
Completed 302 Found in 2ms (ActiveRecord: 0.0ms)


Started GET "/delivery" for 127.0.0.1 at 2013-03-24 18:55:27 +0400
Processing by PagesController#show as HTML
  Parameters: {"identifier"=>"delivery"}
  Page Load (0.2ms)  SELECT "pages".* FROM "pages" WHERE "pages"."identifier" = 'delivery' LIMIT 1
  [wiselinks] Processing template request
  [wiselinks] title: Delivery – Beauty ribbons
Read fragment views/pages/2-20130322114251 (0.2ms)
  Rendered pages/_page.html.haml (1.6ms)
  Rendered pages/show.html.haml within layouts/wiselinks (2.4ms)
Completed 200 OK in 8ms (Views: 5.2ms | ActiveRecord: 0.2ms)


Started GET "/delivery" for 127.0.0.1 at 2013-03-24 18:55:27 +0400
Processing by PagesController#show as HTML
  Parameters: {"identifier"=>"delivery"}
  Page Load (0.2ms)  SELECT "pages".* FROM "pages" WHERE "pages"."identifier" = 'delivery' LIMIT 1
  [wiselinks] Processing template request
  [wiselinks] title: Delivery – Beauty ribbons
Read fragment views/pages/2-20130322114251 (0.2ms)
  Rendered pages/_page.html.haml (1.9ms)
  Rendered pages/show.html.haml within layouts/wiselinks (2.9ms)
Completed 200 OK in 9ms (Views: 5.7ms | ActiveRecord: 0.2ms)

However, in the javascript console I see only one request to draw a redirected page.

GET http://localhost:3000/postal_orders/new   302
GET http://localhost:3000/delivery   200

The problem on my side? :)

I am trying to render at partial through wiselinks and get this error:

ActionView::MissingTemplate (Missing partial layouts/wiselinks with ...

I have this in my controller:

def index
@rooms = Room.all
respond_to do |format|
format.html # index.html.erb
if self.request.wiselinks?
render partial: "booking"
end
end
end

Please add this feature in a future release

i am newbie in programming , what mistake did i make? here is my code.. When i click links whole page changes

thank you...

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <script src="jquery-2.0.0.min.js"></script>
   <script src="wiselinks-1.1.2.js"></script>
</head>

<body>
<ul class="menu">
    <li>
        <a href="Home" data-push="true" data-target="#content">Home</a>
    </li>
    <li>
          <a href="Contact" data-push="true" data-target="#content">Contact</a>
    </li>
</ul>
<?php echo date("H:i:s");  ?>

<div id="content">
<?php echo date("H:i:s");  ?>
</div>
</body>

I have an app that has one portion of the page that I don't want to reload each time because the div contains certain information and has javascript events assigned to it.

This div is surrounded by other divs that will need to be reloaded though.

#content
  div.header-section-to-be-updated
  div.main-area
    div.section-to-be-updated
    div.preserve-content
  div.footer-section-to-be-updated

Is it possible to tell #content to reload but not a particular div within #content?

Otherwise I'd need to tell wiselinks to reload all the partials around it separately somehow which I'd rather not do.

Thanks

Is it possible for wiselinks to remember the scroll position for each page?

I have an ajax application that has a list of results. When you click on a result wiselinks updates the page content to show the details.

If I scroll down the list and then click a result to go to the details page I am currently using the following to return to the top of the page:

$("html, body").animate({ scrollTop: 0 }, 0);

I am also using this for when I press back to go back to the list page but I'd like the application to associate a scroll position with each url so that the page returns to the scroll position the user was at when they left that page.

If I press back without the scrollTop code shown above it looks like it tries to scroll down to where I was on the list view but it does that before the list view content reloads so it can only scroll down a little bit (because of the small amount of content on the details view) and then the list view content shows.

If I add a load of extra text to the details view to make the page as long as the list view then when I press back from the details view it jumps down the details page and then reloads the list view content and the page is then scrolled to the correct position.

Is it possible to remember the scroll position on each page bearing in mind that my application is paginated as well so it isn't just a case of remembering scroll position for one page but any number of them?

I'd like navigating to new pages to scroll to the top of the page but press the back and forward buttons to navigate to the position the user was at when they were on that page.

Is there a way to capture the position the browser is trying to scroll to so that it can be re-attempted once the page content has been updated?

Is it viable or should I just scroll the page to the top?....not the best user experience.

Maybe something like this plugin does:
http://mrcoles.com/blog/scroll-sneak-maintain-position-between-page-loads/
http://mrcoles.com/scroll-sneak/

Thanks

Hi!

When using Internet Explorer 8-9 I get the error:

SCRIPT5007: Unable to get value of the property 'html4': object is null or undefined:

Wiselinks.prototype.enabled = function() {
return !History.emulated.pushState || this.options.html4 === true;
};

What about this fix?

@@ -8,12 +8,12 @@ class Wiselinks
   constructor: ($target = $('body'), options = {}) ->
     this._try_jquery()

-    if this.enabled()
+    if this.enabled(options)
       options = $.extend(this._defaults(), options)
       @page = new _Wiselinks.Page($target, options)

-  enabled: ->
-    !History.emulated.pushState || @options.html4 == true
+  enabled: (options = {}) ->
+    !History.emulated.pushState || options.html4 == true

   load: (url, target, render = 'template') ->
     @page.load(url, target, render)

Hello, can you please provide a standalone version?

Because i have problems to compilie the coffeescript... :( im new to cs and i dont have skills in ruby...

Thank You!

According to wiselinks README file:

While using Wiselinks you can rely on DOMContentLoaded or jQuery.ready() to trigger your JavaScript code [...]

But I don't see how. When I write some code for the document.ready event, it is not triggered again when wiselinks perform some request.

I have prepared a very simply Rails 3 application to demonstrate it and to show a minimalistic code that reproduces it.

The code of the application is in:

https://github.com/cram1010/wiselinks_bug

and an online demo in:

http://wiselinks-bug.herokuapp.com/

There is a simply alert("I'm an alert") line of code to be executed with the document.ready event. As you can see, the alert only appears with the pure-server requests, but not with the ones handled with wiselinks.

Am I doing something wrong or is it a bug?

That will be to modify the state of the link - add css or remove it

Try to wiselinks.reload() in js console with something like http://app.jetfid.local:3000/sites/2/verification?flash%5Bsuccess%5D=%D0%9F%D1%80%D0%BE%D0%B2%D0%B5%D1%80%D0%BA%D0%B0+%D0%BF%D1%80%D0%B0%D0%B2+%D0%BD%D0%B0+%D1%81%D0%B0%D0%B9%D1%82+example.com+%D0%BD%D0%B0%D1%87%D0%B0%D1%82%D0%B0

hi

while testing the plugin i could observe this one uses "request.url". I use pretty url for seo with "routing_filter" so google has 2 url for a same page (eg: "http://mysite/portfolio/myprojectname" but wiselinks writes "http://mysite/portfolio/5/myprojectname" in the browser history).
I am not a rails pro but it seems that "request.original_url" preserve the original link.
I could overwritte the helper method to match my needs but i don't like this way.
Have you ever meet this problem ?

thanks

I'm trying to use wiselinks with Rails4 but the meta tag does not work.

Rails.application.config.assets.digests returns nil, even when asset digests are enabled. I'm not sure if there's another way to do this.