Why do I get a blank tab content area on Magento's Category edit form?
Background
In Magento, I've added an input_renderer to a custom category attribute that produces a drop-down menu (select). The job of the renderer is to append a bit of JavaScript that listens for change events on a "parent" drop-down, and populate itself with options based on the value of that parent drop-down. Here's what I have:
This works fine in my development environment. But on staging, as soon as the General tab content is fetched (which includes my JS code), the content area collapses and goes blank:
No JS errors thrown in the console
No Warnings/Errors thrown in server logs
This only started happening after adding my JS code
I posted a related question last week because I was frustrated that I couldn't find a problem with my JavaScript code. So now I'm coming at it from a different angle.
Others have reported a "white screen" issue, but no solutions given have worked for me.
Any pointers? If you are curious to see my source code, here's the input renderer:
https://gist.github.com/vbuck/5310724
Looks like you're doing some funky stuff with your ajax url. My suggestion is to debug it before moving on.
Can you see the call in your network tab?
Console.log the final url and try it in a new window.
You are inserting params in the url after it has been generated... Does that really work?
It's an admin module, why aren't you using:
Mage::helper("adminhtml")->getUrl()
On a side note,
<code>
script language="text/javascript"
</code>
is considered bad practice and you should use
<code>
script type="text/javascript"
</code>.
It's probably not the source of your problem though.
Hope you got some good pointers.
Just for the record, it was an issue with a bad variable assignment. I moved the JS into its own file, loaded via a layout update, then initialized it from the block (in getAfterElementHtml). It was here that I discovered one of my variables was not being assigned because of a syntax error in a block method.
Related
Trying to troubleshoot some design issues on a website (built with OpenCart), and ran into an issue I've never seen before: an element shows up in Dev Tools but DOESN'T show up in View Source.
How is this possible? And how can I find the actual element?
The situation is, I had to modify the original template (category.twig) to change the "Add To Cart" button to "View"... and it works in the default category view, but as soon as any of the filters are selected, this happens... it reverts to the original view.. but it's still the same file (I added the path into the code itself, just to make sure I'm indeed looking at the same file, you can see in in the Code View portion of the screenshot).
So yeah... trying to trace where this "Add To Cart" is coming from, and being mighty confused as so why it's NOT showing up in View Source. And no, there's no JavaScript targeting the "view_button" DIV and transforming it into "Add To Cart" - I made the "view_button" DIV, it's custom.
Any advice?
Javascript can (and often does) create new elements in the document, that won´t appear on code view becasuse it does not execute javascript. I would advice you to download the entire page and then search for button-cart-text in js files or the whole document.
The document's source does not define the element statically, but the JavaScript creates the element dynamically. This is very common. The dev. tools show you the document as it exists in memory (it's current state), which will include anything that the JS caused to happen, but view...source shows you the actual source code of the static file that was initially loaded.
Source code is what the programmer wrote. Or, in the case of "View Source" in a browser, it is at least what the server responded with, which may have been written by hand or may be generated using various forms of compilation or bundling. A common example here would be a page rendered from templates (e.g. using Handlebars).
Live code, or at least live markup, is what you are seeing in the Elements pane in the browser console. You are seeing the DOM rendered in realtime, right before your very eyes. You are watching the program (i.e. the page and its subresources) execute and take effect. It is mutating, most likely due to JavaScript.
For extremely simple pages like example.com, the difference between the source code and the live code may be imperceptible, because nothing is modified at runtime. However, for more complex, real-world websites, the DOM is often modified while you are browsing the page so that it can respond to your clicks, your typing, or anything else. These modifications are extremely powerful and useful. However, as you have discovered, they make the source code and the live code diverge. This makes a programmer's life more difficult, while making a user's life easier.
Im working through Django By Example and in one chapter a Jquery bookmarklet is built within a Django app so that a user can easily save jpg images from a website into their user profile area within the Django app.
Im not an experienced JS or Jquery programmer but I did some JS some years back and can read the code however the tutorial does give exact instructions on what to do which I have followed and although I have managed to get the bookmarklet button to appear in my bookmarks bar in Chrome, nothing happens when I click it when browsing a webpage with jpg images.
This is my local Django dashboard where the bookmarklet button is added to the bookmarks bar and this part works fine
and this is what it should look like when clicked on, this is the part where nothing happens for me
these are the relevant js files
https://github.com/davejonesbkk/bookmarks/blob/master/images/templates/bookmarklet_launcher.js
https://github.com/davejonesbkk/bookmarks/blob/master/images/static/js/bookmarklet.js
the only thing I can see that is different with these compared to the files that came with the book is the indentation is a bit off but for some reason the indentation does seem to have changed a bit when I uploaded to Git and they dont look like that locally. Is indentation important in JS?
I followed the same book with the same examples but didn't had any trouble. Make sure your dashboard.html file is referring to the correct javascript file. If nothing works try to add the bookmark manually, you can see how that's done over here http://www.howtogeek.com/189358/beginner-geek-how-to-use-bookmarklets-on-any-device/ it'll sure to work.
And answer to your last question, Indentation is not as important in JavaScript as it's in Python, as python doesn't use any curly braces "{}" or semi-colons ";". But you can write your entire javascript code in a single line and it'll work because your using curly braces everywhere to tell which line of code ends where.
I agree with all the above. In addition, the following:
Error I noticed in the book:
In bookmarklet-launcher.js the js function being called from bookmarklet.js is called myBookmarklet(), however there is no function called this way in bookmarklet.js. So, you may want to use the same name in both js files.
Practically speaking however, the bookmarklet will always work because, not finding a myBookmarklet function in memory, bookmarklet-launcher.js appends the bookmarklet.js script to the body element and, being bookmarklet.js a self-invoking function, its content executed (without the need it to being called). There are some additional interesting technicalities here (the key function in bookmarklet.js is not self invoking but it will anyway be always called because of the script checking whether jQuery is present...) but ok, this is more relevant for those busy with the mentioned book (Django 2 by example).
Check whether bookmarkled, once you click on it, is added to the
current webpage:
2.1. Open devtools (F12 on Chrome) and check e.g. in the html head element whether you find the newly added link element containing the css attribute and/or in the body element whether you find the script element containing the reference to the bookmarklet.js file.
2.2. Alternative: Add an alert message on top of the bookmarklet.js script so that it will be launched if it is correctly loaded. Example:
(function(){
alert('bookmarkled loaded!');
var jquery_version =...
Make sure you're trying to use it on a HTTP site only. Since you're serving from same protocol. HTTPS site would always tell say: There is a problem loadingbyour jquery. That's how I solved mine.
dude.I have solved the problems I met like you.
The most important thing is that noticing the syntax error(without warnings),mainly caused by ignoring blank.
for example, in the line:
jQuery('#bookmarklet .images').append('<img src="'+image_url+'"/>');
between #bookmarklet and .images should lie a blank space,because of jquery syntax rules(meaning to search tag with id of bookmarklet and search tag with class equaling images within result previously).
Another two places worth notice are codes containing #bookmarklet .images a and #bookmarklet #close,requiring blank spaces between filter condition.
That's where I found I made mistaks mainly after studying syntax of jquery.
You'd better compare your codes with codes already loaded up to github by someone to make sure there are no more little errors(such as spelling).
I'm sure this has been asked and answered before but I haven't been able to track down an answer so I'm asking again.
I'm trying to implement Google DFP. I was able to dynamically create inline javascript that was serving ads, so I know the admin side should be configured correctly.
We don't have any inline JS in our application though, so I'm trying to build it out dynamically with JS and I haven't had much luck.
I've pasted my JS here. Worth noting is that the top part (prior to ///// !EVENTS) is loaded immediately, whereas the bottom part is loaded inside a $(document).ready() call in case that could be a culprit.
The idea with the code is that each advertisement div has data attributes with the url, size, and id of the advertisement. Using this I loop through each add, defining the slot, once all slots are defined, I display all slots, and once that happens, I call the remaining DFP functions. Sounds like it should work (to me anyway), but its not.
Each console.log() call is occurring as expected, and when I inspect the googletag object logged by that last call, the debug log contains entries like: "Created slot: /[userid]/[ad div id]","Google service JS loaded","Created service: publisher_ads", "Associated publisher_ads service with slot /[userid]/[ad unit id]"; for each record.
I'm not sure if perhaps the Google service JS or created service calls happening for each ad unit is causing problems or expected behaviours, but nothing is being logged to the console except what I've logged and there doesn't seem to be any indication that I've found that something has gone wrong, its just not serving ads.
In the documentation, and in the version of the implementation I had working, there were inline scripts that did the display calls. I'm not sure if perhaps this has to be handled inline and somehow displays the results in the parent of the script tag that called it or something, but even when I make the display calls inline it isn't working, with no more or less logging going on, which leads me to believe something isn't working correctly during the defineSlot() step, but like I mentioned the googletag object's debuglog does indicate the slot was defined.
In my network pane, it seems that there is two calls to Google at http://partner.googleadservices.com/gampad/google_ads_gpt.js and http://www.googletagservices.com/tag/js/gpt.js which returns the required Javascript, but those are the only calls to Google being made (relating to ads, there is other analytics calls) and there are 4 ads on this page that should be loading so I would expect there would be more calls if the ads were actually attempting to be served.
Needless to say I'm at a loss. I'm sure the answer is staring me in the face but I haven't worked much with DFP, or ads at all really, so I'm not sure where else to look to track this down.
Thanks in advance for any direction.
I've actually got a working script which I'm pretty sure does what you are after.
https://github.com/coop182/jquery.dfp.js
You should be able to get some pointers from my script but just from looking at your codepen, one issue which I have spotted is that you are not using the actual DOM id of the adunit div which DFP will need. Anywhere you are using:
$(that).attr('data-id');
should be:
$(that).attr('id');
The calls to googletag.display also need to come after
googletag.pubads().enableSingleRequest();
googletag.enableServices();
I used No editor option and joomla and wrote javascript. The code was working perfect. To add other articles I changed editor to TinyMCE, added a table. ...All my javascript is gone, even after I revert back to No editor. Anyway, I can get previous version of article with javascript. Has about 2 days of coding and unfortunately, stupid enough, I don't have back up
No way (unfortunately) to get what was saved before and overwritten afterwards.
Two solutions (if it was made after at least one day):
A. Maybe your server was set to backup the database?
If so, you could recover it via the backups.
B. If the site was indexed by Google (and public), try to view a cached version of that page (if accessible and indexed).
I just had the same issue. To prevent javascript disappearance, just put the javascript tag into html comments. The editor do not delete it and the javascript is still seen in HTML.
<!--
<script language="javascript">
...
</script>
-->
I'm a member in a website and there's a huge (automatically generated) HTML table on this PHP page that is only available to me and I wanted the table source code because I want to copy it to a HTML page on my computer to then process it with a program.
The problem is that when I right-click to display the page source code it works. However, I'm tired of looking at the source code and inside all the linked JavaScript files. I can't seem to find the table or any data of it on the scripts/page source codes.
I can select the table data and copy it, but it is just the data. It doesn't say anything about flash, so I'm assuming it's not flash. The data of the scripts/pages isn't obfuscated, it's easily human-readable.
I used Google Chrome's 'inspect element' and it worked.
I was thinking on doing a PHP script that would import data from a similar table, but I will have to know more about a lot of stuff mentioned here.
What can I be doing wrong or what can cause this kind of behavior?
Two possible reasons could be that the table may be returned from an AJAX call to another page that returns the HTML for the table, or they could be generating the table's html code and contents on the fly from a list of values coming from javascript or some other source rather than serving the HTML output to you from the server side.
Something you can do to figure it out is see if there are any empty div or other html elements where the table appears to be inserted, and search their javascript files for references to those elements. That may shed some light on how they populate it.
Feel free to update your question with the raw html (where you don't see the table) and maybe some javascript and we can look. Use pastebin if it is a lot of content.
Would it help to use the Firefox plugin called Firebug?
Using this plugin you can click on an area of a page to see the code displayed in the Firebug section at the bottom of your window.
Here are the details: https://getfirebug.com/whatisfirebug
Maybe the table is generated with a JS script, if that's the case, doing right click and "View source" would not show you the html. You need to use something like Chrome's devtools. Open google chrome and visit that page, once there, right click the table and select "Inspect element", the devtools will open and then you'll see the table's code, right click it's opening tag and select "Copy as html".
Let me know if that works :)
Try a developer extension like http://getfirebug.com/ The underlying source code may not reflect output due to how much the DOM can be modified by javascript with extensive use of ajax. This plugin will permit you to view elements as they're interacting with the browser.
its probably that the table is dynamically generated on the fly so looking at the source code won't actually give you much. try looking at the "GENERATED" source code or inspecting the DOM using Firebug, or the Developer tools of chrome/safari.
Or better yet, try your hand at web scraping:
http://vancouverdata.blogspot.com/2011/02/how-to-web-scraping-xpath-html-google.html
Although I'm not sure if it'll work for pages that need a login. But hey, at least you learned something new :p