Listview Updating, jQueryMoble - javascript

I am trying to update or replace a list and keep the styles that were present before the update. Reading form the jQuerymoble website it says that the refresh() method call only works on new nodes. I am using the .html call to update the list and not .append. I am not sure if that is where I am having problems but the refresh call is not working in any case. My new list does not have the correct styles. I am using .html because many nodes are removed/added at the same time so append would not really work in my case.
Sample Code:
<script>
$(document).ready(function(){
$("#quicksearch").keyup(function() {
$.getJSON(search,function(data){
newlistcode= data //formatted correctly for a new list
$(“ul”).html(newlistcode);
$(“ul”).listview(‘refresh’);
});
});
});
</script>
<div data-demo-html="true">
<ul data-role="listview" class="list" id="listview1">
<li>test</li>
</ul>
</div>

Change
$(“#listview1”).html(newlistcode);
$(“listview1”).listview(‘refresh’);
to
$(“#listview1”).append(newlistcode);
$(“#listview1”).listview(‘refresh’);
Where
newlistcode = '<li><a>content</a></li>';

Related

which/how to properly use a loop for html change with Javascript?

I am new in Javascript and trying to change the HTML content of a line.
I've been helped a little by a friend who made this code for me, but I'm running into major issues.
The situation is:
I'm creating a FAQ in SharePoint 2013, and this code is supposed to read a list, read 3 informations (Category, Question and Answer) and then substitute the HTML where I want it to.
The issue is that it is running on every '.cd-faq__trigger' that is inside it's "i.category", changing them all to the same "i.question"
function ChangeHTML(){
var items = GetListItems("X", "Y", "Z")
items.forEach(function(i){
$('#'+i.category+' .cd-faq__trigger').html(i.question)
});
}
}
-----------------HTML ------------------
<div class="cd-faq__items">
<ul id="Compras_TI" class="cd-faq__group">
<li class="cd-faq__title"><h2>Compras TI</h2></li>
<li class="cd-faq__item">
<a id="trigger" class="cd-faq__trigger" href="#0"><span id="texto"></span></a>
</li>
</ul>
</div>
Finally figured out how to do it... Made the script write the whole HTML from scratch and then no need to substitute nothing.
SCRIPT:
function AddCategory(){
var items = GetListItems("ListID", "caml", "url")
items.forEach(function(i){
$('#'+i.Categoria).append('<li class="cd-faq__item"><a id="trigger" class="cd-faq__trigger trigger" href="#0"><span>'+i.Pergunta+'</span></a><div class="cd-faq__content"><div class="text-component"><p>'+i.Resposta+'</p></div></div></li>')
});
}
'i.Categoria' = each category from the list.
'i.Pergunta' = each question posted on the list.
'i.Resposta' = each answer posted on the list.
HTML:
<div class="cd-faq__items">
<ul id="Compras_TI" class="cd-faq__group">
<li class="cd-faq__title"><h2>Compras TI</h2></li>
</ul> <!-- cd-faq__group -->
</div>
So it looks for the Category of the post, and inside of it it appends the HTML adding in it the question and answer posted.
Thank you for who helped!

JQuery Get Value of Embedded Widget Autocomplete Text

I have embedded a widget into my site provided by a third party site, this widget displays an input box that auto-suggests text to the user on input.
It's the same as the Ask Your Question search on this page.
I embed the widget by including a widget.js file in my document <head>, and calling it in my html with;
<div id="widget-5032"></div>
When I inspect the HTML of the widget I see the following (sample item list);
<div>
<ul id="search-query-5032_list">
<li data-question="Alaska">Alaska</li>
<li data-question="Hawaii">Hawaii</li>
<li data-question="etc.">etc.</li>
</ul>
</div>
The auto-suggestions are being served from the third party website, when one is clicked, the input is populated with the suggested text and the page automatically redirects to the external website (no need to click the search button). I have no control over how the widget functions.
I'm trying to capture the value of the selected text but I'm not sure how to?
The reason I want to do this is so I can send it to Google Tag Manager using dataLayer.push({})
I've tried this but it doesn't work;
$('#search-query-5032_list li').on('click', function() {
alert($(this).text());
});
Any advice is appreciated.
I had a quick look at the code on the page and I think you can use this piece of code on your page. The Try/Catch is important as the hidden input is only created when an item is selected.
springSpace.la.widget_5032_inst.search.autocomplete.input.parentNode.addEventListener('click', function(){
try {
alert(searchform_5032.form.querySelector('input[name=faqid]').value);
}
catch(err) {
console.log("empty");
}
});
Where I have the "alert" message, you would replace with your GTM dataLayer push to get that information into GTM/GA.
Can you try this:
$('#search-query-5032_list').on('click', 'li', function(){
alert($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
<ul id="search-query-5032_list">
<li data-question="Alaska">Alaska</li>
<li data-question="Hawaii">Hawaii</li>
<li data-question="etc.">etc.</li>
</ul>
</div>

ListJS Input a value and elements are deleted

I have a setup that I have replicated here:
http://codepen.io/anon/pen/EjrPbV
<div id="fac_content">
<input class="search" placeholder="Search">
<ul class = "list" id="fac_list" style="display: block;">
<li>
<p class="fac_name">CheckOneTwo</p>
</li>
<p></p>
<li>
<p class="fac_name">FiveThreeOne</p>
</li>
<p></p>
</ul>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.1.1/list.min.js"></script>
<script>
var options = {
valueNames: [ 'fac_name']
};
var userList = new List('fac_content', options);
</script>
The problem is that when I am implementing it in my website, when I enter in the search field, everything inside of <ul></ul> gets deleted, no matter the character I input. I realize that there must be something else that is causing this in my code, the question is, what could cause code to be deleted? Note that the list elements are being generated on startup in my website using AJAX and the innerHTML property.
Note, for me, I get an error:
Uncaught TypeError: Cannot read property 'values' of undefined
Same answer as found here: Why are some rows disappearing when I sort or filter listjs table
(Referencing answer by brymcbride)
Issue was that I was making the list in listjs before the AJAX call. When I put the code right after the call was being made, everything worked out perfectly!

Display an Array (from ViewModel) within Kendo View template

At work I'm just starting out with JavaScript, MVVM, and Kendo's JS framework, all at once, and I have a fairly simple problem.
I've created a View Model that allows Superheroes to be registered.
The JSBin I'm working in: http://jsbin.com/gewu/3/edit?html,js,output
Here's the HTML(view):
<div id="view">
Superhero: <input data-bind="value: name" /><br/>
Superpower: <input data-bind="value:power"type="text">
<label for="">from Earth?<input type="checkbox" data-bind="checked:fromEarth"></label>
<button data-bind="click: registerHero" >Display User Info</button>
<div id="array-display"></div>
<p>Entries: <span data-bind="text: knownHeroes.length"></span></p>
</div>
And here's the JS (viewModel):
var viewModel = kendo.observable({
knownHeroes : [],
name: "Hulk",
power:"Stength",
fromEarth: true,
registerHero: function() {
var name = this.get("name");
var power = this.get("power");
var fromEarth = this.get("fromEarth");
this.knownHeroes.push({"name":name,"power":power,"fromEarth":fromEarth});
}
});
kendo.bind($("#view"), viewModel);
Now, I'm trying to get the View to loop through and display the array of knownHeroes. But it won't render anything. I know the data is being pushed to the array, because I can see the array.length increasing, and I can look up specific values in the array. I'm assuming the problem has to do with how I'm referencing the array in the view. But I'm not sure. Here's the template I've written:
HTML:
<script id="registry-view" type="text/x-kendo-template">
<ul>
# for (var i=0; i < knownHeroes.length; i++) { #
<li>
<ul>
<li>#= knownHeroes[i].name #</li>
<li>#= knownHeroes[i].power #</li>
<li>#= knownHeroes[i].fromEarth #</li>
</ul>
</li>
# } #
</ul>
</script>
<script type="text/javascript">
var template = kendo.template($("#registry-view").html());
$("#array-display").html(template); //Append the result
</script>
You have got some mistakes.
First of all you got script wrote in html portion of this jsbin as well as in javascript section. Html part executes first so the viewModel isn't defined yet (check console for errors)
Also the object you pass to the template is stored always in "data" variable.
Last mistake is when using your desing, anytime you add any new data row, whole template needs to be reloaded (including all previously added data rows)
I corrected some of your mistakes in following jsbin: http://jsbin.com/jomemuko/1/edit (actually you need to hit the Run with JS button to make it work - some script loading issue I don't have time for)
Ideally you should use a listView widget and assign it a template for only one item. Also in your viewModel you should create a kendo dataSource and pass it as an option to newly created listView. Then in the viewModel you should refine your registerHero function to make it add the hero to the dataSource. Widget should automatically refresh.
Hope it helps

Dynamic Content with Ajax Using a Dropdown Menu

what I am trying to do is have a specific div from another page being loaded into a div when you click on a dropdown menu.
Here is my dropdown menu code and the div #location-info is where I want the info pulled into.
<div class="nav-location">
<ul>
<li class="locationhead">Select Locations
<ul id="location-options">
<li>Atikokan</li>
<li>Dryden</li>
<li>Emo</li>
<li>Fort Frances</li>
<li>Rainy River</li>
<li>Red Lake</li>
<li>Sioux Lookout</li>
<li>Thunder Bay</li>
</ul>
</li>
</ul>
</div>
<div id="location-info"></div>
Now here is the script I have in the footer of my site to try to pull in the content from the a href of each of the items in that dropdown...
$('#location-options').on('click', 'a', function (event) {
$el = $(event.target);
$.ajax({
type: 'GET',
url: $el.attr('href'),
success: function (html) {
$('#location-info').html(html);
}
});
return false;
});
I would think that this would pull in the info from the div location-info from each of the other pages in the dropdown when you click so the info changes and you get the location info for example, this is the page at modocom.ca/gillons/emo which I want to pull in the info from the location-div
<div id="location-info">
<div class="sevencol">
<h4>Gillons | Emo</h4><p>74 Front St<br />Emo, ON P0W 1E0</p>
<p>Phone: (807) 482-2146<br />Fax: (807) 482-2757</p>
</div>
<div class="fivecol last">
<h4>Office Hours</h4><p>Monday-Friday<br />8:30am - 5:00pm</p>
</div>
</div>
So that HTML above is what I would be trying to pull into the location-info div when someone clicks on Emo and then so on it would change when you select different location from the Dropdown.
I am using Wordpress but this stuff is all hardcoded in.
Struggling with this one hopefully someone can lend a helping hand, can seem to wrap my head around it.
I think that your problem is that in line $('#location-info').html(html); you're pulling entire site content from selected link, and stuffing it into your <div>.
Instead you should take only <div id="location-info"> from html variable.
Also normal behaviour of click is not being prevented here - it simply follows the link. Also $el.attr('href') will not return a string with link, but an empty object, check for yourself.
EDIT:
I was able to bind the 'click' event to each link, so instead of following the link, it simply displays href in your div, and then makes ajax request.
This is my JSFiddle example:
http://jsfiddle.net/mUThR/51/
Ajax request fails, but in console i can see that it's due to Proxy 407 error, access denied; but it should work from your machine. If it does, you still need to extract proper div from returned html.
Cheers.

Categories