I have some HTML and javascipt that is generated automatically through a URL. This html and javascipt is generated using Smarty templates. Unfortunately, this code that is generated uses a bunch of jQuery, but the references to the jQuery libraries aren't included in the code and so generate errors. I can't change this. Below is an example of the first part of that javascript that generates the error 'Uncaught Reference Error: cj is not defined'
<script type="text/javascript">
cj( function() {
var element_date = "#birth_date_display";var element_time = "#birth_date_time";var time_format = cj( element_time ).attr('timeFormat');
cj(element_time).timeEntry({ show24Hours : time_format, spinnerImage: '' });
var currentYear = new Date().getFullYear();var alt_field = '#birth_date';cj( alt_field ).hide();var date_format = cj( alt_field ).attr('format');var altDateFormat = 'mm/dd/yy';
switch ( date_format ) {
case 'dd-mm':
case 'mm/dd':
altDateFormat = 'mm/dd';
break;
}
What I can do though, is add code onto the end of the file. So I am able to load the relevant libraries and simply enter the same javascript code again, and it works fine.
The problem I am running into is that I am trying to do some styling of the page using jQuery also after the fact. The line below is giving me the problem. Everything gets wrapped fine, but my javascript file just exits on this row,
$("#editrow-email-Primary, #editrow-phone-1-1, #editrow-birth_date").wrapAll("<div class='grid-group personal' />");
again with the same error 'Uncaught reference error: cj is not defined. It is the editrow-birth_date div that most of the previous javascript is for as it uses the jQuery UI datepicker. The funny thing is, simply appending the same javascript and jQuery at the end of the file works fine, until I just to .wrapAll. Then it seems to be trying to run something again in the original javascript and generating a new error and exiting.
I'm completely stuck here, and I don't even know how to properly explain what I think is going on. Is there a way that I can remove the original javascript from the code on the fly so that it can't be executed anymore? I don't think so, but I am hoping so as I feel like that would solve my problem.
Wrap pulls all of that HTML out of the page and sticks it in HTML built from the param for wrapAll and then you stick the whole bundle back on the page which means you're slapping that same script file back onto the page I assume. Any time a script tag is dropped into a page, all of its JS executes. Now I'm going to edit and make some other suggestions when I've figured wtf is going on with this app but that's your problem with the bonus firing.
Additional:
Okay, so I don't know what Smarty is. Whenever I see a Smarty-related question, something horrifying is going on so I don't even want to know. If you have any control over the app in general, you should be able to add Script tags before jQuery happens. Ideally before this tag gets appended. At the very least, add an empty function called cj before this happens to avoid the errors and then figure where the real cj is so you can plug it back in.
But regardless, if you don't have control of at least most of the HTML, get a stick and hit somebody with it until they promise to stop making horrifying technology choices and restore control of the HTML to you, the guy who is supposed to be working with the damned HTML and JavaScript to get things running.
Or show them this. I've been at this six years now. These kinds of problems should not be allowed to happen. Technology that robs us of control of our own app gets crumpled up like a paper ball and tossed over your shoulder because you will never get that time back.
Related
I'm currently working on a project which requires me to run by the user typed javascript in the form of a string.
I've tried adding an empty <script> tag to the html and appending the string (containing the users freshly typed (after the page was loaded) javascript) to this script tag but this doesn't work. (since the code inside the script tag will be run immediately after the page is loaded).
So I tried a different approach. I wrapped the js string inside of a function like so:
function runCode() { userString }
This is what the string I now append to the empty script tag looks like:
var code = "function runCode() { "+ userString +" }"
However this still doesn't work. The code (userString) shows up in the script tag according to the chrome dev tools, but trying to run the function causes the following error:
Uncaught ReferenceError: runCode is not defined
Does somebody know how this works? What is the proper way for me to do this?
Some background:
The project I'm working on is an online tool to draw using js. The goal here is to use the two.js library and link it to a modified textarea. (codemirror) Clicking the button will take your typed in code and use it to modify the two.js canvas on the other half of the screen.
This will make it easier to draw using the library, since you don't have to set up all the html, css and js files yourself, but instead you can focus on the code.
Note: The js you type into the textarea can by any valid js, so simple things as alerts, or even jQuery lines will work just fine.
Use eval() function.
However be aware that this is by design a HUGE hole of security.
You have to use eval(). Extract the user input from an onclick event and pass it into eval like so:
eval(userString)
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 currently working on a web editor where you can enter your HTML, CSS and JavaScript code and see the result in real time. Something similar to JSBin or JSFiddle. (I'm doing that to get an offline editor)
I've already been through many problems especially when it comes to CSS but I solved them by using an iframe and injecting all my code into it. And that works amazingly well until you type some JavaScript.
I'm sending the code between <script></script> but unlike CSS it won't run. What's very weird is that when I enter something like $('button').css('color', 'red');, the buttons of the editor effectively get affected but not those of my iframe. Exactly the opposite of what I expected. I've tried many things, looked at many topics on the forum, but nothing works. I also tried to load a blank page in my iframe. In that case, JavaScript runs but it becomes impossible to edit the code in the iframe! What's going on? Where am I going wrong? Thank you in advance for your help!
Here's my editor : https://jsbin.com/tuqite/edit?html,js,output/
Try updating the content of the iframe like this.
// this string contains both html and script
var html_string= "content";
document.getElementById('childFrame').src = "data:text/html;charset=utf-8," + escape(html_string);
By directly updating the iframe DOM like the way you are doing may not be the right way .
I am trying to remove all the elements with the class "RemoveByMe", by executing javascript on an open browser. I previously created those elements myself.
I'm calling that javascript from Python: Selenium controls the browser, and sends the javascript to the open browser. But I think the problem relies on the javascript side, reasons on the next lines.
The python code for executing each script is:
Browser.execute_script("script here")
So far I have tried the following javascript code:
$('.RemoveByMe').remove();
This one gives the following error message:
#WebDriverException: Message: u'$ is not defined' ; Stacktrace:
at anonymous
This error seems to come from the python side, so I have tested more javascript code:
var DocElements = document.getElementsByTagName('RemoveByMe');for(var i = 0; i < DocElements.length; i++){DocElements[i].parentNode.removeChild(DocElements[0]);}
This one doesnt throw any errors (confirming that the python side is working), but still doesnt remove the elements. (javascript is not being able to remove them)
All of the tested javascript code works in some websites, but it doesnt in some others.
That makes me think that the problem resides in the website, preventing the javascript from removing elements. (Although I could successfully add them)
How could I skip that prevention?
First one obviously seems that jQuery is not defined.
The 2nd one looks close though you would need document.getElementsByClassName('RemoveByMe') ... instead of by getElementsTagName as you want to get elements by a CSS class.
$('.RemoveByMe').remove();
That snippet is jQuery Code, a Javascript Library.
A solution for your problem you can find in this thread:
Remove all elements of a certain class with JavaScript
What I Want: Very simply I have a C program that generates a variable periodically, I want to be able to display this value on a website.
Restrictions: The webpage is HTML, php does not work, javascript does [I have tried a few javascript solutions but they have all been long, tedious and in the end ineffective] I want it to be able to format the text so that it matches the rest of the webpage. Above all I'd really like to find something simple that works.
Freedoms: I can output the variable from my C program to just about any file type and content that I want, the file is hosted so is available locally to the server or online for the client.
Preferred Solutions: I am currently playing around with the object and iframe tags native to html. They give a nice simple input:
<object height=20 width=75 type='text/plain' border=0 data="URL/filename.txt"></object>
inserts the contents of my file, but it can't be formatted so I am stuck with 12pt Courier font which is not acceptable. Using
<iframe seamless height=20 width=75 scrolling='no' src="URL/filename.htm"></iframe>
and adding my desired font/colour/size etc to the htm file gets me the right text style, but htm has a large amount of white padding around it which I can't seem to get rid of so I have to make my iframe quite large for the text to be displayed, but then it doesn't fit smoothly with other text.
So anyone that can answer one of four questions:
How to remove excess padding from htm
How to format the style of a html object
Is there anything in Java as simple as the php [so apparently it doesn't show php code even when you quote it as code. But basically using echo and get_file_contents to insert the contents of a txt file into a html page]
Propose an alternate solution
Padding and style can be handled by css.
By java I assume you mean javascript - google-ing will help you. Without details of what your server is running and what is dispatching your pages we can't give you an exact answer. You might want something with ajax to keep it updating in the background.
Try googling your question, you'd be surprised how often this helps.
I'm not sure what you're trying to do once you get the variable into your web page, but I think something like the following could be useful.
Create a hidden div on your page
Have your C application write the variable to some file
Use jquery to execute an ajax call to pull that value into the div ( or whatever other container you want to use
using some type of timer, execute the ajax call every X period of time, which will then get your up to date variable
on your main page, have another timer that will then come in to that container, grab your value and then you are free to do what you want with it.
This is all off the top of my head without knowing much about what you're trying to accomplish. If you provide some further details we may be able to help you a little more.
You need AJAX... that's just a fancy buzz-word. It means you can tell JavaScript can get a file from the server without reloading the page and you can insert data from that file into your HTML.
AJAX is made much simpler by using a JavaScript library like jQuery, but it can be done without jQuery. There's a pretty decent Getting Started tutorial at Mozilla Developer Network if you want to do it the hard way, but I really recommend jQuery.
As far as formatting... any formatting... you need to use CSS. Just about everything about the appearance of anything on a web page is controlled by CSS. MDN has a Learn CSS section, too.
load jquery on you main html file
put a div with some id (example id="newvalue")
make you c program to write the output in a file (for example value.html)
on main html page header, after jquery include code add some javascript like
$( document ).ready(function() {
$("#newvalue").load('yoursiteurl/value.html');
});