The following code works fine on Chrome and FireFox, but it doesn't work properly on IE:
if (jQuery.trim(jQuery("#"+element_id.name).val()) != "" && jQuery.trim(jQuery("#"+element_id.name).val()) != "0") {
jQuery("#filters-box").append('<span id="filter-'+ element_id.name +'" class="toggler"><button class="button white" onClick="removeFilter(\'filter-' + element_id.name + '\')"> ✖ </button>' + document.getElementById(element_id.name + "_caption" ).value + ' -> ' + document.getElementById(element_id.name).value + '</span>');
}
Though it can append the HTML code and render them on the page properly, but its onClick event generates the above error message.
Strangely i have tried changing your function name "removeFilter" and it works absolutely fine
Please find the change
var element_id = {
name: "test",
"test_caption": "_caption"
};
function rmvFilter(ele) {
alert(ele);
}
var html = '<span id="filter-' + element_id.name + '" class="toggler">';
html += '<button class="button white" id="button" onClick="rmvFilter(\'caption_' + element_id.name + '\');"> ✖ </button></span>';
jQuery("#filters-box").append(html);
I dont find any error in your code except that the exact combination of name isn't strangely working in IE9 only
If you precompile the string with jQuery you can attach events as if it were already in the DOM (basically). This is cleaner, non-obtrusive and should work in all browsers supported by jQuery:
if (jQuery.trim(jQuery("#"+element_id.name).val())
!= "" && jQuery.trim(jQuery("#"+element_id.name).val()) != "0") {
// precompile to a temp var
var $temp = jQuery('<span id="filter-'+ element_id.name +'" class="toggler"><button class="button white"> ✖ </button>' + document.getElementById(element_id.name + "_caption" ).value + ' -> ' + document.getElementById(element_id.name).value + '</span>');
// this works fine
$temp.find('button.button.white').on('click', function () { removeFilter('filter-' + element_id.name); });
jQuery("#filters-box").append($temp);
}
My thanks to you, Kartheek. I just ran into the same problem with a function called "removeFilter(event)" in IE9 (it worked fine in Firefox and Chrome) and changing the function name worked for me too.
I can only assume this was some kind of built-in function for IE which had not been implemented as of IE9, so the browser calls the wrong function which throws its not-implemented error.
Related
Im using this to capture the HTML source for a single html page.
It works good except for one thing.
After entering values into my html page, when I do the capture it only captures the page without the edited values.
Any Ideas please.
var getDocTypeAsString = function () {
var node = document.doctype;
return node ? "<!DOCTYPE "
+ node.name
+ (node.publicId ? ' PUBLIC "' + node.publicId + '"' : '')
+ (!node.publicId && node.systemId ? ' SYSTEM' : '')
+ (node.systemId ? ' "' + node.systemId + '"' : '')
+ '>\n' : '';
};
function getPageHTML() {
// alert( "<html>" + $("html").html() + "</html>" );
console.log(getDocTypeAsString() + document.documentElement.outerHTML);
}
and the call from the button
<div class="no-print">
<div class="buttonBar">
<input type="button" class="button" value="Print" onClick="window.print()">
<input type="button" class="button" value="Save" onClick="getPageHTML()">
</div>
</div>
The editing values will come from similar fields like this
So I would like to capture the edited 'PastMedicalHistory' as-well
<div class='row'>
<div class='cell100'>
<div class='table'>
<div class='cell100 content'>
<textarea id='PMH' class='basicTextArea PMHText' name="PastMedicalHistory"></textarea>
</div>
</div>
</div>
</div>
What are you trying to achieve?
The statement document.documentElement.outerHTML will take the HTML itself as rendered.
The values of the input elements are filled in afterwards, so not visible via outerHTML.
You could run through the elements, inspect them and populate the DOM.
What would be for the best, though is to describe what are you trying to achieve and put the full code example on codepen or similar.
You can't do that, this easy way. You're getting the same as looking "source code" from your browser.
Use jQuery or JS to parse document input values.
Then reinject it in your getDocTypeAsString
Found something that seems to work fine, but Im not that great of an expert to judge this on possible limitations
keep a watch over items like this
$( document ).ready(function() {
var isDirty = false;
$("textarea").on("change", function() {
isDirty = (this.defaultValue !== this.value);
if (isDirty)
this.defaultValue = this.value;
});
$("input").on("change", function() {
isDirty = (this.defaultValue !== this.value);
if (isDirty)
this.defaultValue = this.value;
});
});
call for the source of the new html like this
function getPageHTML() {
console.log( "<html>" + $("html").html() + "</html>");
}
I am trying to pass a variable to the onClick function using a previously stored value. I have a database setup that searches for store locations when provided with a ZIP code. For example, the following link is generated using an ajax call after a user searches for a Zip Code. The returned value "WAFHOH3" is the ID that is associated with that particular store:
Generated Link:
<input type="button" onclick="myfunction(WAFHOH1);" value="This Is My Store" data-store-code="WAFHOH3">
Based on this code:
<div class="col-sm-3"><input type="button" onclick="myfunction(' + item.store_code + ');" value="This Is My Store" data-store-code="' + item.store_code + '"></div>
My problem is that if anything other than a number is returned I get a "Uncaught ReferenceError: WAFHOH3 is not defined" console error. When a number is passed like the example below, everything works fine and I get no errors and the application continues to work as expected.
For example (This Works):
Ive tried manually changing the character string to numbers only to isolate any database related issues. My only guess is that there is something in my code that is maybe attempting to verify the input as number.
The full code is below for the ajax call.
Full Code:
function myFunction() {
var searchValue = $('#foobar').val();
if (searchValue.length > 3) {
var acs_action = 'searchCction';
$.ajax({
async: false,
url: mysearchurl.url+'?action='+acs_action+'&term=' + searchValue,
type: 'POST',
data: {
name: searchValue
},
success: function (results) {
var data = $.parseJSON(results);
$('#resContainer').hide();
var html = '';
if (data.length > 0) {
html += '<br/><br/><ul>';
for (var i = 0; i < data.length; i++) {
var item = data[i];
html += '<li>';
html += '<div class="row myclass">';
html += '<div class="col-sm-9">';
html += ' <h3>' + item.label + '</h3>' ;
html += ' <span>' + item.desc + '</span>';
html += '</div>'
html += ' <div class="col-sm-3"><input type="button" onclick="dofunction(' + item.store_code + ');" value="This Is My Store" data-store-code="' + item.store_code + '"></div>';
html += '</div>';
html += '</li>';
}
html += '</ul><br/><br/><p>This is an example message please email us at admin#admin.com for assistance.';
}
else {
html += '<br/><br/><p>This is an example message, email us at admin#admin.com for assistance.';
}
$('#foo').html(html);
$('#foo').show();
$('.foobar').hide();
}
});
} else {
$('#foo').hide();
}
}
You need to wrap the input item.store_code with quotation marks; otherwise, it tries to treat it as a variable, not a string:
html += '<div class="col-sm-3"><input type="button" onclick="noActivationCodeRegistration(\'' + item.store_code + '\');" value="This Is My Store" data-store-code="' + item.store_code + '"></div>';
Ideally, you would attach a click handler after giving the buttons a class (such as register):
html += '<div class="col-sm-3"><input type="button" class="register" value="This Is My Store" data-store-code="' + item.store_code + '"></div>';
// Later
$('.register').on('click', function() {
var storeCode = $(this).data('storeCode');
noActivationCodeRegistration(storeCode);
});
I may be late, and maybe its an absolute mistake of me, but, i have to add my answer here because i just solved exactly the same situation in about three minutes ago .
I just solved this using the most simple sollution, and the error "Uncaught ReferenceError" from the console is solved, also i have my alert(); passing the variable as i needed.
I also need to include that i did not aproove the sollution gave, about "not using" the alert function, once i searched for the sollution, not for another method for that .
So, as i am using php, and the document is html, i thinked about the apostrophe charactere to the variable, after i had been spectating the element using chrome, first moving the function alert to the parent and child elements, that not solved .
After, also in the specting element, inside chrome F12 i tryed changing the function, including '' (that i passed in php code) into variable inside the alert function as: onclick="alert(variable);" to onclick="alert('variable');" and my alert had worked .
Ok. So, i try everything to insert '' 2 single quotes '' to my variable in php, that seems impossible, even if i change all my code to " and use ' or the oposite .
Then, i decided to try the most obvious and old school method, that is about charactere representation, and i cfound that ' (single quote) is represented by ' in php. Everything inside ->> ' <<-
My php code is like this : onclick="alert(''.$variable.'');"
It will work! (with no Vue), ok ? :)
I have a hidden page element on my form with an id called remainingpoints. I also have the following javascript code:
$(document).ready(function () {
$("#FileSubmit").click(function (event) {
var remainingpoints = document.getElementById("remainingpoints").value;
if (parseInt(remainingpoints) == 0)
alertString += "PARTICIPATION POINTS: You have already assigned your course quota\nof " + '#Model.Course.ParticipationPoints' + " participation points to this course, you cannot add further\ncontent without making amendments"
else if (parseInt(contentpointsvalue) > parseInt(remainingpoints))
{
alertString += "PARTICIPATION POINTS: You already have " + '#Model.CoursePointsToDate' + "/" + '#Model.Course.ParticipationPoints' + " points assigned to this course, you can only add a maximum of " + '#Model.CoursePointsRemaining' + " more but this video\n has a participation value already assigned for " + contentpointsvalue + " points which would \nexceed the total value allocated to the course"
}
});
});
Validation is being fired on Chrome, Firefox, Opera, and Safari but for some reason the client side validation does not work on IE10. Can anyone see why this may be?
I know it's already discussed here, but there were no solution to get the whole document (including doctype).
$(document).html(); returns null...
This will get you all the HTML:
document.documentElement.outerHTML
Unfortunately it does not return the doctype. But you can use document.doctype to get it and glue the two together.
You can do
new XMLSerializer().serializeToString(document);
for all browsers newer than IE 9
try this.
$("html").html()
document is a variable it dose not represent the html tag.
EDIT
To get the doctype one could use
document.doctype
This is a function which has support in IE6+, it does't use outerHTML for even more support, it adds the doctype and uses a few tricks to get the html tag and its attributes. In order to receive a string with the doctype, and doesn't use outerHTML so it supports every browser. It uses a few tricks to get the html tag. Add this code:
document.fullHTML = function () {
var r = document.documentElement.innerHTML, t = document.documentElement.attributes, i = 0, l = '',
d = '<!DOCTYPE ' + document.doctype.name + (document.doctype.publicId ? ' PUBLIC "' + document.doctype.publicId + '"' : '') + (!document.doctype.publicId && document.doctype.systemId ? ' SYSTEM' : '') + (document.doctype.systemId ? ' "' + document.doctype.systemId + '"' : '') + '>';
for (; i < t.length; i += 1) l += ' ' + t[i].name + '="' + t[i].value + '"';
return d+'\n<html' + l + '>' + r + '</html>';
}
Now, you can run this function:
console.log(document.fullHTML());
This will return the HTML and doctype.
I ran this on example.com, here are the results
document.documentElement.innerHTML
will return you all document markup as string
to get the whole doctype read this
I'm not sure about getting the complete doc.but what you can do is,you can get the content of html tag seprately and doctype seprately.
$('html').html() for content and document.doctype for getting the doctype
I don't think there is a direct access to the whole document (including the doctype), but this works :
$.get(document.location, function(html) {
// use html (which is the complete source code, including the doctype)
});
I have done it on browser's console
document.documentElement;
I'm making a jQuery MP3 player. The song structure is first generated (including the information about the song), and then the structure is appended to a div using jQuery like this:
function loadFromPlaylist(playlist) {
var songsStructure;
for (var i=0; i<playlist.length; i++) {
songsStructure +=
"<div id='song" + i + "'>" +
"<span class='mpPlaylistArtist'>" + playlist[i].artist + "</span>" +
"<span class='mpPlaylistSong'>" + playlist[i].song + "</span>" +
"<span class='mpPlaylistAlbum'>" + playlist[i].album + "</span>" +
"</div>";
}
$('#mpTracks').append(songsStructure);
}
This works perfectly except for one thing. When the items are displayed in the browser, a string ("undefined") is printed above the songs, like so:
<div id="mpTracks">
"undefined"
<div id="song0">...</div>
<div id="song1">...</div>
</div>
Googling this problem yielded alot of related problems but that didn't help me.
Does anyone know what the problem might be?
Initialize your variable to an empty string, before using it:
var songsStructure = '';
You did not set an initial value, so it is set to undefined. According to JS rules for concatination, this undefinedis then concatenated with the strings generated by the for loop leading to your result.
You have to initialize the songsStructure variable.
Write
function loadFromPlaylist(playlist) {
var songsStructure="";
and your problem will be solved.