On the latest version of Full Calendar, I have a link wrapped around my event resources. When you double click on the event resource name I would like a modal to pop up.
The problem I'm having is as soon as the calendar loads it loads each of the modals for each of the resources as if I've just double-clicked on them.
Has anybody else come across this and does anybody have any idea on how to fix it?
resourceRender: function(renderInfo) {
if(renderInfo.resource.extendedProps.unassign==false)
renderInfo.el.querySelector('.fc-cell-text').innerHTML = "<a ondblclick=" + showProfileModal('staff', renderInfo.resource.id) + " class='text-staff'>" + renderInfo.resource.title + "</a>";
else
renderInfo.el.querySelector('.fc-cell-text').innerHTML = "<span class='text-red'>" + renderInfo.resource.title + "</span>";
},
The problem is the way you've created the hyperlink:
.innerHTML = "<a ondblclick=" + showProfileModal('staff', renderInfo.resource.id) + " class='text-staff'>"
In that context, showProfileModal() is not part of your HTML string, instead it's treated as actual code to be executed...and so that's what happens, it gets executed.
You're using it as if the result of that function was something to be included in the HTML string. If you want that to be treated as text, something to be added to the HTML declaration, then include it inside the string:
.innerHTML = '<a ondblclick="showProfileModal(\'staff\',\'' + renderInfo.resource.id + '\')\" class=\"text-staff\">'
Demo: https://codepen.io/ADyson82/pen/WNeKYav?&editable=true&editors=001
(Of course if you wanted to make that code less messy without all the character escaping and so on, you could use createElement and addEventListener to create the hyperlink and set the double-click event handler instead.)
Related
Hi I am using this code for Printing the window content
"<html><head><script>function step1(){\n" +
"setTimeout('step2()', 1000);}\n" +
"function step2(){window.print();}\n" +
"</scri" + "pt></head><body onload='step1()'>\n" +
"<object id='PrintId' data='"+source+"' type='application/pdf' style='width:100% !important;height:100% !important'><embed id='PrintId' src='" + source +
"' type='application/pdf' style='width:100% !important;height:100% !important'/></object></body></html>";
As same code i am using for to print Images using "Image tag" instead of Object and Embed tag it was working fine but for PDF or Docx,txt file it is not working on any Browser where i am wrong please help me
Thanks
On line 2, setTimeout('step2()' should be replaced with setTimeout(step2, because setTimeout takes the actual function, in this case step2. You were giving it a string instead.
Edit: Actually setTimeout can take a string which will be executed once the timer expires so that probably isn't the problem.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I'm having a hard time passing my JavaScript data to HTML. I can send my video data to iframe so that a search retrieves a list of embedded videos. OR I could set my html var equal to href and display a written list of videos, whose url link redirects to YouTube itself. I want to combine these ideas.
My goal is to display a written list of video titles with thumbnails. When a link is clicked, the video should embed in the current page.
The exact problem is that I expected the onclick functionality to start the playVid function, pass it the video ID data, and send that to the iframe. It didn't. I get uncaught reference error playVid not defined. How is this so?
Update:
1) Tried to put playVid before showResults. Still undefined though.
2) Changed onclick="playVid(value.id.videoId)"> to onclick="playVid(' + value.id.videoId + ')"> Still undefined though.
3)
This is the code updating according to your suggestions. It's half-way there. Something gets passed to iframe and the video frame is embedded. playVid is now defined with no problems. The problem is not the data source. It works perfectly before we try to embed. I will post an image of my errors now, which are now about chrome extensions which is weird.
4) I solved the chrome errors I was receiving by installing the Google Cast chrome extension. Apparently Chrome will sometime give errors on embedded YouTube videos unless you download the extension, even if the extension really has nothing to do with embedded videos.
5) Last roadblock seems to be YouTube error "errorCode":"api.invalidparam"
SOLUTION
function showResults(results) {
var html = '';
$.each(results, function(index,value) {
html += '<li><img src="' +value.snippet.thumbnails.medium.url + '">' + value.snippet.title + ')</li>'; });
$('#results').html(html);
$('#results li a').click(function(e){
playVid($(this).attr('href'));
});
}
function playVid(vidID) {
var embedVid = vidID+'?autoplay=1';
document.getElementById('player').src = embedVid;
}
Try this:
1- remove this onclick="playVid(value.id.videoId)" from showResults function and replace it with assigning an id:
html += '<li><img src="' + value.snippet.thumbnails.medium.url + '">' + value.snippet.title + ')</li>';
2- add this after the each loop:
$('#results').html(html);
$('#results li a').click(function(){
playVid($(this).attr('id'));
});
You probably need to write the entire iframe tag to the document on click instead of just changing the source of an existing iframe. First create an outer div # 800x440 to contain the iframe, and then set
outer.innerHTML = '<iframe SRC="' + embedVid + '"></iframe>'
Your issue may be with this line...
html += '<li><img src="' + value.snippet.thumbnails.medium.url + '">' + value.snippet.title + ')</li>';
Try this instead...
html += '<li><img src="' + value.snippet.thumbnails.medium.url + '">' + value.snippet.title + ')</li>';
also try move the playVid() function outside this... $(function(){
I am working on a web page which contains a list of items and sub items for display. In the Div element, I am setting up the values, image. Using the image show and hide option On click event handler is triggered. This seems to be working fine with IE9, but doesn't work with other browsers (FireFox, Chrome and safari).
<div id="Type_A Medicine" value="H" entity="Type A Medicine" onClick="showHide(this,'MIE_Type_A Medicine')"><img src='<%=request.getContextPath()%>/images/plus.gif'>Type A Medicine</div>
function showHide(ctrl,id)
{
if (ctrl.value == "H")
{
ctrl.value = "S";
ctrl.innerHTML = "<img src='<%=request.getContextPath()%>/images/minus.gif'>" +ctrl.getAttribute("entity");
showBlock(id);
}
else if (ctrl.value == "S")
{
ctrl.value = "H";
ctrl.innerHTML = "<img src='<%=request.getContextPath()%>/images/plus.gif'>" + ctrl.getAttribute("entity");
hideBlock(id);
}
}
function hideBlock(blockId)
{
var str = "document.all." + blockId + ".style.display='none'";
eval(str);
}
function showBlock(blockId)
{
var str = "document.all." + blockId + ".style.display=''";
eval(str);
}
I still couldn't figure out the difference with the list of browsers. Kindly help...
I'm guessing it is because you use an invalid ID syntax. ID's cannot have spaces. If you use invalid HTML you can't expect javascript to work the same way across browsers.
id="Type_A Medicine"
Also, you never post the code for showBlock or hideBlock where you pass the ID in. Can't tell what goes wrong there without code.
To retrieve non-standard attributes, you should use .getAttribute() rather than trying to access them as properties.
So ctrl.entity should be ctrl.getAttribute("entity") and the same for other non-standard attributes. Run this example in Chrome: http://jsfiddle.net/jfriend00/Lxna7/.
Also, you should remove the space from your ID value as that's not a legal character and makes the id unusable in many circumstances (where a space is a delimiter between identifiers).
Try closing correctly the image tags to see if that fix the problem:
<img src="path/file.html" />
I want the file explorer to pop up for user selecting files when user click a button which is a <input id="J_upload_btn" type="button" />.
However the source above only works well on Firefox 4. On Chrome 11/12 and Firefox 3, the selecting-file-box pops up only after you click the button several times.
My jQuery version is 1.5.2.
$('#J_upload_btn').click(function() {
var _id = new Date().getTime(),
_$form = $('#J_pic_form'),
_$input = $('<input id="' + _id + '"' +
' type="file" name="file" class="hide_input">');
_$form.append(_$input);
_$input.trigger('click');
}
});
Unmatched closing curly brace. Just removing it should work.
You cannot reliably access DOM elements before the DOM tree is created. If this code is not wrapped in a function and called after that is the case, simply wrapping it in $(function(){ /* code */ }); is enough for jQuery to call it as soon as the DOM is ready.
In some browsers (including Firefox 3), triggering click events on <input type="file"> elements is restricted for security reasons.
This code works for me in Chrome:
$(function() {
$('#J_upload_btn').click(function() {
var _id = new Date().getTime(),
_$form = $('#J_pic_form'),
_$input = $('<input id="' + _id + '"' +
' type="file" name="file" class="hide_input">');
_$form.append(_$input);
_$input.trigger('click');
});
});
This kind of input is more restricted than others, by security issues. Sure there's a more current method, but the most common method to do this is using an invisible input (with opacity 0, not display:none), and placing a fake button over it, so when you click on the fake button, you're also clicking on the invisible input.
You may want to try not wrapping the input as a jayesh object. If you pass the HTML string to append, then the browser should add a new input field too.
var input = "<input id='"+id+"' />";
_$form.append(input);
Also, have you tried debugging the click in a console to make sure that it is getting fired or the subsequent code has the issue?
If you are tiggering click on the input, a function is expected to run. But as far as I can see, you have not written any function for the click event of _$input.
I want to detect and replace tab characters in a bit of HTML like this:
<code>
something
{ something else
}
</code
Right now, I am using something like this:
$(this).html(replaceAll(trim($(this).html()), "\t", " "));
But IE, in all its cleverness, changes tab characters into spaces, and so doing the above is useless. Does anyone know how I can detect tab characters in the HTML source with javascript for IE?
So, jmaglasang gave me a good idea. He said IE respects whitespace in a pre tag. So, I thought why not insert a pre tag with javascript, read the html, then remove the pre tag afterward. It works but theres a catch - you have to use a setTimeout callback. Heres the code:
$("code").each(function()
{ $(this).wrap("<pre></pre>");
var element = $(this);
setTimeout(function() // read the html
{ var x = element.html().split("");
for(n in x)
{ alert(x[n].charCodeAt(0) + " '" + x[n] + "'");
}
}, 0);
});
The setTimeout is neccessary because for some reason, IE waits to re-render the html until after all the javascript finishes running. Incidentally, it also waits to execute any callbacks issued by setTimeout. I wish I knew how I could force IE to render the html immediately... If anyone knows I'd definitely appreciate it.