Hello all i want to ask how to reload the appended data ..
Actually i am having a page which goes infinite scrolling ..
and i need to reload the appending elements when clicked on a particular element ..
the loading is fine for the elements that are not appending (previously present when the page loads) .
loading by ajax is working fine (checked)
just wana ask how to use load method of ajax for the divs in the appended data..
$("#abc").load("load.php #abc");
I think you have a problem with your events. If you are using the .click or .bind event handler of jQuery, the new added elements will not be targeted. Try $(".clickable").live("click", function()); to make also the newly added elements clickable.
As jQuery documentation says:
http://api.jquery.com/live/
Attach an event handler for all elements which match the current selector, now and in the future.
Related
In my project I'm working on styling some overlays. Because of the nested component structure I'm running into some problems here. The intended solution is to move the overlay somewhere closer to the app root while preserving data bindings, making the css styling less restricted.
I've managed to set up a prototype using Renderer2.appendChild(...). When the overlay is shown, the ngOnInit of the overlay appends the overlay to another DOM element.
With my current code I can either get the input or output binding to work (but not both), based on moving an empty comment <!----> found directly in front of the overlay.
From my understanding (Empty comments in Angular application) Angular needs this comment, but Renderer2.appendChild does not account for it (maybe it's not meant to be used for components, only for 'raw' html?).
Demo:
Here's the prototype presenting both issues I am stuck on: https://stackblitz.com/edit/angular-pg24om
Visibility of the overlays (shown below the labels) can be toggled with a button. The submit buttons inside the overlay logs the input to the console using an #Output event emitter. Pressing change text changes an #Input property.
Without moving the overlay, input and output binding works like expected.
Incorrect input binding: If I choose to move the empty <!----> comment together with the overlay, my input binding seems to stop working. Pressing Change text does not change the random number I pass to the component. Output binding still works fine in this scenario.
Incorrect destruction: If I don't move the empty comment, Angular fails to clean up the component when the visibility is hidden using the Toggle visiblity button. That said, while the component is alive both input and output binding remains functional.
If anyone knows how to get this to work, I'd greatly appreciate some help. I did see other methods of creating overlays using factory resolvers and detaching views, but being able to move the component while preserve bindings in the HTML template will save us a lot of time otherwise spent on changing a lot of components.
Edit: I forgot to mention that the error Error: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. occurs when attempting to remove the overlay without the moved comment. Angular is attempting to delete a #comment element from the overlay, but it fails to do so because the comment is still in the div where the overlay template resides. That's the reason I tried to move the comment together with the overlay.
I am using app-route and iron-pages with a paper-toolbar to display my views.
On one of my views, main-view, displays a randomly chosen image which changes each time the page is loaded. Every time main-view is selected from the toolbar, the page should reload so that a new image will be shown.
The problem is, if I am already at the /main-view url and I select it from the toolbar it doesn't refresh the page. Is there any way to do this?
you should definitely add on-tap to render new images. Your image won't change, because iron-pages are observing some value (specified in selected property) so, when you click on main-view and route property already had value "main-view", observer will not trigger.
Adding on-tap on element that is handling changes will make it always trigger.
Some easy example:
<iron-pages selected="{{route}}" attr-for-selected="name">
<example-element name="main-view" on-tap="handleClick" id="main"></example-element>
<another-element name="second-view"></another-element>
</iron-pages>
and inside handleClick function something like:
handleClick: function() {
this.$.main.renderImage();
}
Of course inside main-view element you can declare renderImage function which will handle rest of the logic
And don't forget to make some debounce since you don't want to propably render 20 new images in 1 second. You can use Polymer native debounce function
You can read more about it here: https://www.polymer-project.org/1.0/docs/devguide/instance-methods
I have a pair of elements <file-location> and <file-location-dialog>. If the user clicks on the <file-location> with the intention of changing it, it fires a custom event file-change-request which is being listened for on its domHost by the <file-location-dialog> element. When it receives this request it stores the event.path[0] value from the request just received, pops up a dialog, gets the new location, sends of an ajax request to update the database and then fires back at the stored event.path[0] element a file-location-updated event. The original <file-location> element receives this response and updates the screen accordingly with the new location.
I originally developed this because I had a set of search results (potentially up to 400) each of which had this file location. I thought I would save on overall dom-elements by centralizing the only occasionally used dialog and ajax elements. This has all been working fine in the search dialog.
I have recently come to develop a different page of my application where the <file-location> element was needed again. However, without thinking about it, I have embedded the <file-location> element in the local DOM of a custom element <pas-appointment> whereas the <file-location-dialog> element sits in the custom element for the page, which uses the <pas-appointment> element inside a <template is="dom-repeat">
Again this "appears" to be working fine.
Obviously, there should be no problem with the file-location-request bubbling up the hierarchy of elements, but I suddenly just realised that in essence the file-location-updated is piercing the shadow dom as it seems to pass seamlessly through the <pas-appointment> boundary as though it wasn't there.
OK, so it works - so why am I asking the question? I am developing some another elements that are going to be of a similar nature. Before I rely on this design pattern can I be sure that it will continue to work as browsers properly implement the shadow dom specs. In particular what is likely to happen when we get to Polymer 2.0 and the web-components v1 specs?
I'm using chrome, is there a way to record the html behavior/changes whenever I load a page, or whenever I click a button, so that I can analyse the loading pattern of the html?
I need to do this is because I'm using a scrollbar plugin, and whenever the page load, if the plugin is currently loading there will be a class name attach to the html tag (e.g. scrollLoad). Once the plugin is loaded, the class will be removed.
The problem is I need to get the right class name so that I can target it inside my css..., I'm wondering is there a way to preview the loading of a html page.
you can add a script, that is triggered on each page load.
With jQuery you could check if a page is loaded completely. You could go the other way arround and add the loading class by default and remove it, as soon as the loading is completed
$(function(){
console.log("DOM ready");
$('#element').removeClass('scrollLoad');
});
Maybe you can use the on() with the 'change' attribute?
http://api.jquery.com/on/
So I am playing around with the HTML service of GAS.
It has been working fine (more or less). But I hit a wall now.
I want the script (inside the html file) to create some html on when called.
In particular a few tags.
However, I want those tags to have onClick handlers (which will edit the div element).
Now the problem is that the onClick should depend on certain properties and I can not
pre-create those objects, they have to be made pragmatically and for some reason when I add a
onClick="someFunction(elementID)" after the new code has been added to the old one the click handler disappears.
(it works tho if the handler function has no parameters)
eg.
var div="<div id=\"box"+count+"\" class=\"square\" insert></div>";
if(something)
div=div.replace("insert", "onclick=\"myFunction(box"+count+"\"");
This is intentional and documented: see the section called "Dynamically adding scripts or external CSS" in the HtmlService user guide.