I want to get the value of the inserted liquid objects. But all I'm returning is the actual text and not the values. But if I just manually insert that same div into the head and just run the logging to the console, it works fine.
I think this is a timing issue, but I can't figure it out. I am able to insert this div into the head of the pages on this shop test-4658.myshopify.com
I am appending it to the head like this:
$('head').append('<div id="todd" class="{{customer.name}} {{shop.domain}}"></div>');
I confirm it by looking into the web console, but instead of getting the liquid object values, I'm just getting the text. I'm logging that to the console like this:
$(function(){
var name = $("#todd").attr('class');
console.log(name + " me");
});
Where did I go astray?
Here's a Shopify forum thread that discusses using Liquid variables in JavaScript that should help: https://ecommerce.shopify.com/c/ecommerce-design/t/using-liquid-in-javascript-trying-to-get-collection-title-in-jquery-callback-53043
Feel free to use customer.name in your JavaScript, simply do so in
your Liquid templates, not in a .js.liquid file. You can totally use
JavaScript in your theme's templates.
Seems like it comes down to how you implement the JS with those tags.
Related
I have searched ALOT for this question and didnt find an answer,
I designed a complex HTML template and I tried to make a Joomla template based on it
I found the whole process time consuming and I cant get exactly same result as I wanted, also even If I do this I dont have a user friendly Joomla panel and for changing every module and component the Admin should know a basic HTML understanding to edit my tags and doesnt mess up my code
so I realized what If I use modern Joomla template instead with a user friendly panel
and bring the content to the page and rewrite the whole DOM via Javascript like this
1)first make variables and store the content on the rendered template
2)$('body').innerHTML = "" (make the DOM empty)
3)$('body').innerHTML => rerwrite my structure using variables I stored
then every element is exactly the same and my css, js files do the rest
Is it usual to do this way?
whats the problem with this method?
Thanks
I have a javascript file that needs to count how many classes (.wrapper) there are in a external html page.
So far i have been using this for a count (it was previously all on the same page).
var adCount = $('.wrapper').size();
alert(adCount);
But i can't seem to find anything that would allow me to run this statement on a different page than the code is runing on. I was hoping to add something like this.
var adCount = $('js/sliderExternal.html .wrapper').size();
alert(adCount);
They are in the same directory but I'm keeping the pages seperate as the external page needs to be updated constantly and i don't want it in the middle of a page of code. (This page may be updated by people who don't code at all). Anyway, any help on this would be much appreciated.
If you need any more information ask away!
Thanks.
This should work:
$.get('js/sliderExternal.html', function(data){
$(data).find('.wrapper').size();
})
Also see API Doc for $.get().
You would have to load the page into your html first using document.load() and append() it to your DOM structure. Once you do this you can use JQuery to find the number of classes within it.
Load that external html inside some div having visibility false.something like this:
$('#id_of_div').load(external_url)
and then find the length using:
var numItems = $('.wrapper').length
I have a huge(around 20mB) html page which is nothing but pure text. It is a log file for some code running on a server. Now, I am trying to write a chrome plugin which automatically parses this page when someone opens it and adds appropriate links according to my need at certain places.
The page looks like this
<html><head></head><body><pre> 20mB of pure text </pre></body></html>
So, two questions, second dependent on first, which would help me.
(I am using pure javascript till now. No libraries yet.)
1) How do I parse the page?
2) There is some information in the first 3-4 lines. How do I easily get those first few lines and get the data out of it ( if parsing the whole page is not going to be easy)?
What are you trying to parse the page for, are you creating a summary?
for Starters, you can get the first 4 lines by adding an id to the pre tag and doing this:
var first4Lines = document.getElementById("theIdTagOfThePre").innerHTML.split("\n",4);
if that didnt work right you have to switch the '\n' to a '\r\n'.
At the moment I'm working on a mobile website that stores pages in a local database. At the bottom are some basic buttons to navigate to other pages and when you press them I wanted to use jquery's .html function to replace the body content with other html strings from the database. The problem I found is when we go to our contact form page the user can't really use the form fields. They show up, but they're not clickable. I've also noticed that you can't execute javascript functions that are loaded in trough the .html function.
Hopefully you can help me with this problem or suggest a workaround. Thanks
Some jQuery functions strip out script and style tags (e.g. .replace()). That isn't a bug but documented somewhere – unfortunately I can't find that piece of documentation right now.
But that should be no problem in the case of form fields. They should get inserted without any problems.
Here is an example that illustrates your problem.
Explanation:
jQuery html seems to not process some tags, although it does. The problem is when trying to execute jQuery UI related functions on an element not within the DOM
the exemple above shows the difference between calling button jqueryUI function after and before appending the element to the DOM
a generic workaround to solve this problem is:
var div = $('<div></div>').hide().appendTo('body');
then do whatever you want with the div
I have a website where I want to use MagicZoom.
Everything would be fine since it is easy to implement, but there seems to be an error when loading the js file.
I will send you the website which is currently under construction.
MagicZoom should be implemented there, where you chose your fabric, for a close-up.
I think, but of course this is only my opinion and I'm not an expert, that the problem occurs because the div container with the picture is created dynamically from another PHP file and not present onload. Therefore the JavaScript does not work properly.
You will see that in the second step the zoom does not load although the class is set correctly.
Your error says "prettyPhoto is not a function". This tells me that some script is trying to use the "prettyPhoto" object before that script has been included on the page.
Looking at your HTML header, I see that is among the last of the <script> tags. Try moving the <script> tag where you include that library in your HTML header up a couple of lines, above some of the other includes. Be aware - you can't move it above the includes for jQuery!
Try that out, let us know.