jQuery Autocomplete working but not displaying text - json

I am using an Autocomplete jquery plugin in my ASP.NET site, and I cannot seem to track down what I am doing wrong on this new site. Mind you I have this 100% working in another ASP.NET site of mine, and have gone through it with a fine tooth comb comparing settings to this new project and cannot find the difference.
What is happening is that everything is wired up, the Http Handler is serializing the data to json, and writing it to the reposnse without error. The box even behaves like it is working, getting smaller as I type in more letters, but no text is displayed. I would swear this is a CSS issue, but looking at the source with the Developer toolbar, I see that the rendered list is incomplete. Here is what I see from my site that does not work:
<li jQuery16208584441255029163="12"/>
Here is what I see from my working site using the exact same plugin, CSS, references, code, etc.:
<li class="ui-menu-item" role="menuitem" jQuery16205959569234760148="7">
<a tabIndex="-1" class="ui-corner-all" jQuery16205959569234760148="33">
Text - John Smith
What am I missing here? All the code I debug is working perfectly and the results exist when being written to the HttpResponse as json. Any ideas? Thanks!

Arrrghhh. After a lot of frustration I tracked down the issue. I used a LINQ query to populate a simple DTO class with the following (3) properties:
id, label, value
...well I had modeled the class after an example I had seen, but don't typically create properties in all lower case values, so this morning I changed them to:
ID, Label, Value.
Well that innocent change was the culprit. Those properties get written to the reponse in the json and are parsed by the jQuery .js file named jquery.ui.autocomplete.js. It contains the following code (I searched down after the fact to explain this post in detail, because normally I don't care about the innerworkings of the jQuery files; I just care that they work!):
return $.map( items, function(item) {
if ( typeof item === "string" ) {
return {
label: item,
value: item
};
}
Yep the case sensitive values were not picking up my upper case names from the jSON and caused nothing to be rendered in the box.

Related

Jsoup - hidden div class?

Im trying to scrape a div class but everything I have tried has failed so far :(
Im trying to scrape the element(s):
<a href="http://www.bellator.com/events/d306b5/bellator-newcastle-pitbull-vs-
scope"><div class="s_buttons_button s_buttons_buttonAlt
s_buttons_buttonSlashBack">More info</div></a>
from the website: http://www.bellator.com/events
I tried accessing the list of elements by doing
Elements elements = document.select("div[class=s_container] > li");
but that didnt return anything.
Then i tried accessing just the parent with
Elements elements = document.select("div[class=s_container]");
and that returned two div with classname "s_container", non of which is the one I needed :<
then i tried accessing that ones parent with
Elements elements = document.select("div[class=ent_m152_bellator module
ent_m152_bellator_V1_1_0 ent_m152]");
And that didnt return anything
I also tried
Elements elements = document.select("div[class=ent_m152_bellator]");
because I wasnt sure about the white spaces but it didnt return anything either
Then I tried accessing its parent by
Elements elements = document.select("div#t3_lc");
and that worked, but it returned an element containing
<div id="t3_lc">
<div class="triforce-module" id="t3_lc_promo1"></div>
</div>
which is kinda weird because i cant see that it has that child when i inspect the website in chrome :S
Anyone knows whats going on? I feel kinda lost..
What you see in your web browser is not what Jsoup sees. Disable JavaScript and refresh page to get what Jsoup gets OR press CTRL+U ("Show source", not "Inspect"!) in your browser to see original HTML document before JavaScript modifications. When you use your browser's debugger it shows final document after modifications so it's not not suitable for your needs.
It seems like whole "UPCOMING EVENTS" section is dynamically loaded by JavaScript.
Even more, this section is asynchronously loaded with AJAX. You can use your browsers debugger (Network tab) to see every possible request and response.
I found it but unfortunately all the data you need is returned as JSON so you're going to need another library to parse JSON.
That's not the end of the bad news and this case is more complicated. You could make direct request for the data:
http://www.bellator.com/feeds/ent_m152_bellator/V1_1_0/d10a728c-547e-4a6f-b140-7eecb67cff6b
but the URL seems random and few of these URLs (one per upcoming event?) are included inside JavaScript code in HTML.
My approach would be to get the URLs of these feeds with something like:
List<String> feedUrls = new ArrayList<>();
//select all the scripts
Elements scripts = document.select("script");
for(Element script: scripts){
if(script.text().contains("http://www.bellator.com/feeds/")){
// here use regexp to get all URLs from script.text() and add them to feedUrls
}
}
for(String feedUrl : feedUrls){
// iterate over feed URLs, download each of them
String json = Jsoup.connect(feedUrl).ignoreContentType(true).get().body().toString();
// here use JSON parsing library to get the data you need
}
ALTERNATIVE approach would be to stop using Jsoup because of its limitations and use Selenium Webdriver as it supports dynamic page modifications by JavaScript so you'd get the HTML of the final result - exactly what you see in web browser and Inspector.
If anyone finds this in the future; I managed to solve it with Selenium, dont know if its a good/correct solution but it seems to be working.
System.setProperty("webdriver.chrome.driver", "C:\\Users\\PC\\Desktop\\Chromedriver\\chromedriver.exe");
WebDriver driver = new ChromeDriver();
driver.get("http://www.bellator.com/events");
String html = driver.getPageSource();
Document doc = Jsoup.parse(html);
Elements elements = doc.select("ul.s_layouts_lineListAlt > li > a");
for(Element element : elements) {
System.out.println(element.attr("href"));
}
Output:
http://www.bellator.com/events/d306b5/bellator-newcastle-pitbull-vs-scope
http://www.bellator.com/events/ylcu8d/bellator-215-mitrione-vs-kharitonov
http://www.bellator.com/events/yk2djw/bellator-216-mvp-vs-daley
http://www.bellator.com/events/e8rdqs/bellator-217-gallagher-vs-graham
http://www.bellator.com/events/281wxq/bellator-218-sanchez-vs-grimshaw
http://www.bellator.com/events/8lcbdi/bellator-219-koreshkov-vs-larkin
http://www.bellator.com/events/9rqguc/bellator-macdonald-vs-fitch

"activeStyle" attribute always applying on links to pages\index.js

I'm pretty new to Gatsby/React and web development in general, so this may be a very simple fix, but I can't figure out what the problem could be.
I'm currently working on my header and making links to each of the pages on my website and am having some trouble with the "activeStyle" attribute. So before describing specifics here is a simplified version of what I am trying to do:
<Link to="/" activeStyle={{color: 'gold'}}>Home</Link>
When I place this link on a page other than home it will still highlight the link gold even though it isn't actually the active page. However, if I use the same exact code but instead link to the /about page, it will work correctly and the link will only be gold if I am on the about page. Am I missing something?
I attempted to set the link to="/index", but Gatsby through an error at me saying that "/index" does not exist and gave a list of the pages on my site, one of which was "/". I honestly can't think of what's going on with this.
Thanks!
Link doesnt have activeStyle prop. Instead of using Link you should use NavLink. It has the following props:
<NavLink>
activeClassName: string
activeStyle: object // seems you are looking for this one
exact: bool
strict: bool
isActive: func
location: object
react-router v4 doc might be useful for you

MVC6 Routing Issue

I'm new to MVC coding, and have been at this issue for a couple days now. I'm having trouble setting up multiple routing schemes, and having them work as intended. Here is what I've got.
Framework
Products/Info.cshtml
Products/Edit.cshtml
Model
ProductCategory.Id
ProductCategory.CategoryName
What I'm wanting to do is be able to have 2 different routing schemes in place
Products/Edit/Id
Products/Info/CategoryName
So here is how I'm structuring the tags in the documents
For Products/Edit/Id
< a asp-controller="Products" asp-action="Edit" asp-route-id="#item.Id">Edit< /a>
For Products/Info/CategoryName
< a asp-controller="Products" asp-action="Info" asp-route-category="#item.CategoryName">#item.CategoryName< /a>
So the thing is, this will actually work, functionally, but my hyperlinks for the Products/Info/CategoryName get rendered as query strings rather than the more user friendly version, for instance one category is "Fireplaces", so my links for Info become
Products/Info?category=Fireplaces
instead of what I'm wanting
Products/Info/Fireplaces
How can I configure my routes so that the Controller/Action/Parameter call works for both? I've already tried adding specific routes to app.UseMvc(), and again they work functionally, but the Info links still render out as query strings.
Ok, finally got to the bottom of it. Rather than trying to define routes the old way, with app.UseMvc(), I was able to use the new DataAnnotations in the Controller class to define the route, which resulted in creating user friendly links like I wanted, rather than the query string links. So for my Info() method in my controller class, I changed to look like
[HttpGet]
[ActionName("Info")]
[Route("Products/Info/{category}")]
public IActionResult Info(string category)
{
.....
return View(productCategory);
}

IE injects VBScript tags in the middle of rendering, causing malformed HTML

For some reason, it seems like IE9 (I believe IE8 too, but not sure), is injecting
<SCRIPT LANGUAGE=VBScript>on error resume next pluginFound = IsObject(CreateObject("DIFFERENT PLUGIN EVERY TIME"))
in the middle of my content without any regards to surrounding context. This means it gets added in the middle of an attribute, or in the middle of some JavaScript, causing the HTML to be malformed and causing all sorts of problems.
This happens on multiple computers with different plugins, so it's not machine specific. And it's also not consistent: the location in which the offending script gets injected varies, the offending script varies. Sometimes you'll get several page loads without a problem and then you'll get the broken HTML.
My page is using a fair amount of JS, but nothing crazy. It's currently using jQuery, Google Maps, Bootstrap, Google Tag Manager, and loading a couple of Twitter, Google+, Facebook Iframes with their own little JS snippets. So, there are some asynchronous callbacks happening, but I wouldn't think this would interfere with how the browser renders the DOM and when it decides to inject plugin code.
You can see the problem if you reload http://www.rew.ca/properties/search/839721 enough times. If you scroll to the bottom of the page, you'll see raw JSON, or sometimes just some random HTML snippet will show in the middle of the page (because of mismatched tags).
Any ideas of why these scripts get injected arbitrarily and how to work around that?
Thanks
[UPDATE]
Here's another example of the script tags getting included in the middle of HTML content:
In my opinion, the problem lies in the http://cn.clickable.net/js/cct.js script, and specifically in the IsIEPlugin method of the __cct_tracker class:
this.IsIEPlugin = function (e) {
var t = !1;
return document.write('<SCRIPT LANGUAGE=VBScript>\n on error resume next \n pluginFound = IsObject(CreateObject("' + e + '")) </SCR' + "IPT>\n"), t ? 1 : 0
}
This method is called several times, with different arguments:
this.pixelRequestParams.cctDir = this.IsIEPlugin("SWCtl.SWCtl.1"),
this.pixelRequestParams.cctFlashPlugin = this.IsIEPlugin("ShockwaveFlash.ShockwaveFlash.1");
if (this.IsIEPlugin("PDF.PdfCtrl.1") == 1 ||
this.IsIEPlugin("PDF.PdfCtrl.5") == 1 ||
this.IsIEPlugin("PDF.PdfCtrl.6") == 1)
this.pixelRequestParams.cctPdf = 1;
this.pixelRequestParams.cctQuickTime = this.IsIEPlugin("Quicktime.Quicktime"),
this.pixelRequestParams.cctRealPlayer = this.IsIEPlugin("rmocx.RealPlayer G2 Control.1"),
this.pixelRequestParams.cctWmPlayer = this.IsIEPlugin("wmplayer.ocx")
I suppose (even I'm not sure) that "cct" stands for "Clickable Conversion Tracking", so it must be some sort of tracking code.
After further investigations, I've determined that the "cct.js" script gets loaded by the Google Tag Manager (GTM) script http://www.googletagmanager.com/gtm.js.
So, if I'm not wrong, by removing the GTM code snippet from your HTML page, you should be able to solve the problem.
It seems that the VBSCRIPT code dynamically injected by the GTM JavaScript code sometimes is not executed, but don't ask me why, since I don't really know.

Widget object is undefined in Dashcode

I'm using Dashcode for a mobile Safari web application and from the documentation (https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/Dashcode_UserGuide/Contents/Resources/en.lproj/MakingaWidgetwithDashcode/MakingaWidgetwithDashcode.html), it appears that I should be able to access an object called "widget".
However, when I tried, I get the error message saying that widget is undefined. I've also tried "window.widget" and it gives me the same error.
What's going on?
I'd like to make a text in my application a clickable link to open a URL using openURL (like the example given at the URL above).
You use widget.xxx to access things inside and outside you widget.
So to access curl and the Mac and get some data from Yahoo you do as follows
var yahoorate = widget.system("/usr/bin/curl 'http://download.finance.yahoo.com/d/quotes.csv?s=EUR" + interim0 + "=X&f=l1'", null).outputString;
to get a preference key value, stored in the widgets plist when you install on a mac
globalPreferenceValue = widget.preferenceForKey(null, "your-key");
i think in the question ask (below) we are checking to see if we are in a widget and then preparing a transition to the back of the widget.
if (window.widget) {
widget.prepareForTransition("ToBack");
}
this is how i set a preference so it is stored between system reboots (you use a get preference to retrieve them)
widget.setPreferenceForKey(2,"ratePrecision");
and this is how you create a link to open in a browser not the widget
<a onclick=" + "widget.openURL('http://www.wf.com/private/?ID=636');" + "><span id=company-info>click here</span></a>
These are all rel working examples from widgets i have built. Hope it helps. I found it useful to download widgets that performed similar functions to ones i wanted and then as well as installing them opening them as projects, you can import, and then you can see all the code.
Ok, this worked...hope it will help someone else...
window.location = "http://www.apple.com";