Pass value to the attributes of a lightning component from the visual force page.
inside vf page at some function call below code where c:dependancyapp is app and c:demoComp is component you need to add dependency of component inside app(c:dependancyapp) using dependany tag
dependancyapp App below
<aura:application access="GLOBAL" extends="ltng:outApp">
<aura:dependency resource="markup://c:demoComp" type="COMPONENT"/>
</aura:application>
VF page at some action in js
function clickMe(){
$Lightning.use("c:dependancyapp", function() {
$Lightning.createComponent("c:demoComp",
{ "someAttribute" : "attribute value"},
"lightning",
function(cmp) {
// do some stuff
});
});
}
Related
I am using Shopify "Streamline Theme" with quick product view and I recently added infinite scroll to products on each collection using Ajaxinate.js.
When I open a collection page it loads with some products which is supposed to do, The products already there work fine with quick view and quick add to cart and also.
The Infinite scroll works fine and it loads new product fine but the problem is raised when the new products loaded through AJAX call doesn't have work with the quick view function.
I have tried to create a callback function to activate the quick view with no success, using the theme initialisation code with no success.
function callBack(){
theme.init();
theme.initQuickShop();
};
document.addEventListener("DOMContentLoaded", function() {
var endlessClick = new Ajaxinate({
method: "scroll",
loadingText: 'Loading...',
callback: callBack
});
});
Edit -------
My problem, is that when the page is loaded only the initial loaded products quickview elements are loaded in the DOM. When the scroll more button is clicked, the newly loaded products are loaded without their respective quickview elements. Hence why the quickview does't work for them. The theme.js file comes with this initialisation code:
theme.reinitProductGridItem = function($scope) {
if (AOS) {
AOS.refreshHard();
}
if (theme.settings.currenciesEnabled) {
theme.currencySwitcher.ajaxrefresh();
}
// Reload quick shop buttons
theme.initQuickShop(true);
// Refresh reviews app
if (window.SPR) {
SPR.initDomEls();SPR.loadBadges();
}
// Re-register product templates in quick view modals.
// Will not double-register.
sections.register('product-template', theme.Product, $scope);
// Re-hook up collapsible box triggers
theme.collapsibles.init();
};
I have tried to integrate this into a callback but no success, the quickview modal doesn't seem to load for the newly loaded products:
function callBack(){
ReloadSmartWishlist();
var $container = $('#CollectionSection');
theme.reinitProductGridItem($container);
// I have tried the following init qith no success:
// theme.init();
// theme.initQuickShop(true);
// theme.initQuickShop();
// sections.register('product-template', theme.Product, $container);
// AOS.refreshHard();
};
document.addEventListener("DOMContentLoaded", function() {
var endlessClick = new Ajaxinate({
method: "click",
loadingText: 'Loading...',
offset: 0,
callback: callBack
});
});
I am missing something but what? :/
Note for other things like loading products images with the callback and the wishlist app, it works as intended...
When you load elements via AJAX and if the events are not attached to a parent element that is not removed from the DOM, those elements will not have an attached event to them.
The term used here is event delegation.
Here is an example of non-delegated event:
document.querySelectorAll('a').addEventListener('click', function(){
// Do something
})
Since you are attaching the event to the existing "a" elements if you add new 'a' via AJAX those elements will not have the event since Javascript already attached all the events and it will not reattach them if you don't specifically recall them again.
Here is an example of a delegated event:
document.querySelector('body').addEventListener('click', function(target){
let target = event.target;
if (target.tagName === 'A'){
// Do something here
}
})
Where we attach the event to the body tag ( where it's a better idea to attach it to a closer none-modified parent element of the ajax items ) and once we click we check if our target tag is an "a" and do something then.
So long story short, you will need to delegate the quick cart link so that it works after you load the items via AJAX.
Drip is correct you need to delegate your event, but for people like me it's hard to completely understand how to do that.
I'm not sure how your quickview is structured, but if you open it with a .click function and can use jquery use the [.on() function][1].
For example: I use a quickview that opens on a button click. My button is attached to my product-grid-item.liquid with this bit of code:
<div class="quick-view-button">
<a class="quick-view" data-handle="{{ product.handle }}" href="javascript:void(0);">Quick View</a>
</div>
My quickview function originally looked like this:
function quickView() {
$(".quick-view").click(function () {
//all of the quickview code
What happens is exactly like you described. The event listeners only loaded on the first product load but nothing after an AJAX load.
Using jquery's .on() binds the event listener to the element meaning when it's loaded in later it'll still have the event. Here's an example of what my code looks like after using .on()
function quickView() {
$('body').on('click','.quick-view',function(){
I really hope this helps you or someone else with this problem.
[1]: http://api.jquery.com/on/
I have written a JQuery plugin for some content which is tabbed content on desktop devices and an accordion on mobile devices. I've used the JQuery Boilerplate (https://github.com/jquery-boilerplate/jquery-boilerplate/blob/master/src/jquery.boilerplate.js) as a start point pattern for the plugin file.
I now need to use this plugin on the site within an ajax-loaded modal window. The HTML for the plugin is loading into the modal window fine but the javascript for the plugin is not running.
I believe I need to trigger the init function of my plugin from within the jQuery .load() function which loads the content of the modal window. The function for the ajax overlay looks like this:
menuOverlays = (function(){
var toggleMenuOverlay = function(){
//Toggle a class on the body which triggers styles for the overlay's appearance
$("body").toggleClass('overlay');
//Set the overlay expected to active
var $activeOverlay = $("#"+$(this).data("overlay-element"));
$activeOverlay.toggleClass('active');
//If there is a href on the link that the user clicked on, grab the URL from the link and load the content from that URL into the modal
if($(this).attr("href")){
var urlToLoad = $(this).attr("href") + " #ajaxContent";
$activeOverlay.find(".ajax-content").empty().load(urlToLoad);
}
return false;
};
return{
init: function(){
$("[data-overlay-element]").on("click", toggleMenuOverlay);
}
};
}()),
I have read the following on how to trigger JQuery Boilerplate plugin methods:
Call methods using jQuery Plugin design pattern
and thus tried this:
$activeOverlay.find(".ajax-content").empty().load(urlToLoad, function({
var $t2a = $('.tabs2accordion').tabs2Accordion().data('plugin_tabs2Accordion');
$t2a.init();
});
But I get:
Uncaught TypeError: Cannot read property 'data' of undefined
Any ideas?
I'm learning backbone / marionette js and i'm using a boilerplate to do so : https://github.com/BoilerplateMVC/Marionette-Require-Boilerplate-Lite
I have created 2 view (welcome / files) and 2 regions : mains and header.
In my headerRegion there is my navbar and I would like to handle the "active" class of my menu (template: header.html) on change or reload... but I can't figure out what is the best way to do it
I have defined a Region in my App.js :
App.addRegions({
headerRegion:"header",
mainRegion:"#main"
});
In my controller i create a new HeaderView on init:
initialize:function (options) {
App.headerRegion.show(new HeaderView(options));
}
And this is my HeaderView :
define([ 'marionette', 'handlebars', "App", 'text!templates/header.html'],
function (Marionette, Handlebars, App, template) {
//ItemView provides some default rendering logic
return Marionette.ItemView.extend({
template:Handlebars.compile(template),
initialize: function (options) {
_.bindAll();
},
onRender : function(options){
$('ul.nav li', this.$el).removeClass('active');
}
});
});
});
Thanks for your help :) !
What I do in my book on Marionette is to use Backbone.picky to manage which header model is the active one, and add the proper CSS class in that case. You can see the relevant header model selection here: https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/header/list/list_controller.js
And when the user enters the app via a direct URL (e.g. a book mark), I set the proper active header (e.g. https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/contacts/contacts_app.js)
I am using backbone.js and trying to stay strict to the model-view-controller structure as I learn it. I have an onclick function for a link in one of my views that I am not sure where to put. Is the best place to keep this in the render function of the view?
Thanks
More specifically, the onclick performs a facebook login and then adds the user to my database if they are not currently in it. Don't know if this changes anything.
Here is what I think I will go with:
var NewUserView = Backbone.View.extend({
el: $('#window'),
render: function(){
// Render
this.listeners();
},
listeners: function(){
// onclick and other listeners
}
});
From the Backbone documentation:
In Backbone, the View class can also be thought of as a kind of
controller, dispatching events that originate from the UI, with the
HTML template serving as the true view. We call it a View because it
represents a logical chunk of UI, responsible for the contents of a
single DOM element.
Here's the general way to handle events in Backbone:
var NewUserView = Backbone.View.extend({
el: $('#window'),
render: function() {
// Render
},
events: {
"click #facebookButton": "loginViaFacebook"
},
loginViaFacebook: {
// Perform facebook login and add user to database
}
});
Where do you want the link to appear? On View page right? So , you should keep it in the same view on which you want the link to appear.
But , if you are building an architecture rather than just a web application, then you should put the onclick function in some different file where you will keep all these function and then import them in the view as required or keeping them in separate files and bundling them for import on view page.
Please make a file and write all the functions in that file and include that file in the your view file and use the onClick in the anchor tag. Please let me know if this make sense.
I have a page that i want to remain static with two divs that i want to load different html views during user navigation. I want the content to change without refreshing the entire page, only refreshing those two divs.
How can i load a specific view into those divs?
I already have the menu navigation that determines the html views to be loaded into those divs and controller functions to the menu choices that i get using javascript and then use it in the controller of the main page, i just dont know how to load the content.
You can load the views using a bit of Javascript with AJAX.
With jQuery:
$('a.nav-button').click(function(e) {
// prevent the default action when a nav button link is clicked
e.preventDefault();
// ajax query to retrieve the HTML view without refreshing the page.
$.ajax({
type: 'get',
url: '/path/to/your/controller/method',
dataType: 'html',
success: function (html) {
// success callback -- replace the div's innerHTML with
// the response from the server.
$('#yourDiv').html(html);
}
});
});
I think you need to use a jquery and Codeigniter
This will be your jQuery Code
$('nav').click(function(){//element to be click to load the page in the div
$(your_div_element).load('controller/method');
});
This will be your Codeigniter
function method(){
$data['result'] = ''//you can use this if you need to pass some data to the view
print $this->load->view('your_view',$data,true);//This will load your view page to the div element
}
Goodluck!
In order to put content without refreshing you should use ajax, lets say you have divs in a file under a directory (webparts), and you want to add it's content to a div called my_div; first create a method on the controller that renders just the view (div) you want to put something like this
function part($part = false)
{
$data = array(); // you can add data to your div, if you need to.
$this->load->view("webparts/$part", $data);
}
Then with javascript (jQuery in this case) you can call
$('#my_div').load('controller/mypart');
Note: I like to use "load" because it allows me to select certain sections of the view Im requesting, using something like this
$('#my_div').load('controller/mypart #certainsection');
Will load the element with the id="certainsection" from mypart view