I have an issue I'm unable to solve.
In the page page2.html:
<span id="bubbledescspec">no content yet</span>
Now, dynamically from another page I go to page2.html through $.mobile.changePage("page2.html"), with a function called when 'deviceready' and 'init' are fired for the page2.html page.
This function contains the following code:
alert($("#bubbledescspec").text());
$("#bubbledescspec").text(unescape(desc));
alert($("#bubbledescspec").text());
Now: the alert() output is ALWAYS correct ("no content yet", value of desc), but the text that I see in the bubbledescspec element SOMETIMES changes accordingly, SOMETIMES doesn't change. This is why I was thinking that another element, same ID, is changed in place of the one that I want to change.
I'm obviously sure that that ID is not duplicated (grep -R on the project's root directory).
I don't know when/why this happens so I'm not able to reproduce the issue.
I just want to add that I don't have errors in the javascript code and the HTML is validated.
The OS is Android 4.2.2.
Any tips?
Thanks.
EDIT 1: other information. Let's say that I am in the situation when the problem occurred. If I go in the landscape mode (and from that moment in every orientation), the information is correct in the <span>!
Related
Many thanks for your help and support in advance. Using vaadin 7 AbstractJavaScriptComponent, I am trying to load html snippet in place of div tag and the screen does not display anything. Could not figure it out the reason. Please help !
window.de_vaadin_ui_myapp_MyWidget = function() {
$(document).ready(function(){
$("#content").load("html/NewFile.html");
});
var element = this.getElement();
this.onStateChange = function() {
element.innerHTML ="<div id=\"content\"></div>";
};
};
the html file is located in the package de.vaadin.ui.myapp.MyWidget.html
There are multiple things that could go wrong here. It would help if you'd describe any relevant log messages or such.
I can see multiple different reasons for why this isn't working for you:
The connector logic is not run at all e.g. because of a typo in the #JavaScript annotation value or the name of the connector function (i.e. de_vaadin_ui_myapp_MyWidget). You can verify that it's actually loaded by adding e.g. console.log(this.getElement()) inside the top level function.
The HTML is requested from the wrong URL. Check the network inspector in the browser's developer tools to see which absolute URL is actually loaded and whether that returns the expected result or only e.g. a 404 response. If this is the problem, you could either move the HTML file to some other place or change the relative URL passed to load to something
The contents of the extended element is reset every time there is a state change event because innerHTML is reassigned. It might help to move the statement that assigns innerHTML outside of the onStateChange handler so that it would only be run once during initialization. This might also cause a situation where $("#content") is run before the div has even been created, causing it to not find the target element.
I have a very simple Rails app with a react component that just displays "Hello" in an existing div element in a particular page (let's say the show page).
When I load the related page using its URL, it works. I see Hello on the page.
However, when I'm previously on another page (let's say the index page and then I go to the show page using Turbolinks, well, the component is not rendered, unless I go back and forth again. (going back to the index Page and coming back to the show page)
From here every time I go back and forth, I can say that the view is rendered twice more time.Not only twice but twice more time! (i.e. 2 times then 4, then 6 etc..)
I know that since in the same time I set the content of the div I output a message to the console.
In fact I guess that going back to the index page should still run the component code without the display since the div element is not on the index page. But why in a cumulative manner?
The problems I want to solve are:
To get the code run on the first request of the show page
To block the code from running in other pages (including the index page)
To get the code run once on subsequent requests of the show page
Here the exact steps and code I used (I'll try to be as concise as possible.)
I have a Rails 5.1 app with react installed with:
rails new myapp --webpack=react
I then create a simple Item scaffold to get some pages to play with:
rails generate scaffold Item name
I just add the following div element in the Show page (app/views/items/show.html.erb):
<div id=hello></div>
Webpacker already generated a Hello component (hello_react.jsx) that I modified as following in ordered to use the above div element. I changed the original 'DOMContentLoaded' event:
document.addEventListener('turbolinks:load', () => {
console.log("DOM loaded..");
var element = document.getElementById("hello");
if(element) {
ReactDOM.render(<Hello name="React" />, element)
}
})
I then added the following webpack script tag at the bottom of the previous view (app/views/items/show.html.erb):
<%= javascript_pack_tag("hello_react") %>
I then run the rails server and the webpack-dev-server using foreman start (installed by adding gem 'foreman' in the Gemfile) . Here is the content of the Procfile I used:
web: bin/rails server -b 0.0.0.0 -p 3000
webpack: bin/webpack-dev-server --port 8080 --hot
And here are the steps to follow to reproduce the described behavior:
Load the index page using the URL http://localhost:3000/items
Click New Item to add a new item. Rails redirects to the item's show page at the URL localhost:3000/items/1. Here we can see the Hello React! message. It works well!
Reload the index page using the URL http://localhost:3000/items. The item is displayed as expected.
Reload the show page using the URL http://localhost:3000/items/1. The Hello message is displayed as expected with one console message.
Reload the index page using the URL http://localhost:3000/items
Click to the Show link (should be performed via turbolink). The message is not shown neither the console message.
Click the Back link (should be performed via turbolink) to go to the index page.
Click again to the Show link (should be performed via turbolink). This time the message is well displayed. The console message for its part is shown twice.
From there each time I go back to the index and come back again to the show page displays two more messages at the console each time.
Note: Instead of using (and replacing) a particular div element, if I let the original hello_react file that append a div element, this behavior is even more noticeable.
Edit: Also, if I change the link_to links by including data: {turbolinks: false}. It works well. Just as we loaded the pages using the URLs in the browser address bar.
I don't know what I'm doing wrong..
Any ideas?
Edit: I put the code in the following repo if interested to try this:
https://github.com/sanjibukai/react-turbolinks-test
This is quite a complex issue, and I am afraid I don't think it has a straightforward answer. I will explain as best I can!
To get the code run on the first request of the show page
Your turbolinks:load event handler is not running because your code is run after the turbolinks:load event is triggered. Here is the flow:
User navigates to show page
turbolinks:load triggered
Script in body evaluated
So the turbolinks:load event handler won't be called (and therefore your React component won't be rendered) until the next page load.
To (partly) solve this you could remove the turbolinks:load event listener, and call render directly:
ReactDOM.render(
<Hello name="React" />,
document.body.appendChild(document.createElement('div'))
)
Alternatively you could use <%= content_for … %>/<%= yield %> to insert the script tag in the head. e.g. in your application.html.erb layout
…
<head>
…
<%= yield :javascript_pack %>
…
</head>
…
then in your show.html.erb:
<%= content_for :javascript_pack, javascript_pack_tag('hello_react') %>
In both cases, it is worth nothing that for any HTML you add to the page with JavaScript in a turbolinks:load block, you should remove it on turbolinks:before-cache to prevent duplication issues when revisiting pages. In your case, you might do something like:
var div = document.createElement('div')
ReactDOM.render(
<Hello name="React" />,
document.body.appendChild(div)
)
document.addEventListener('turbolinks:before-cache', function () {
ReactDOM.unmountComponentAtNode(div)
})
Even with all this, you may still encounter duplication issues when revisiting pages. I believe this is to do with the way in which previews are rendered, but I have not been able to fix it without disabling previews.
To get the code run once on subsequent requests of the show page
To block the code from running in other pages (including the index page)
As I have mentioned above, including page-specific scripts dynamically can create difficulties when using Turbolinks. Event listeners in a Turbolinks app behave very differently to that without Turbolinks, where each page gets a new document and therefore the event listeners are removed automatically. Unless you manually remove the event listener (e.g. on turbolinks:before-cache), every visit to that page will add yet another listener. What's more, if Turbolinks has cached that page, a turbolinks:load event will fire twice: once for the cached version, and another for the fresh copy. This is probably why you were seeing it rendered 2, 4, 6 times.
With this in mind, my best advice is to avoid adding page-specific scripts to run page-specific code. Instead, include all your scripts in your application.js manifest file, and use the elements on your page to determine whether a component gets mounted. Your example does something like this in the comments:
document.addEventListener('turbolinks:load', () => {
var element = document.getElementById("hello");
if(element) {
ReactDOM.render(<Hello name="React" />, element)
}
})
If this is included in your application.js, then any page with a #hello element will get the component.
Hope that helps!
I was struggling with similar problem (link_to helper method was changing URL but react content was not loaded; had to refresh page manually to load it properly). After some googling I've found simple workaround on this page.
<%= link_to "Foo", new_rabbit_path(#rabbit), data: { turbolinks: false } %>
Since this causes a full page refresh when the link is clicked, now my react pages are loaded properly. Maybe you will find it useful in your project as well :)
Upon what you said I tested some code.
First, I simply pull out the ReactDOM.render method from the listener as you suggested in your first snippet.
This provide a big step forward since the message is no longer displayed elsewhere (like in the index page) but only in the show page as wanted.
But something interesting happen in the show page. There is no more accumulation of the message as appended div element, which is good. In fact it's even displayed once as wanted. But.. The console message is displayed twice!?
I guess that something related to the caching mechanism is going on here, but since the message is supposed to be appended why it isn't displayed twice as the console message?
Putting aside this issue, this seems to work and I wonder why it's necessary in the first place to put the React rendering after the page is loaded (without Turbolinks there was the DOMContentLoaded event listener)?
I guess that this has do with unexpected rendering by javascript code executed when some DOM elements are yet to be loaded.
Then, I tried your alternative way using <%= content_for … %>/<%= yield %>.
And as you expected this give mitigate results ans some weird behavior.
When I load via the URL the index page and then go to the show page using the Turbolink, it works!
The div message as well as the console message are shown once.
Then if I go back (using Turbolink), the div message is gone and I got the ".. unmounted.." console message as wanted.
But from then on, whenever I go back to the show page, the div and the console message are both never displayed at all.
The only message that's displayed is the ".. unmounted.." console message whenever I go back to the index page.
Worse, if I load the show page using the URL, the div message is not displayed anymore!? The console message is displayed but I got an error regarding the div element (Cannot read property 'appenChild' of null).
I will not deny that I completely ignore what's happening here..
Lastly, I tried your last best advice and simply put the last code snippet in the HTML head.
Since this is jsx code, I don't know how to handle it within the Rails asset pipeline / file structure, so I put my javascript_pack_tag in the html head.
And indeed, this works well.
This time the code is executed everywhere so it makes sense to use page-specific element (as previously intended in the commented code).
The downside, is that this time the code could be messy unless I put all page-specific code inside if statements that test for the presence of the page-specific element.
However since Rails/Webpack has a good code structure, it should be easily manageable to put page-specific code into page-specific jsxfiles.
Nevertheless the benefit is that this time all the page-specific parts are rendered at the same time as the whole page, thus avoiding a display glitch that occurs otherwise.
I didn't address this issue at the first place, but indeed, I would like to know how to get page specific contents rendered at the same time as the whole page.
I don't know if this is possible when combining Turbolink with React (or any other framework).
But in conclusion I leave this question for later on.
Thank you for your contribution Dom..
I try to write a web-component to create a simple login menu. it has paper-inputs for name and password and a button which fires a script to check the data.
the right data redirect to the next page while false credentials should open a toast element right above the button with an error message, siimilar to this one:
http://www.polymer-project.org/tools/designer/#6f21f8d26e14d614c9cb
Select the paper-toast-element in the tree-view and check the 'opened'-checkbox get get a vision what I try to do and please excuse the strange style.
The problem:
I included this element in my main page, but the toast element is always visible right from the start. and it doesn't react to the button click if I move the toast away with css.
I don't wanna spam this page with my code, so I uploaded it here:
https://gist.github.com/Gemoron/6b8f41d1bb6ff522e23c
I appreciate any suggestion on how to fix the problem.
You cannot access the hidden shadow DOM of an element directly with jQuery's $ function, nor with document.querySelector. Also jQuery is not needed anyway. Use Polymer's automatic node finding utility instead: this.$.paper_toast.
You can access the paper-input values with this.$.name.inputValue. But i would prefer to use data-binding instead: <paper-input value={{name}}>. Then you can access the input value in your JavaScript with this.name.
The function to display the toast is show().
I'm unable to reproduce the issue that the toast is visible right after the page has loaded. On my computer the toast is initially hidden and displayed when i click on the button (Chrome 37, Polymer 0.3.3).
In line 76 you try to use an "open()" method, which does not exist on paper-toast. It should be "show()". You can find paper-toasr API here: http://www.polymer-project.org/docs/elements/paper-elements.html#paper-toast
Also, because the ids in shadow dom are encapsulated, you should be using the id selection mechanism from Polymer instead of jquery-style selector
this.$.paper_toast.show();
More on automatic node finding in Polymer: http://www.polymer-project.org/docs/polymer/polymer.html#automatic-node-finding
Here's jsbin (you might need to refresh as jsbin sometimes breaks with Polymer imports)
http://jsbin.com/fened/1/edit
situation:
form1.html has a button
clicking that button calls $.mobile.changePage('../site3/form2.html');
no problem here. all is as expected and the page is loaded. let's call that form2.html
form2.html has 2 sections:
(1) #SiteForm and
(2) #SiteSearched
clicking a button on #SiteForm should call $.mobile.changePage('../site3/form2.html#SiteSearched');
now here's the weird part.
if I load the page form2.html directly and press the button, it works and I see #SiteSearched JQM page.
but, if I start from form1.html, click the button to get to form2.html#SiteForm, then click the button, everything in the attached function executes, except the line calling $.mobile.changePage('../site3/form2.html#SiteSearched');
I know that part is loaded by AJAX by wouldn't the changePage command work?
(note: Form1 may have data filled into the form that I don't want to lose. Form2.html was meant to do a search and throw back the result to Form1 somehow, which is why I am doing things this way.)
You should read official jQuery Mobile documentation before posting here, everything is explained there, but let me give you a short explanation.
jQuery Mobile has two template solutions, one is multi page and second one is multi html. You already know that because you are mixing them. But, what you don't know is (from the perspective of AJAX page handling):
Only first HTML page is fully loaded into the DOM, everything is loaded, including the HEAD content. So if initial HTML page has several data-role="page" <div> containers, every one will load into the DOM.
But, every subsequent page is loaded only partially. Basically if you second, third ... page has more then one data-role="page" div containers only first one will load into the <DOM>. jQuery Mobile will discard everything else.
So in your case, if form2.html has:
(1) #SiteForm and
(2) #SiteSearched
jQuery Mobile will load only #SiteForm, #SiteSearched will get discarded.
Basically this line will not work:
$.mobile.changePage('../site3/form2.html#SiteSearched');
You can't nit pick specific pages in subsequent pages, as I told you. You can only use this:
$.mobile.changePage('../site3/form2.html');
And jQuery Mobile will show you first data-role="page" occurrence inside form2.html page.
Read more about this here and here.
I have some pages which are filled dynamically by content loaded with Ajax. My problem is that each time I go to this page, the old content is still there if it hasn't been replaced by new content...
I've thought about 2 home solutions like:
Creating a "template" page. By calling "pagebeforeshow", I'll copy the code from the template in the target page, and add there the dynamic content...
Each DOM where dynamic content must be put into, I had a class "clearcache" and by calling "pagebeforeshow" I do a $(".clearcache").empty();
I don't know how to deal with that. Have you ever got the same issue?
EDIT:
I bind the "tap" event to store the block-id into localstorage, to load dynamic content in the #PageBlock
Everything works very well (tap event, localstorage for the var, ajax loading). The issue comes really when I go from block to other blocks. The new content overwrite old content instead of beginning from a new "blank" page.
For example I have a list where I append datas I get from Ajax. If I switch to another block, the list is completed and not refreshed..
I could do something like empty the list, and then appending content, but I'd like something better because I have several pages/lists/dom like that...
Thanks for your help ;)
I faced a similar problem where the new contents where not shown on the page when i tried to append it.There is a simple solution where you can just replace append with prepend.
Example:
Replace
$("#divid").append(content)
with
$("#divid") .prepend(content)