Have been using simpleCart for a while and it works great and i know it has a search function in it but it only seems to search certain elements my question is this, i would like to know if it can be set up to search within the contents of html files? as all the items are stored in Html pages for simple cataloging.
try this: JS
function filter(e){
search = e.value.toLowerCase();
console.log(e.value)
document.querySelectorAll('.item_name').forEach(function(row){
text = row.innerText.toLowerCase();
if(text.match(search)){
row.style.display="block"
} else {
row.style.display="none"
}
// need to count hidden items and if all instances of .kb-items are hidden, then hide .kb-item
var countHidden = document.querySelectorAll(".item_name[style='display: none;']").length;
console.log(countHidden);
})
}
function detectParent()
{
var collectionref=document.querySelectorAll(".simpleCart_shelfItem");
collectionref.forEach(group=>{
var itemcollection=group.getElementsByClassName("item_name");
var hidecounter=0;
for(var j=0;j<itemcollection.length;j++)
{
if(itemcollection[j].style.display==='none')
{
hidecounter++;
}
}
if(hidecounter===itemcollection.length)
{
group.style.display="none";
}else{
group.style.display="block";
}
});
}
And HTML:
<input type="text" onkeyup="filter(this);detectParent();"/>
Related
I import some text strings from a translation API. Some of these strings contain HTML - also links. Some of these links must link to internal router links. For example some link. Clicking this link will ofcourse work - but it reloads the app, instead of pushing the link within the SPA.
What's the best method to make imported/external links act like vue-router links?
You really should be rendering the links with <router-link> if you want the clicks to be handled by vue-router instead of by reloading the page.
Otherwise you can intercept the clicks (via delegation) and navigate to the new route manually:
<div #click="onClick">
<!-- Render the HTML in here -->
Link
</div>
onClick(e) {
if (e.target.tagName === 'A') {
e.preventDefault();
// Manually navigate to the route
this.$router.push(e.target.href);
}
}
Although it is an old question I ran into the same problem yesterday and might help for future reference.
Trying the way #Decade Moon answered did not solve my problem as the href tag of an anchor comes with the window.location.origin.
So if I was at https://www.example.com/about and want to navigate to the homepage I was getting this URL https://www.example.com/about/https://www.example.com which it was not the expected result.
So my solution was to pass a data attribute in my template string:
const toHomepage = `<span data-href="/">Link to Homepage</span>`;
And then in my component:
<p #click="linkTo" v-html="link"></p>
See that the v-html directive will output my template string.
linkTo(e) {
if (e.target.dataset.href) {
this.$router.push(e.target.dataset.href);
}
}
A more sophisticated version of Decade's answer based on https://dennisreimann.de/articles/delegating-html-links-to-vue-router.html:
function onClick(event: MouseEvent) {
let target = event.target as HTMLElement
while (target && target.tagName !== 'A') {
target = target.parentNode as HTMLElement
}
const href = (target as HTMLLinkElement).href
if (target && target.matches("a:not([href*='://'])") && href) {
const { altKey, ctrlKey, metaKey, shiftKey, button, defaultPrevented } = event
if (metaKey || altKey || ctrlKey || shiftKey) { return }
if (defaultPrevented) { return }
if (button !== undefined && button !== 0) { return }
if (target && target.getAttribute) {
const linkTarget = target.getAttribute('target') as string
if (/\b_blank\b/i.test(linkTarget)) return
}
const url = new URL(href)
const to = url.pathname
if (window.location.pathname !== to && event.preventDefault) {
event.preventDefault()
router.push(to)
}
}
i have been working for hours on the live search concept, and i am having problems with just one part of the Code.
html
<input id="searchs" autocomplete="off" />
<div class="livesearch" ></div>
javascript
$(function () {
$("#searchs").keyup(function () {
var searchs = $(this).val();
$.get("livesearch.php?searchs=" + searchs, function (data) {
if (searchs) {
$(".livesearch").html(data);
} else {
$(".livesearch").html("");
}
});
});
$(".page").live("click", function () {
var searchs = $("#searchs").val();
var page = $(this).attr("id");
$(".livesearch").load("livesearch.php?searchs=" + searchs + "&page=" +page);
});
});
the part var page = $(this).attr("id"); is not working. The page shows the error below
Notice: Undefined index: page in C:\xamp\...
and this error comes from the livesearch.php file which intends to use the index.
I am new to this way of scripting.
what could be the problem?
the part where the error is coming from on livesearch.php
if($_GET["page"]){
$pagenum = $_GET["page"];
} else {
$pagenum = 1;
}
Try this:
$(".livesearch").load("livesearch.php", {
searchs: searchs,
page: page
});
You weren't properly encoding the search string, and it could cause problems parsing the URL. jQuery will do that for you if you put the parameters in an object.
I have a form with dynamic fields. In the afterrender event of the form I want to set the afterLabelTextTpl property. I can set this property but I can't see it change in my form. How can I achieve this?
Snippet:
listeners: {
beforerender: function () {
var fields = me.getForm().getFields();
Ext.each(fields.items, function (f, idx) {
f.afterLabelTextTpl = requiredTpl;
console.log(f.afterLabelTextTpl);
}); //eo Ext.each
}
}
Edit:
I was looking for the beforerender method
Try
f.labelEl.dom.innerHTML = "LABEL:<span style='color:red;font-weight:bold' data-qtip='Required'>*</span>";
You can not use this property after the component is already rendered.
The initRenderTpl (which makes use of the label templates) method is run only if the component is not yet rendered. Once its rendered it will not run again.
You will need to update the DOM directly.
I would recomend something like this in your form:
setRequired: function(field, index) {
field.afterLabelTextTpl = requiredTpl;
},
initComponent: function(arguments) {
var me = this;
this.on('beforeadd', function(me, field){
var fields;
if (field.isXType('fieldset')) {
fields = field.query('field');
Ext.each(fields, me.setRequired);
} else {
me.setRequired(field);
}
});
// rest of logic
me.callParent(arguments);
},
I am using search option in the list . There is provision to add new items to the list. The problem is that when I add a new item to the list, the list is getting updated , but I cannot search that item through the search field. But after refreshing the browser, we can. But it is not possible to refresh browser each time....... Is there any solution for this problem?
Here is the code I am using to search the list.
xtype: 'searchfield',
placeHolder: 'Search',
name: 'searchfield',
id:'subListSearch',
listeners : {
scope: this,
'focus': function() {
Ext.getCmp('xbtn').show();
},
keyup: function(field) {
var value = field.getValue();
if (!value) {
Store.filterBy(function() {
return true;
});
} else {
var searches = value.split(' '),
regexps = [],
i;
for (i = 0; i < searches.length; i++) {
if (!searches[i]) return;
regexps.push(new RegExp(searches[i], 'i'));
};
Store.filterBy(function(record) {
var matched = [];
for (i = 0; i < regexps.length; i++) {
var search = regexps[i];
if (record.get('Name').match(search)) matched.push(true);
else matched.push(false);
};
if (regexps.length > 1 && matched.indexOf(false) != -1) {
return false;
} else {
return matched[0];
}
});
}
}
}
There is also some other problems. I using some provision to filter the list. But when I uses the search option, it is searching through the entire list, not the filtered list.why?
Thanks
Arun A G
Thanks for responding to my question .
The problem is fixed with bindStore() method. Earlier I was doing load() method to render the new data into the store. But we can not search the last entered item with this method. After binding the Changed store into the list with bindStore() method, the issue was solved.
I can't seem to get a handle on my list of sortables. They are a list of list elements, each with a
form inside, which I need to get the values from.
Sortables.implement({
serialize: function(){
var serial = [];
this.list.getChildren().each(function(el, i){
serial[i] = el.getProperty('id');
}, this);
return serial;
}
});
var sort = new Sortables('.teams', {
handle: '.drag-handle',
clone: true,
onStart: function(el) {
el.fade('hide');
},
onComplete: function(el) {
//go go gadget go
order = this.serialize();
alert(order);
for(var i=0; i<order.length;i++) {
if (order[i]) {
//alert(order[i].substr(5, order[i].length));
}
}
}
});
the sortables list is then added to a list in a loop with sort.addItems(li); . But when I try to get the sortables outside of the sortables onComplete declaration, js says this.list is undefined.
Approaching the problem from another angle:
Trying to loop through the DOM gives me equally bizarre results. Here are the firebug console results for some code:
var a = document.getElementById('teams').childNodes;
var b = document.getElementById('teams').childNodes.length;
try {
console.log('myVar: ', a);
console.log('myVar.length: ', b);
} catch(e) {
alert("error logging");
}
Hardcoding one li element into the HTML (rather than being injected via JS) changes length == 1, and allows me to access that single element, leading me to believe that accessing injected elements via the DOM is the problem (for this method)
Trying to get the objects with document.getElementById('teams').childNodes[i] returns undefined.
thank you for any help!
not sure why this would fail, i tried it in several ways and it all works
http://www.jsfiddle.net/M7zLG/ test case along with html markup
here is the source that works for local refernece, using the native built-in .serialize method as well as a custom one that walks the dom and gets a custom attribute rel, which can be your DB IDs in their new order (I tend to do that)
var order = []; // global
var sort = new Sortables('.teams', {
handle: '.drag-handle',
clone: true,
onStart: function(el) {
el.fade('hide');
},
onComplete: function(el) {
//go go gadget go
order = this.serialize();
}
});
var mySerialize = function(parentEl) {
var myIds = [];
parentEl.getElements("li").each(function(el) {
myIds.push(el.get("rel"));
});
return myIds;
};
$("saveorder").addEvents({
click: function() {
console.log(sort.serialize());
console.log(order);
console.log(mySerialize($("teams")));
}
});