I broke my JavaScript code after installing a JQuery Pagination library - javascript

I have no clue what to do to fix this.
I've installed a JQuery library (http://st3ph.github.io/jquery.easyPaginate/) to help me paginate my data. I am also using Vue.js to make things easier. However, after installing the plugin, and seeing that pagination does in fact work, I noticed that my click handlers stopped working! In fact, I have some filters that also call other Javascript function to execute the filter code... but they are all not working. After inspecting the HTML code using Chrome's Developer Tools (F12)... all I can see is that the plugin is adding an 'easyPaginate easyPaginateList' class to the tags.
So... the plugin makes the <ol> tag look like:
<ol id="cards" class="easyPaginate easyPaginateList">
Anyway,
My HTML looks like this:
<div id="BrowseCards">
<ol id="cards">
<li v-for="(card, i) in cards" v-on:click="cardDetails($event)">
<span :id="card.Id" style="display:none"></span>
<img src="card.ImageUrl"/>
<h2 name="title">{{card.Title}}</h2>
</li>
</ol>
</div>
The Javascript looks like:
<script>
methods: {
cardDetails: function (event) {
var cardId = $(event.target.parentElement)[0].firstChild.id;
window.location = 'https://' + location.host + '/Home/CardDetails/?cardId=' + cardId;
},
...
[*** other Javascript functions ***]
...
setupPagination: function () {
$('.easyPaginate').easyPaginate({
paginateElement: 'li',
elementsPerPage: 4,
effect: 'slide'
});
},
mounted: function()
{
this.setupPagination();
}
</script>
The Problem: This was working before but, now, all my scripts don't fire.
My Question for You:
1. What am I doing wrong/what am I missing?
2. And, how do I integrate a pagination plugin that does NOT break my code?
Thanks in advance.

I ended up solving this with the help of #Roj's, and others' comments, and going from their clues/leads. Basically, it's ill-advised to use a JQuery pagination plugin when you are coding with Vue.js. I was able to solve this issue by, instead, using a Vue.js plugin for pagination.
I implemented what these two articles detailed, and solved the issue.
https://medium.com/#nickpgott/how-to-use-vue-bootstrap-to-paginate-a-list-of-items-3b8e67093c07
https://bootstrap-vue.org/docs/components/pagination/
Pagination now works for me on my app. Thanks and happy holidays!

Related

Replacing the text by using jQuery script in shopify platform on the product page

Please help me out I'm a beginner in the Shopify platform and don't understand how to add my script to Shopify files.
Please help me with where and in which file should I place the code to replace the text on the product page. I need to change the Price text with M.R.P see the screenshot for reference: https://prnt.sc/xFWR-QIpVkPr
Here is the product page URL: https://uniqaya.com/products/exfoliating-body-scrub-polisher-with-coffee-grape-seed-oil?_pos=4&_sid=322f78f1b&_ss=r
See the code that I have used for scripting to replace, the HTML below is from the product page. I'm a little confused that the js library functions $ and jQuery both don't work in Shopify. Please help and give me the best solution to do this.
$(document).ready(function() {
$('.product-block product-block--price .variant__label').text('M.R.P');
});
<div data-product-blocks="">
<div class="product-block product-block--price">
<label class="variant__label" for="ProductPrice-template--15540147159204__main">
Price
</label>
</div>
</div>
the text with mine.
$(document).ready(function() {
$('.product-block--price label').text('M.R.P');
});
With js
document.querySelector('.product-block--price label').innerHTML = "M.R.P"

How to toggle css visibility with Javascript

I am trying to create a FAQ page much like the one here: https://www.harrys.com/help
I want to create the effect where clicking a question will display an answer.
My code can be seen here: http://jsfiddle.net/8UVAf/1/
Can anybody tell me why my javascript is not working? I realized I combined jQuery and Javascript, but I read somewhere that it should compile fine.
HTML:
<div class="questions-answer-block">
<p class="question">This is a Question?</p>
<p id="answer" class="hideinit">Here is the Answer</p>
</div>
<div class="questions-answer-block">
<p class="question">This is a Question?</p>
<p id="answer" class="hideinit">Here is the Answerdadawdawdawdawdawdawdawdwadawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawd</p>
</div>
JS:
$(".question").click(function (argument) {
if(document.getElementById("answer").className.match(/(?:^|\s)hideinit(?!\S)/)) {
document.getElementByID("answer").className = "display";
}
});
Basically your Javascript could be shortened to:
$(".question").click(function(argument) {
$(this).parent().find(".answer").removeClass("hideinit").addClass("display");
});
In order to make this work the only other thing you need to do is to make question a class rather than as an id. That looks like:
<p class="answer hideinit">the answer</p>
See the fiddle here
Edit: Add Hide / Show
To get this to hide and show as expected you'll want to update the code to check the current class before hiding and showing. That looks like:
$(".question").click(function(argument) {
var el = $(this).parent().find(".answer");
if (el.hasClass("display")) {
el.removeClass("display").addClass("hideinit");
} else {
el.removeClass("hideinit").addClass("display");
}
});
See the fiddle here
Well, for one thing, in your JSFiddle you were not including the jQuery library. I've adjusted your code, I think this is what you were going for:
$(".question").click(function() {
$(this).siblings().toggle();
});
Here's an updated JSFiddle.
Please watch your includes in your JSFiddle as the version you linked was not including the jQuery library. You should also clean up your multiple id references (as this is invalid HTML and will cause some issues down the road).
Those issues aside, you can use jQuery's .next() method to help you with this particular problem:
$(".question").click(function (argument) {
$(this).next(".hideinit").removeClass("hideinit").addClass("display");
});
JSFiddle
$(".question").on('click',function() {
$(this).next().toggle();
});

My div show/ hide code works fine on a static HTML page but doesn't work on a Wordpress 3.5.1 page

This is sort of a condensed version of the code, the real version is too long to post but this is enough to represent the concept. I am using this to switch guitar diagrams based on several choices represented by anchors with the corresponding id in the href="". After spending several days getting it to work just right on a static html page, the script won't work in a Wordpress page which is where I intend to use it. I have tried it with the script in the head or inline (which shouldn't matter) - but either way it will not function. I know that Wordpress and certain plugins use Jquery so there may be a version mismatch causing conflicts. I am not (yet) an expert in javascript but I know there are several ways to skin a cat as the saying goes, I just need to find one that plays nice with Wordpress. Any help would be greatly appreciated...
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var divswitch = $('div.diagram_container a');
divswitch.bind('click',function(event){
var $anchor = $(this);
var ids = divswitch.each(function(){
$($(this).attr('href')).hide();
});
$($anchor.attr('href')).show();
event.preventDefault();
});
});
</script>
<style>
.diagram {
margin: 0;
width: 100%;
}
.diagram_container {
width: 100%;
}
</style>
<div id="RH_RW_Div" class="diagram_container" style="float:left; display:block;">
<div class="diagram_menu">
<a class="checked" href="#RH_RW_Div"><span class="checkbox_label">Right Handed</span></a>
<a class="unchecked" href="#LH_RW_Div"><span class="checkbox_label">Left Handed</span></a>
</div>
<img class="diagram" src='images/RH_RW.gif' /><br />
</div>
<div id="LH_RW_Div" class="diagram_container" style="float:left; display:none;">
<div class="diagram_menu">
<a class="unchecked" href="#RH_RW_Div"><span class="checkbox_label">Right Handed</span></a>
<a class="checked" href="#LH_RW_Div"><span class="checkbox_label">Left Handed</span></a>
</div>
<img class="diagram" src='images/LH_RW.gif' /><br />
</div>
Wordpress uses by default jQuery.noConflict(). This is to assure that there is no conflict by other libraries using the $ variable. That's why your console says it's not a function.
However, obviously, the jQuery variable still works, and you should use that, and passing to your function the $ variable yourself to enable the shorthand version of jQuery.
So your code should look like this:
jQuery(document).ready(function($){
// Your functions go here
});
My guess is that your Wordpress install or a plugin is already loading up jQuery in the head. Check to see if it exists there, and if it does, don't call it again.
If that doesn't do it and you have this site online, send me the link and I'll take a look.
Calling jQuery twice will often lead to problems. There is also a proper way to load jQuery and override the Wordpress version if you specifically need 1.8.3 (wp_register_script and wp_enqueue_script), but I don't think you need to go down that route yet.

jsFiddle code doesn't run on Aptana

(first of all, a disclaimer: I'm a JavaScript / MooTools newbie, so it's very likely that the solution may be a trivial miss)
With some help, I was able to put a simple slider to run properly on jsFiddle, using MooTools. It is here -> http://jsfiddle.net/wowenkho/uGcTx/
Now, I want to reproduce it on my own PC. I learn from some threads here that I have to wrap jsFiddle code. In Aptana, I've got the code like this:
<html>
<head>
<script type="text/javascript" src="mootools_v1_2.js"></script>
<script type="text/javascript">
$(function()
{
window.addEvent('domready',function()
{
var s = new Slider(document.id("slider-1"), document.id("slider-input-1"),
{
onChange : function(step)
{
document.id("q1_r1").set('value',step);
document.id("value").set('html',step);
}
});
window.onresize = function () {
//s.recalculate();
};
});
});
</script>
</head>
<body>
<input name="q1_r1" id="q1_r1" type="hidden">
<span id="value">0</span>
<p ><div class="slider" id="slider-1" tabIndex="1">
<input class="slider-input" id="slider-input-1" />
</div>
</body>
</html>
I do know that the MooTools version I'm using isn't exactly the same (jsFiddle is using 1.2.5, I'm using 1.2.1). I could try to use 1.2.5 here (and I will, meanwhile), but that's not the purpose, since I have to use 1.2.1. I also do know MooTools is running well, at least theoretically, since I've made the "hello world" before and it worked.
How this is at the moment, I only see the span and a text box, instead of the slider.
I guess I'm missing something trivial here.
Thanks all possible help in advance,
Jaff
There are two problems with your implementation the first is simple take it out of the $function wrapper if you look in the console your domready function is not getting called.
window.addEvent('domready',function()
{
var s = new Slider(document.id("slider-1"), document.id("slider-input-1"),
{
onChange : function(step)
{
document.id("q1_r1").set('value',step);
document.id("value").set('html',step);
}
});
window.onresize = function () {
//s.recalculate();
};
});
The second is that you are actually using a plugin for mootools. If you look at your js fiddle it says using mootools more 1.2.5.1. It's inside the more part that you find the slider class. If you don't have that then slider is not defined. So make sure when you download the core mootools which is required for all plugins that you also check the more and slider boxes. On the mootools website when you go to 1.2.5 download for core go to the more builder and you can add those.

get clean HTML from emberjs handlebars application

I've been building a HTML (email/page) composition tool in Ember.js as a way of getting my head round it, I guess it's a sort of WYSIWYG.
A user adds various objects with different values (link, text etc.), the objects can have different templates and be arranged with jQuery UI which feeds back to the controller. What the user sees on screen is actually spot on and I am currently saving and reloading clean JSON from localstorage as a method of persistence.
What I'd really like to do though, is being able to generate a clean HTML version of what the user is seeing. Either from something written into the front end application or by processing the JSON I export on the server side.
I'd like to keep as much in JS, Ember and Handlebars as possible, and Ideally not re-implement too much of my templates/code in different places.
An example of a 'row' in my rendered output is below.
.row-controls is toggled on and off by a global editor toggle.
<script id="metamorph-11-start" type="text/x-placeholder"></script>
<div id="ember507" class="ember-view template-row ui-droppable">
<ul id="ember524" class="ember-view row-controls">
<li class="dragger">drag</li>
<li class="type">type</li>
<li class="edit">edit</li>
<li class="delete">delete</li>
</ul>
<script id="metamorph-12-start" type="text/x-placeholder"></script>
<script id="metamorph-13-start" type="text/x-placeholder"></script>
<h2><a href="http://foo.com/bar" data-bindattr-34="34">
<script id="metamorph-19-start" type="text/x-placeholder"></script>
Link title text
<script id="metamorph-19-end" type="text/x-placeholder"></script>
</a></h2>
<img src="http://foo.com/image.png" data-bindattr-35="35">
<script id="metamorph-20-start" type="text/x-placeholder"></script>
Teaser/synopsis
<script id="metamorph-20-end" type="text/x-placeholder"></script>
Read more
<script id="metamorph-13-end" type="text/x-placeholder"></script>
<script id="metamorph-12-end" type="text/x-placeholder"></script>
</div>
<script id="metamorph-11-end" type="text/x-placeholder"></script>
I guess It might seem like an odd thing to be doing, with limited practical application but I'd like to finish it now I've started :) Also, I think the principles involved in any answer could probably have different application, I just haven't thought of it yet
Thanks! And thanks to the other people on here for answering my previous few questions about Ember.
EDIT
Just be clear, I'm talking about getting output like this
<h2>Link title text</h2>
<img src="http://foo.com/image.png">
Teaser/synopsis
Read more
SOLUTION EDIT
In case anyone finds this link - I've added (to my standard JS version) a check for attr within the attribute loop.
<script>
// ...
return $.each($this[0].attributes, function(index, attr) {
// this bit added
if(!attr) {
return;
}
if (attr.name.indexOf('data-bindattr') === -1) {
return;
}
// ...
</script>
It could have been an error in some other code I had going on, but jQuery was passing 'undefined' as attr in the loop. jQuery seems to want to resolve the whole each function so I couldn't debug exactly what this was. The check seems to be working for me at the moment though.
Not sure how to factor into the particular original coffeescript file I'm afraid.
ghempton from CodeBrief talks a little about it on this awesome post: http://codebrief.com/2012/03/eight-ember-dot-js-gotchas-with-workarounds/
Check tip 7.
Read all of them too, its worth it.
By the way, it's on coffeescript the post, if you need to get the JS version go to http://coffeescript.org/ on the Try Coffeescript tab and convert it!

Categories