Use both Vue.js and jQuery autocomplete - javascript

I want to use both Vue.js and jQuery to make an autocomplete field displayed dynamically.
new Vue({
el: "#el",
data: {
toggle: false
}
});
var tags = [
"ActionScript","AppleScript","Asp","BASIC","C","C++","Clojure","COBOL","ColdFusion",
"Erlang","Fortran","Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP","Python",
"Ruby","Scala","Scheme"
];
$("#autocompleteSearch").autocomplete({
source: tags
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://unpkg.com/vue"></script>
<div id="el">
<input v-if="toggle" id="autocompleteSearch" type="search">
<button #click="toggle=!toggle">Toggle</button>
</div>
As you can see, it cannot work because of the v-if on the input. If I remove the v-if it works, but it is not displayed dynamically. How should I do?

There are a couple things to note here.
$(selector) looks up existing DOM elements at that point in time
For jQuery to find an element, it has to exist in the DOM when you perform the lookup. There are caveats to this regarding DOM Fragments, but that's not relevant for this particular question. So keep in mind that for jQuery to find something, it has to exist in the DOM.
Many jQuery UI methods initialize and transform elements
When you execute a jQuery UI method, like autocomplete, jQuery changes and creates markup on the page, related to the elements you are targeting. These methods can also keep internal variables related to the element as part of its initialization.
v-if creates and destroys elements
The purpose of the v-if is to say that, an element should only exist if some conditional is true. So if the conditional is false, it will not exist in the DOM. Also, if this conditional is subject to change, the element can potentially be created and destroyed many times.
So taking into account how v-if works, we can reflect on the two previous points.
If a v-if makes it so that an element does not exist when the jQuery selector runs, it will not find the element to initialize
If a v-if destroys an element, the jQuery UI widget may not function properly because it was related to the element that it initialized, and not a future element that is created to replace the previously created element.
With that in mind, when working with Vue and jQuery you have to keep in mind the needs of both, and how they may conflict with each other, such as in this case. The use of v-if is not necessarily the best directive to use when the element it controls is also used as part of a state in another library, such as jQuery.
In order to fix that, you can choose to use another directive, such as v-show or v-hide.
v-show and v-hide are two sides to the same coin. They determine if an element should be visible or not to the user. The distinct difference between these two directives and v-if is that v-show and v-hide do not remove the element from the DOM. They simply change the display state of the element.
So in relation to another library that relies on an element existing and using that element as part of some state management, this is great! You can control when your users see an element, and also potentially avoid conflicting with the secondary library, such as jQuery UI.
Having said that, this does not mean you should not use v-if. v-if is still useful for elements that should not exist at certain points in time. All this means is that you should be aware of the situation you are making, and consider any other logic in your application that may rely on those elements in order to minimize the chances of creating a bug.
TL;DR;
Here is the solution to your problem:
new Vue({
el: "#el",
data: {
toggle: false
}
});
var tags = [
"ActionScript","AppleScript","Asp","BASIC","C","C++","Clojure","COBOL","ColdFusion",
"Erlang","Fortran","Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP","Python",
"Ruby","Scala","Scheme"
];
$("#autocompleteSearch").autocomplete({
source: tags
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://unpkg.com/vue"></script>
<div id="el">
<!-- Just replace v-if by v-show -->
<input v-show="toggle" id="autocompleteSearch" type="search">
<button #click="toggle=!toggle">Toggle</button>
</div>

Related

How to programatically add vue directives to an element, i.e. v-if

We can programatically add custom attributes to an element like element.attr('data-attr', someValue) using plain JS, but what about Vue directives like a v-if
Given the following element
<p v-html="data.title"></p>
How can I add a v-if programatically? I am asking this for automation sake as there will be hundreds of dynamic variables that may or may not exist.
The desired outcome is
<p v-if="data.title" v-html="data.title"></p>
Only step I know is to grab the element in created() with a ref.
As per the statement - there will be hundreds of dynamic variables that may or may not exist. but if I see in one of your comment, You said no looping. Then How you are rendering the dynamic elements ?
As per my understanding, You want to dynamically bind the data properties into HTML template. You can give a try to this solution to see if it works as per your requirement.
new Vue({
el: '#app',
data: {
data: {
heading: '<H1>Heading 1</H1>',
title: '<h3>Title 1</H3>'
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<p v-for="(item, index) in Object.keys(data)" :key="index" v-html="data[item]"></p>
</div>
Above code snippet will always work for the dynamic properties that exists.

Best Way To Reload Element Oriented JS On Element Replace

What's the best way to re-initialize javascript without a page refresh
I'm currently trying to append an MDBootstrap <select> tag, which is not as simple as adding a child element. Instead I'm removing the element and reconstructing it with the updated data via AJAX request.
At the moment, the only possibility I see is just executing the code again after the element is recreated.
Apologies if this isn't clear enough.
What I'm attempting to try, which works, however it's not very clean:
$("#function-btn").click(function(){
$.get("api/endpoint/getprofiles", function(){}).done(function(data){
$(".select-wrapper.mdb-select.md-form").remove()
$("#charcontainer").html(data);
$('.mdb-select').materialSelect();
})
// Reinitialize other JQuery functions around the '.mdb-select' element (alot)
})
Consider the following html
<div id='wrapper'>
<div id='container'>
<span>Content</span>
</div>
</div>
If you're deleting and replacing #container you will not want to hook your selector on #container but rather your jQuery should hook onto the parent (#wrapper) first and then drill down.
Therefore it will look something like this.
$('#wrapper>#container').on('click',function(){
//do the thing
});
That way you're technically not hooking onto the element that's removed from the DOM but rather the parent (#wrapper) element even though the selector has the child.

Best practice in finding a DOM element

I want to toggle(hide/show) an element when a button is being pressed. I have two ways as to implement this:
Find the element according to its class name, e.g $('.my-content')
Find the element according to its relevant DOM position towards the button, e.g. $('#my-button').parent().next().next().next()
However, none of the above seems to me very reliable since in case someone changes the HTML code, the above approaches should not work. Is there something more reliable I am missing?
If it's a specific element, supply it with an Id value and use that
to find it.
If it's a TYPE of element, use a class name.
Other than that, there's no real conventions. Just try and make sure that somebody reading your code understands what is going on.
A very good practice is to decouple HTML, CSS and JS.
When binding javascript to DOM elements you should use javascript selectors.
Basically classes with some custom prefix (like js-) which will be used only for javascript purposes (not css style).
So whenever the DOM tree structure or the CSS class names are changed, you can still have your working JS selector
HTML
<div class="my-content js-toggle-element"></div>
JS
$('.js-toggle-element')
CSS
.my-content{ ... }
Plus, using Javascript Selectors:
makes HTML highly readable: you can easily find out what will happen to that element with that js class
allows you to easily apply/disapply that behaviour also to other elements in the future, simply by adding/removing that class in your HTML and without affecting CSS at all
<div class="my-content js-toggle-element"></div>
...
<div class="another-content-to-toggle js-toggle-element"></div>
Using jQuery will be much easiest way. Like this -
$( ".target" ).toggle();
The matched elements will be revealed or hidden immediately, with no animation, by changing the CSS display property. If the element is initially displayed, it will be hidden; if hidden, it will be shown.
Reference - jQuery Toggle
If the class or the position of the element in DOM is changing then you can try
selecting it with the inner text
$("button:contains('buttontextgoeshere')")

querying for elements that are inside binding helpers

In order to to get Polymer's data-binding without creating a custom element, I am using the "dom-bind" template helper. Later on, I am going to need to access the nodes inside the template so I can use masonry.js
to create a grid out of the data.
Here is the my template that is inside the main document:
<!-- Skills -->
<template is="dom-bind" class="careerSkills_consumer projects_consumer" id="resume-container">
<page-section id="resume">
<section-title>Skills and Projects</section-title>
<section-content>
<template is="dom-repeat" items="{{careerSkills}}">
<skill-category class="grid-item" title="{{item.header}}" skills="{{item.skills}}"></skill-category>
</template>
<project-showcase class="grid-item" projects="{{projects}}"></project-showcase>
</section-content>
</page-section>
</template>
The data itself is provided elsewhere and is irrelevant. The issue I am running into is that both dom-bind and dom-repeat seem to create local dom and put the result inside of it.
To create my grid, I need to access both the container for the grid, which will be the section-content element and the grid items, which are the skill-category elements inside the dom-repeat template.
If they all resided in the same document, I think could do (I am new to masonry, so this might not actually work):
document.addEventListener('WebComponentsReady', function () {
$('#resume section-content').masonry({
columnWidth: $('#resume skill-category')[0],
itemSelector: 'skill-category',
isFitWidth: true
});
});
But the queries don't seem to work because presumably the elements I need are hidden away from the main document in the shadow dom.
I was able to get access to the content inside #resume-container via:
Polymer.dom(document.querySelector('#resume-container')).node.content
However, I still can't get to the skill-category elements in the dom-repeat. This is getting kind of pedantic and I'm not even sure if it will work when masonry tries to do the positioning.
Is there a better way to go about this?
To be clear, this question is about how to properly gain reference to the content distributed inside of template helpers, but I would also appreciate any general advice to using polymer to do this sort of thing, where a custom element isn't exactly what I'm looking for since I'm only going to use the template in one spot and shadow dom is more hassle than help, but I need the data-binding.

How to implement unobtrusive javascript with dynamic content generation?

I write a lot of dynamically generated content (developing under PHP) and I use jQuery to add extra flexibility and functionality to my projects.
Thing is that it's rather hard to add JavaScript in an unobtrusive manner. Here's an example:
You have to generate a random number of div elements each with different functionality triggered onClick. I can use the onclick attribute on my div elements to call a JS function with a parameter but that is just a bad solution. Also I could generate some jQuery code along with each div in my PHP for loop, but then again this won't be entirely unobtrusive.
So what's the solution in situations like this?
You need to add something to the divs that defines what type of behaviour they have, then use jQuery to select those divs and add the behaviour. One option is to use the class attribute, although arguably this should be used for presentation rather than behaviour. An alternative would be the rel attribute, but I usually find that you also want to specify different CSS for each behaviour, so class is probably ok in this instance.
So for instance, lets assume you want odd and even behaviour:
<div class="odd">...</div>
<div class="even">...</div>
<div class="odd">...</div>
<div class="even">...</div>
Then in jQuery:
$(document).load(function() {
$('.odd').click(function(el) {
// do stuff
});
$('.even').click(function(el) {
// dostuff
});
});
jQuery has a very powerful selector engine that can find based on any CSS based selector, and also support some XPath and its own selectors. Get to know them! http://docs.jquery.com/Selectors
I would recommend that you use this thing called "Event delegation". This is how it works.
So, if you want to update an area, say a div, and you want to handle events unobtrusively, you attach an event handler to the div itself. Use any framework you prefer to do this. The event attachment can happen at any time, regardless of if you've updated the div or not.
The event handler attached to this div will receive the event object as one of it's arguments. Using this event object, you can then figure which element triggered the event. You could update the div any number of times: events generated by the children of the div will bubble up to the div where you can catch and handle them.
This also turns out to be a huge performance optimization if you are thinking about attaching multiple handlers to many elements inside the div.
I would recommend disregarding the W3C standards and writing out HTML-properties on the elements that need handlers attached to them:
Note: this will not break the rendering of the page!
<ul>
<li handler="doAlertOne"></li>
<li handler="doAlertTwo"></li>
<li handler="doAlertThree"></li>
</ul>
Declare a few functions:
function doAlertOne() { }
function doAlertTwo() { }
function doAlertThree() { }
And then using jQuery like so:
$("ul li").each(function ()
{
switch($(this).attr("handler"))
{
case "doAlertOne":
doAlertOne();
break;
case ... etc.
}
});
Be pragmatic.
It's a bit hard to tell from your question, but perhaps you can use different jQuery selectors to set up different click behaviours? For example, say you have the following:
<div class="section-1">
<div></div>
</div>
<div class="section-2">
<div></div>
</div>
Perhaps you could do the following in jQuery:
$('.section-1 div').onclick(...one set of functionality...);
$('.section-2 div').onclick(...another set of functionality...);
Basically, decide based on context what needs to happen. You could also select all of the divs and test for some parent or child element to determine what functionality they get.
I'd have to know more about the specifics of your situation to give more focused advice, but maybe this will get you started.
I haven't don't really know about JQuery, but I do know that the DOJO toolkit does make highly unobtrusive Javascript possible.
Take a look at the example here: http://dojocampus.org/explorer/#Dojo_Query_Adding%20Events
The demo dynamically adds events to a purely html table based on classes.
Another example is the behaviour features, described here:http://dojocampus.org/content/2008/03/26/cleaning-your-markup-with-dojobehavior/

Categories

Resources