I am using ReactJS to render a like/unlike component for an object in a django project. I have a list page where I have a list of objects and for each object I render a LikeUnlike component as follows:
<div class="object">
<span id="likes-service-{{service.pk}}"></span>
<script type="text/jsx">
React.render(<LikeUnlike object_id="{{service.pk}}" app_label="providers" model_name="providerservice" like_count="{{service.like_count}}" liked="{% user_has_liked 'providers' 'providerservice' service.pk request.user.pk %}" />, document.getElementById("likes-service-{{service.pk}}"));
</script>
</div>
On the very first page every thing works. The component renders and works as expected. The issue comes in when I scroll down and the second page is loaded via ajax (as I am using django-endless-pagination). For any pages loaded via ajax, the component is not rendered and all I see is a blank <span id="likes-service-{{service.pk}}"></span> element.
I have tried logging document.getElementById("likes-service-{{service.pk}}") and few other things and seems like the element, React library etc. are available.
I can't figure out why the component is not rendered when the page is loaded via ajax. Any Ideas ?
Related
I'm trying to create a simple app to learn Laravel with VueJS. I created a JetStream sample app with InertiaJS but seem to have gotten stuck on something that is probably just related to a fundamental misunderstanding.
I have added a link to my navigation section, which renders a Vue component, which uses GridJS to display a list of all users. Now when I check in Chrome's DevTools Network tab, the request seems to route correctly, but the template in the page doesn't get added to the DOM. I have some JS in the same document which gets a link hook, and it then uses that to look up a querySelector, but doesn't find it. The link is in the same file but within a template block, so the template block contents are obviously not being added to the DOM.
Here is my route:
Route::get('/user/view', function() {
return Inertia::render('UserList');
})->name('user.view');
Here is my Vue component (just relevant part):
<template>
<div class="row">
<div class="col-lg-12">
<div js-hook-url="{{ route('user/view') }}" js-hook-table-users></div>
</div>
</div>
</template>
<script>
import { Grid, html } from "gridjs";
import "gridjs/dist/theme/mermaid.css";
const USER_TABLE = '[js-hook-table-users]'
const TABLE_USERS_WRAPPER = document.querySelector(USER_TABLE);
const TABLE_USERS_URL = TABLE_USERS_WRAPPER.getAttribute('js-hook-url');
So the error happens on the last line there, because the node does not exist in the DOM and so is not picked up by the querySelector, so getAttribute gets called on null. Again, I'm sure this is a fundamental issue being new to Laravel and Vue. TIA
I have to create multi page angular framework using ng boilerplate. We have modular component based approach and single component can be created multiple times on same page. For example I can have 2 instance of carousel component on home page and there configuration and slides parameter for image path etc are coming from ajax. Now challenge is that this ajax url is dynamic and there is no fixed pattern so I cant hard code in my js. is there any way I can pass this dynamic url from template to my $http request?
Something like this in
<div ng-controller="CarouselCtrl" carouselUrl="<dynamic url>">
<div class="container slider">
<ul>
<li ng-repeat="slide in slides">//..</li>
</ul>
</div>
</div>
You can pass attributes to controllers only in directives. Moreover, you might rethink having your CarouselCtrl logic in separate directive, as this is clearly the case where this should be done.
I am trying to use single page mobile site. Basically I have a listview inside container and click event for list class.
<div role="main" class="ui-content">
<ul data-role="listview" data-inset="true">
<li class="listbtn">
</li>
</ul><!-- /listview -->
</div><!-- /content -->
I have a script for firing "listbtn" click event
$(".listbrn").click(function(){
});
this is working fine when page loads for first time
On another event, I am pulling data and replacing the whole "listview" with new items.
After DOM manipulation is successful, I have used
$('.ui-page-active .ui-listview').listview('refresh');
$.mobile.activePage.trigger('create');
as suggested on other threads.
Up to this point everything is smooth, page refreshes with new items and CSS applied nicely as expected.
Only problem is "listbtn" click event is not firing after that.
While looking for answers, I found this thread and tried to use live as suggested but after changing to live page won't load at all. Loading gif images spins forever.
Any suggestion or ideas?
jQuery 2.0
jQM 1.4.2
Thanks
You need to delegate event to dynamically added elements.
Another note, you don't need $.mobile.activePage.trigger('create');, .listview("refresh") is enough to re-enhance list-view. Not to mention that both $.mobile.activePage as well as .trigger('create') are deprecated and will be removed on jQM 1.5.
$(document).on("click", ".listbtn", function () {
/* code */
});
Demo
I want to load a webpage in several parts, maybe using jquery ajax or just simple javascript ajax functions so the user can start interacting with the webpage withouth having to wait for the whole page to load. Just like gmail does.
How can I achieve such a thing?
Generally you need to dedicate some div containers for inserting dynamically loaded contents.
<div id="header"></div>
<div id="content"></div>
<div id="sidebar"></div>
<div id="footer"></div>
Then you can load other pages on startup.
$(function(){
$('#content').load('content.php');
$('#content').load('sidebar.php');
});
Of course this is only a start. You have to check for errors on loading and retry. Also using hash value you can dynamically load content & sidebar. etc..
I'm using the Jquery UI tabs functionality to load content via ajax. I'd like to load a particular div in the ajax call, not the entire page. Is this possible without using jQuery's load()?
As you can see from the code, it's a stock standard basic jQuery tabs implementation, but I want a particular div rather than the full page.
Here's my html:
<div id="tabs">
<ul>
<li>Tab One</li>
<li>Tab Two</li>
<li>Ajax tab</li>
</ul>
<div id="tab-1>Tab one content</div>
<div id="tab-2>Tab two content</div>
</div>
And the inline script:
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
Anyone know if this is possible?
Nathan.
Yes, it is possible. Use jQuery ajax "load" function. Example:
$('#result').load('ajax/test.html #container');
For your 3rd tab you should manually load content via ajax call, also you can define selector which exactly part of loaded page you need. So, create 3rd tab as via general way, load page content for 3rd tab and create tabs. Or you can dynamically load 3rd tab's content when the user clicks on tab.
More information here: http://api.jquery.com/load/, please see paragraph "Loading Page Fragments".