I am trying to make a reference tag toggle bold when clicked. I know there are many examples online and i tried most of them but i keep getting this error:
Uncaught TypeError: Cannot read property 'click' of null
I am writing everything in PHP (I have my reasons) and here is the code:
print "<script type=\"text/javascript\">\n";
echo <<<JS
$(".boldtrigger").click(function(){
$(".boldtrigger").toggleClass("bold");
});
JS;
/*Now for Html Part*/
echo "<tr class = 'oddkill' ><td class = 'entry_cell' ><a href = \"javascript: displayRow('context_row_${row_paridy}') \" class = 'boldtrigger' style = 'color:black'>$test</a></td>";
I have the css in another file:
.bold {
font-weight: bold;
}
I don't understand why it thinks that the 'boldtrigger' class doesn't exist. Can someone help?
Firstly, nothing you're asking about is "in PHP".
PHP is a server side language. It's generating HTML and Javascript for your browser - but aside from that it's completely irrelevant to your problem and your question.
Now, to solve your problem
You trying to attach a listener to an element that isn't rendered yet:
$(".boldtrigger")
This looks for an element whose class is boldtrigger, and tries to do stuff with it. But, your element is only rendered after this bit of code.
There are two fixes:
1. Event delegation
Using the following code:
$('body').on('click', '.boldtrigger', function(){
$(".boldtrigger").toggleClass("bold");
});
You can attach a listener on the body who will wait for events to bubble up from .boldtrigger. This can work when you need to attach events before elements are on the scene.
Read more about the idea of event delegation here
Check out more about jQuery.on() here
2. Re-order your code
The other option is to move your JavaScript to the bottom of the page, or at least below your HTML:
<?php
print "<script type=\"text/javascript\">\n";
echo "<tr class = 'oddkill' ><td class = 'entry_cell' ><a href = \"javascript: displayRow('context_row_${row_paridy}') \" class = 'boldtrigger' style = 'color:black'>$test</a></td>";
/*Now for Js Part*/
echo <<<JS
$(".boldtrigger").click(function(){
$(".boldtrigger").toggleClass("bold");
});
JS;
3. $(document)ready()
Nearly any time you use jQuery you want to wrap it in a function that looks like this:
$(document).ready(function () {
// Some code
});
Or this:
$(function() {
// Some code
});
You probably want to brush up on some jQuery basics if you aren't aware of that.
Or, better yet - start with plain old Javascript!
If you believe that jQuery is easier than plain/vanilla Javascript - you might be in for a surprise. It's 2016 and we have tons of great new APIs that make plain old Javascript pretty cool.
In other words:
You really don't need jQuery
As an aside
You maybe want to change your JavaScript code. Right now, every occurence of .boldtrigger will toggle that class whenever you click any of them.
If you want to toggle only the element being clicked, you might want something closer to this:
$(this).toggleClass("bold");
Read more about this keyword here
Related
I am writing this code here inside my HTML and I am trying to access the information in order to show and hide the information on the functioning website.
I have only been learning to code for less than a month and a half so I am unsure of whether or not this code creates another DIV inside the HTML.
If it does, how can I access this on CSS? I tried different methods to see if this would show up, but at this point, I believe it does not create anything new inside my HTML Body.
*var $tweet = $('<div class="tweet' +tweet.user+'"></div>');
you are creating an element but you are not appending it to anything.
var tweet = ('<div class="tweet' +tweet.user +'"></div>');
$('body').append(tweet);
you can change the 'body' to a different selector
I am new to AngularJS with a jQuery background. For what I thought would be a simple task I am just finding it to be increasingly difficult. I have looked around on how to dynamically add html and bind to a controller but I just have not found my particular situation.
This is what I am trying to accomplish. I'll want to keep it simple for now with a simple dialog box. Basically, suppose I want to create my own custom dialog box. Suppose based on a button click I want to display the message "Are you sure you want to so and so" with the buttons yes, no, cancel. Then based on the button click, I'd like to perform a specific operation, users with windows development will be familiar with this.
First I must construct my message and my dialog box html based on the button clicked, append that output html to the document body as position absolute, and then once done with this remove the html from the document body.
In jQuery I can simply do this
...somewhere in code
var html = "<div id='123' class='dialog-box'><button id='yesButton'></button>
...elements for no and cancel</div>";
DisplayDialog("123", html);
...
function DisplayDialog(elementId, html) {
$(document.body).append(html);
var dElement = $(document.body).find("#" + elementId);
$(dElement).find("#yesButton").on("click" function () {
...code
$(dElement).remove();
});
...code for no, and cancel events
}
I just can't understand how to do this simply the angular way. Basically, I want to be able to get html, append it somewhere (whether in the body, or in a div element etc), and be able to interact with it using the $scope. I kept it simple for now for a dialog box, if I can understand this I can apply to much more complex operations where I might need to retrieve partial views in my MVC application and append it to a div
Its pretty straightforward in angular, this shouldn't be to hard for you given the jquery background:
var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.append('Hi<br/>');
https://docs.angularjs.org/api/ng/function/angular.element
Another way:
You then use ng-bind in the html and set it to a $scope variable that represents the html:
<div ng-bind-html="divHtmlVar"></div>
$scope.divHtmlVar = '<b>main html</b>';
Relevant blog post:
http://blog.sodhanalibrary.com/2014/08/append-or-prepend-html-to-div-using.html
<div class="hh"><div class="ih" onclick="return koya.onEvent(arguments[0]||window.event,'3_2')"><div class="jh kh"></div></div></div>
Hello, I am working with a qml webview element and I want to remove a div from the loaded page . I use the function webView.evaluateJavascript() to run the javascript code. Now I googled very much and tried different JavaScript codes to remove the div, but I failed.
Can someone tell how to do this.
Assuming you have jquery loaded you can do something like this:
$(".ih").remove();
Where the . is followed by the class that exists on the div you want to remove.
If you don't have jquery loaded look into using getElementsByClassName
var child = document.getElementsByClassName('ih')[0];
child.parent.removeChild(child);
I have a edit link with class "icon-edit" from twitter-bootstrap. I want to show downloading image when user click on this button in javascript. I did like this:
var editLink = $('.icon-edit');
editLink.onclick = function () {
document.getElementById("editLoading").style.visibility = "visible";
}
It doesn't work.
I think the proper CSS style you need to change is display to have the value "block" (or "inline").
In addition, you shouldn't/can't mix jQuery and Javascript like that. If you work with a jQuery object (using $("")), then you should use jQuery methods. If you want to use plain Javascript, then you can use Javascript methods.
In your case, you select an element by class, with jQuery. But then you attempt to bind the onclick handler to the selected element with .onclick, which is plain Javascript.
You should use:
$(".icon-edit").on("click", function () {
$("#editLoading").show(); // Basically the same as: $("#editLoading").css("display", "block");
});
Instead of saying "It doesn't work.", you should explain what's happening. Did you check your browser's console? Do you get error messages? Does something freeze? Did you attempt to debug in any way, even by placing alert statements in places to see how far the code gets?
I want to take a list of users from a database, show their name in a table and when you click on a name, a special div apeears with his details, you can move this div and even close it.
Here is a short scheme how the code is written:
function openDiv(id){
document.getElementById('divsHere').innerHTML +='<div id="moveable'+id+'">content</div>'}
<?php database connection... while{
...
<tr onclick='openDiv( ". $row['id'] ." )'>
$script += 'Drag.init(document.getElementById("moveable'+ $row['id'] +'"));'
...
}?>
<div id="divsHere"></div>
echo $script;
I've used this awesome drag'n'drop library.
http://www.dynamicdrive.com/dynamicindex11/domdrag/index.htm
(note I have the same problems with jQuery)
It seems the drag'n'drop function doesn't work, when the div was addad by inner.HTML. However, I don't see any onther way around.
Thank you for any advice!
The problem is when you execute Drag.init the div you feed it is not yet created.
I sugest you generate the individual divs inside a php cycle, just like you do for the th tags, remove the setting of the innerHTML you have at the beginning of openDiv, and it'll work.
I have to say though, it seems like what you want is a modal dialog which you can find already made and easy to use elsewhere. For example: http://jqueryui.com/dialog/ It'll both be easier to work with and your likely to enjoy the final result more.
I hope this helps :)
Try adding the div using document.createElement:
var newDiv = document.createElement('div'),
textNode = document.createTextNode('content');
newDiv.id = "moveable" + id;
newDiv.appendChild(textNode);
document.getElementById('divsHere').appendChild(newDiv);
and to initialise the dragging simply do
Drag.init(newDiv);
provided that part of the code where you want to initialise the dragging has newDiv within its scope.
(Probably you want to create the div and initialise the possibility of dragging it in the same place. If I've understood your scheme right, then the problem is that it first tries to initialise dragging on non-existent divs, then only when the user clicks on a row, calling the function openDiv, are those divs created. If this is right then to fix it, you need to make sure the dragging is only initialised after the div has been created.)