I have written a small chat app.
At first, all the code was contained in the one HTML document, and worked ok.
After seperating the CSS, HTML, and JS into seperate files.
The function, register_popup, invoked from within the HTML doc, now gererates;
"ReferenceError: register_popup is not defined"
I can see that the script is loading and from the developer tools I see no issues, all 200's and 302's.
THE HTML
<div class="sidebar-name">
<a href="#" onclick="register_popup('user4',
'USER4');">
<img width="30" height="30" src="" />
<span>user4</span>
</a>
script can be seen loading...
Am using,
<script>
var url = "static/js/chatpop.js";
$.getScript(url);
</script>
Have alos tried changing the HTML:
<div class="sidebar-name">
<a href="javascript:register_popup('user3', 'USER3');">
<img width="30" height="30" src="" />
<span>user3</span>
</a>
</div>
but that does not work either. As mentioned, I get a 200 on loading the script, and when contained in the same page everything worked. Only after separating the code into respective files does the error happen,
The following can also be seen loading ok.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3 /jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Any help welcome ...
The Function
function register_popup(id, name)
{
for(var iii = 0; iii < popups.length; iii++)
{
//already registered. Bring it to front.
if(id == popups[iii])
{
Array.remove(popups, iii);
popups.unshift(id);
calculate_popups();
return;
}
}
var element = '<div class="popup-box chat-popup" id="'+ id +'">';
element = element + '<div class="popup-head">';
element = element + '<div class="popup-head-left">'+ name +'</div>';
element = element + '<div class="popup-head-right">✕</div>';
element = element + '<div style="clear: both"></div></\
div><div class="popup-messages">\
<form action="chatpop/post" id="chat-form" method="post">\
<textarea style="resize:none;"cols="41" rows="14" >\
</textarea><input type="submit" id="chat-form" value="Send">\
</input></form></div></div>';
document.getElementsByTagName("body")[0].innerHTML = document.getElementsByTagName("body")[0].innerHTML + element;
popups.unshift(id);
calculate_popups();
}
Here
<script>
var url = "static/js/chatpop.js";
$.getScript(url);
</script>
You're attempting to import the script in an asynchronous way and invoke some functions defined in the script immediately in your html (before the script is actually loaded).
You should either refer your script in the header in a blocking manner like:
<script src="static/js/chatpop.js" />
or changing your anchor tag once the script is fetched:
...
<a id="myAnchor">
...
$.getScript(url).done(function(){
$("#myAnchor").attr("href", register_popup('user3', 'USER3'))
});
}
Related
My html code here is to click next and change the graph.
I have put 1.jpg, 2.jpg, 3.jpg, and html file into same file.
My question is that I want to change my graph by the code $("#page1").attr("src", fname);.
But it cannot do it at all. It always shows 1.jpg.
<script>
var order = new Array('1.jpg', '2.jpg', '3.jpg');
var trial = 0; //current trial
document.write("STRING:");
$(document).ready(function(){
ShowImage(trial);
});
function ShowImage(t) {
$("#page1").show();
var N = t+1; //counting from 1
$(".progress").text('('+N+'/'+order.length+')');
}
function NextImage() {
current = current + 1;
$("#page1").hide();
var fname=order[current];
$("#page1").attr("src", fname);
});
ShowImage(current);
}
</script>
<style> .page {display: none;} </style>
<div class="page" id="page1">
<img src=1.jpg><br>
<input type=radio name=f1 value=T> T
<input type=radio name=f1 value=F> F <br>
Next
<span class="progress"></span>
</div>
<div class="page" id="page2">
<h3>All done!</h3>
</div>```
you're going to change src of <img> tag, so you should get the <img> tag.
in your html the <img> tag is in <div id="page1"> so you should use the find keyword to get the <img> tag and then change the src of it.
function NextImage() {
current = current + 1;
$("#page1").hide();
var fname=order[current];
$("#page1").find('img').attr("src", fname); //this line should find the img tag and then change the src attr
});
ShowImage(current);
}
I am trying to insert div with iframe before HTML comment (it is the only unique element at this position).
So I have comment like: <!-- Comment --> and I would like to insert code like this before the comment:
<div id="test">
<noscript>
<iframe src="https://test.net" frameborder="0" scrolling="no" width="742" height="92"></iframe>
</noscript>
</div>
I tried methods like .append() and prepend(), but without success.
The result should be:
<div id="test">
<noscript>
<iframe src="https://test.net" frameborder="0" scrolling="no" width="742" height="92"></iframe>
</noscript>
</div>
<!-- Comment -->
Many thanks for any help!
Try using .filter() return element where nodeType is 8
var div = "<div>abc</div>";
var comment = $("body").contents().filter(function() {
return this.nodeType === 8
});
$(div).insertBefore(comment);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<!-- Comment -->
</body>
HTML comment has is a Node in DOM hierarchy and it's nodeType property is 8.
$(document).ready(function () {
var _html = '<div id="test">'
+ '<noscript>'
+ '<iframe src="https://test.net" frameborder="0" scrolling="no" width="742" height="92"></iframe>'
+ '</noscript>'
+ '</div>';
$('body').contents().each(function (i, elem) {
if (elem.nodeType == 8 && elem.data == " Comment ") {
$(_html).insertBefore(elem);
}
});
});
So traverse through all the comments find the one which you want and insert the HTML before that comment node.
Working fiddle
I have an HTML page where users can create a newsitem. Each news item is displayed in a new div, with multiple divs inside to divide content into multiple columns, to hide some content etc. The following code is a stripped down version of 1 newsitem:
<div class="news-item clearfix" id="c-b504b780-06a8-49bc-ba04-84d1fbba1a94">
<h2>This is a title</h2>
<div class="news-image div-right">
<a class="img-gallery" href="Images/Dynamic/700x700/NewsItem/44951/example.png" rel="lightbox-This is a title"><img class="img-responsive clear" src="Images/Dynamic/200x200c/NewsItem/44951/example.png" /></a><br />
</div>
<div class="preview one-image">
<p>Text here</p>
</div>
<div class="full div-hide">
<p>Text here</p> <img src="Images/Dynamic/full/NewsItem/44951/example.png" class="img-responsive" />
</div>
As you can see, each newsitem has a generated code attached to it which is used to identify unique newsitems, the code is also used in my javascript:
<script type="text/javascript">
(function () {
var newsdiv = $('#c-b504b780-06a8-49bc-ba04-84d1fbba1a94');
$('#c-b504b780-06a8-49bc-ba04-84d1fbba1a94 > .full').find('img').wrap(function () { return "<a href='" + $(this).attr('src') + "'></a>"; });
})();
</script>
This script is supposed to put an anchor tag around the image found in my full div-hide class, however this is not working properly. I assume my jquery selector is not selecting the right div, but I do not know what it should be. Do you have an idea how I can wrap my anchor tags around images inside the class="full" div?
You have two issue in document ready function:
1) You have not added jquery selector($) in front of ready function.
2) You dont need to call the document ready function.
$(function () {
/*^^missing selector here*/
var newsdiv = $('#c-b504b780-06a8-49bc-ba04-84d1fbba1a94');
$('#c-b504b780-06a8-49bc-ba04-84d1fbba1a94 > .full').find('img').wrap(function () { return "<a href='" + $(this).attr('src') + "'></a>"; });
});
/*^^ () not required here*/
and to make it work for all the divs:
$('.news-item .full img').each(function(){
$(this).wrap("<a href='" + $(this).attr('src') + "'></a>");
});
Working Demo
Try this:
$('#c-b504b780-06a8-49bc-ba04-84d1fbba1a94 > .full img').each(function() {
$(this).wrap(function () { return "<a href='" + $(this).attr('src') + "'></a>"; });
});
$('div.full').find('img').each(function() {
// your code here ..
});
I am new to JavaScript and actually quite desperate by now
I have an HTML file that:
gets data from an XML file and displays them in various divs (e.g. )
these divs are hidden (by default) by a class name (class='box')
when a link is clicked, I pass the 'href' to the function showContent, remove the #, and then look for an element with that ID in the document.
then I add a new class name ('show') - so that this element shows up!
If you run the code you will see that every time you click on a link a new div is displayed...
So current problems:
replace already shown divs with the new clicked ID so that only one div shows up every time.
How can I avoid inserting the onClick event in every single tag - and make this more automated?
My code is as follows:
function showContent(obj)
{
var linkTo = obj.getAttribute("href");
var newlinkTo=linkTo.replace('#','');
//alert (newlinkTo);
document.getElementById(newlinkTo).innerHTML=" This is where the xml variable content should go";
document.getElementById(newlinkTo).className += " Show";
return true;
}
<a href="#b0" onClick="return showContent(this);">
<div id="text_content"> link2 </div>
</a>
<a href="#b1" onClick="return showContent(this);">
<div id="text_content"> link 1 </div>
</a>
<div class='box' id='b0'> abstract content </div>
<div class='box' id='b1'> introduction content </div>
I'm not usually into using jQuery everywhere, but with it you could just do:
<a class='showContent' data='b0'/>
Your js:
var selected;
$('a.showContent').on('click',function(e){
var toShow = $(this).attr('data');
if(selected!==undefined) selected.removeClass('Show');
selected = $(div+'#'+toShow);
selected.addClass('Show');
});
Not sure if this is what you want, but thought I'd suggest it.
This sort of thing is not hard to do without jQuery.
I would recommend using a hash-bang (#!) for Javascript activated links to keep it separate from other possible links with hashes. (script is at the bottom)
<div id="nav-links">
<a href="#!b0">
<div id="text_content"> link2 </div>
</a>
<a href="#!b1">
<div id="text_content"> link 1 </div>
</a>
</div>
<div class='box' id='b0'> abstract content </div>
<div class='box' id='b1'> introduction content </div>
<script type="text/javascript">
var links = document.getElementById('nav-links').getElementsByTagName('a');
for(var i = 0, link; link = links[i]; i++) {
link.onclick = showContent;
// Hide content divs by default
getContentDiv(link).style.display = 'none';
}
// Show the first content div
if(links.length > 0) showContent.apply(links[0]);
var current;
function showContent() {
// hide old content
if(current) current.style.display = 'none';
current = getContentDiv(this);
if(!current) return true;
//current.innerHTML = "This is where the xml variable content should go";
current.style.display = 'block';
return true;
}
function getContentDiv(link) {
var linkTo = link.getAttribute('href');
// Make sure the link is meant to go to a div
if(linkTo.substring(0, 2) != '#!') return;
linkTo = linkTo.substring(2);
return document.getElementById(linkTo);
}
</script>
There is a WAY cleaner way to do this:
This is just my quick example, it can get EVEN cleaner than this, but this works for your case:
HTML:
link b0
link b1
<div class='box' id='b0'> abstract content </div>
<div class='box' id='b1'> introduction content </div>
CSS:
#b0 { display: none; }
#b1 { display: none; }
a, div.text_content { display: inline; padding: 0 10px; }
JQUERY:
$('.link').click(function(){
var id = $(this).attr("rel");
$('#'+id).slideToggle('slow');
});
Each link would have to have a REL attribute that is the same as the ID of the div element that you are trying to show.
Here is a JSFiddle to this example in action:
http://jsfiddle.net/CUJSM/5/
I have an embeded code like this
<embed id="1000" style="display: ;" width="850" height="1100" src="/new_folder/hi.pdf" type="application/pdf">
</embed>
and i have this code
<a onfocus="OnLink(this)" href="javascript:switch('1000','/new_folder/bye.pdf');" onmousedown="return VerifyHref this,event,'{$XmlDefinition/List/#DefaultItemOpen}','{$thisNode/#HTML_x0020_File_x0020_Type.File_x00 20_Type.mapcon}','{$thisNode/#serverurl.progid}')" >
<xsl:value-of select="$thisNode/#FileLeafRef.Name" />
</a>
and I have this function
<script type="text/javascript">
function switch(id,dirToPDF) {
$('1000').attr('data','dirToPDF');
}
</script>
So when I click on the link, it should call switch, and change the pdf thats displayed (which is hi.pdf) to bye.pdf, but it's not working.
Can anyone help me with this?
EDIT:
Ok so I changed it to
<script type="text/javascript">
function switchFunc(id, dirToPDF) {
$(id).attr('data', dirToPDF);
}
</script>
<a onfocus="OnLink(this)" href="javascript:switchFunc('pdf_d','/new_folder/bye.pdf');" onmousedown="return VerifyHref(this,event,'{$XmlDefinition/List/#DefaultItemOpen}','{$thisNode/#HTML_x0020_File_x0020_Type.File_x0020_Type.mapcon}','{$thisNode/#serverurl.progid}')" >
<xsl:value-of select="$thisNode/#FileLeafRef.Name" />
</a>
<embed id="pdf_d" style="display: ;" width="850" height="1100" src="/new_folder/hi.pdf" type="application/pdf">
</embed>
and it's still not working...
Let me review:
As #user1113426 said, you call a custom-defined 'switch' function to switch attributes-- however, switch is a reserved function, and I don't think you can overwrite it.
As I said (then deleted) and #michaeldcooney said, you need to put a '#' sign before 1000; Turning $('1000') to $('#1000').
As #NickBeranek said, you can't have an id field be completely numeric-- so 1000 won't work anyways. (Try the name of the doc-- NewDocPdf)
Finally, the element attribute you are changing (data) is not the correct element to change. You want to change src, as that is the one that chooses what document is loaded.
Related: You have both an 'onmousedown' event AND an action when the link is clicked. They might cause interference, so it may be easier to do this..
The Doc Window:
<embed id="PDFDisplay" style="display: ;" width="850" height="1100" src="/new_folder/hi.pdf" type="application/pdf">
</embed>
Links to Change:
<a class="altDoc" href="javascript:return void;" whichDoc="/new_folder/bye.pdf" >
<xsl:value-of select="$thisNode/#FileLeafRef.Name" />
</a>
Next:
<script type="text/javascript">
switchFunc = function (jQueryObject) {
console.log(jQueryObject);
$('#PDFDisplay').attr('src',jQueryObject.attr('whichDoc') );
}
$('.altDoc').hover( function () { OnLink(this); } );
$('.altDoc').click( function (event) {
console.log("this");
switchFunc(this);
return VerifyHref(this,event,'{$XmlDefinition/List/#DefaultItemOpen}','{$thisNode/#HTML_x0020_File_x0020_Type.File_x00 20_Type.mapcon}','{$thisNode/#serverurl.progid}');
} );
</script>
Let me know how the above works and I can provide any other alterations.
EDIT:
Looks like I forgot a few )s, ;s, etc. Also, I kept a bad " and forgot an opening parenthesis after VerifyHref.
EDIT THE SECOND:
You ever consider writing a bunch of tags which have 'target="iFrameNameAttribute"' ?
You can have links specifically target an iframe, and you can have the iFrame content set to the embedded PDF. Whenever you click on a link that targets the iFrame, it can change the content.
Please modify your script as follows and pass in the id parameter:
<script type="text/javascript">
function switchFunc(id, dirToPDF) {
$('#' + id).attr('data', dirToPDF);
}
</script>
switch is a reserved name in JS. Also, 1000 is not a valid id. ID's cannot start with a number.