I'm trying to replace text on a site using this code:
<script type="text/javascript">
$(document).ready(function () {
$(function() {
$(document.body).find('*').each(function() {
var tmp = $(this).children().remove();
var text = $(this).text();
text = text.replace(/Vorname/g, "Firstname");
$(this).text(text);
$(this).append(tmp);
});
});
});
</script>
HTML (snippet) is like this (generated by SharePoint):
<td style="padding:4px;">
<div>
<label for="ctl00_IWS_WH_CPH_Content_ContactUsControl1_firstName">
<span><font color='red'>*</font> Vorname (erforderlich):</span>
</label>
</div>
The above jQuery code is not being executed...
Reference to jQuery has been placed in the master page.
Any clue why this is not working?
Regards,
Thomas
I have found you are using two doc ready functions you have to use only one:
Either : $(document).ready(function () {
or : $(function() {
and see if this works.
Thanks
working demo
check the jsfiddle link for the working code
$(document).ready(function () {
$(document.body).find('*').each(function() {
var tmp = $(this).children().remove();
var text = $(this).text();
text = text.replace(/Vorname/g, "Firstname");
$(this).text(text);
$(this).append(tmp);
});
});
$('.element').text("sometext");
i think this is not right
var text = $(this).text();
text = text.replace(/Vorname/g, "Firstname");
you should use:
var text = $(this).text();
text.replace("Vorname", "Firstname");
then you should document better your question, i don't understand your real problem.
In your code, you are stripping off some elements style. If you want to keep layout you better have to use html not text, but it really depends of what you are looking for.
$(document).ready(function () {
$('body').find('*').each(function() {
var html= $(this).html().replace(/Vorname/g, "Firstname");
$(this).html(html);
});
});
Related
I am reading data from a database and adding each link in a new table row.
I wrote a jquery function to replace the href of the link with a new value, but it is not working.
Also I have to mention that each time a new link is added to the table, I want the replacement to be done instantly, without click event or something.
$(document).ready(function() {
$("a").show(function() {
var before = $(this).href;
var replacewith = "https://www.google.com"
var after = before.replace(before, replacewith);
$(this).attr("href", after);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td>
Link1
</td>
</tr>
Your code has unnecessary lines. However fix is done
$(document).ready(function () {
$("a").show(function () {
var before = $(this).attr('href');
var replacewith = "https://www.google.com";
var after = before.replace(before, replacewith);
$(this).attr("href", after);
});
});
[edited: removed original comment for clarity]
See the second comment for answer.
Please someone tell me what is the problem in the code which i have written.
Js
$("button").click(function() {
document.getElementById("demo").innerHTML = document.getElementById("asd").value;
});
$(function() {
var edit = document.getElementById('demo');
$(edit).blur(function() {
localStorage.setItem("data1", this.innerHTML)
});
if (localStorage.getItem("data1")) {
edit.innerHTML = localStorage.getItem("data1");
}
});
Html
<input type="text" id="asd">
<button>asdsad</button>
<p id="demo"></p>
But the same code is working perfectly in this:
Js
$(function() {
var edit = document.getElementById('demo');
$(edit).blur(function() {
localStorage.setItem("data1", document.getElementById("demo").innerHTML)
});
if (localStorage.getItem("data1")) {
edit.innerHTML = localStorage.getItem("data1");
}
});
HTML
<div contenteditable="true" id="demo">Some text here</div>
Please some one tell me what went wrong here.
When you pass the edit variable (which contains a DOM element) into jQuery as an argument, a jQuery object is returned. That changes the scope of this inside your blur event to a jQuery object. jQuery doesn't have a property of innerHTML, so it returns undefined. JavaScript DOM elements do have an innerHTML property of course, so that's why the second example works.
One way to fix your first example is to replace this:
$(edit).blur(function() {
localStorage.setItem("data1", this.innerHTML)
});
With this:
$(edit).blur(function() {
localStorage.setItem("data1", $(this).html());
});
I need to use two plug-ins in one element on my page. I've never needed to do this and tried as it is in the code below. Most did not work!
<script type="text/javascript">
$(document).ready(function()
{
var wbbOpt = {buttons: "bold,italic,underline,|,img,link,|,code,quote"}
// plugin one wysibb
$("#editor").wysibb(wbbOpt);
// plugin two hashtags
$("#editor").hashtags();
//the two plugin worked in textarea #editor
});
</script>
Can anyone help me? Thank you.
So you can't use them because each of them take control and wrap the textarea. Since the editor is the most complex of the two the best thing to do is to take the code of the hashtag and adapt it at your need.
So here's a working example, but if you want you can trigger the function I use to the change event (adding it) or some way else
<div id="higlighter" style="width;1217px;"></div>
<textarea id="editor"></textarea>
<br />
<input id="btn" type="button" value="HASH">
<br />
$(document).ready(function() {
var wbbOpt = {
buttons: "bold,italic,underline,|,img,link,|,code,quote"
};
$("#editor").wysibb(wbbOpt);
$('#btn').click(function () { report() });
});
function report() {
$("#hashtag").val($("#editor").htmlcode());
var str = $("#editor").htmlcode();
str = str.replace(/\n/g, '<br>');
if(!str.match(/(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,#?^=%&:\/~+#-]*[\w#?^=%&\/~+#-])?#([a-zA-Z0-9]+)/g)) {
if(!str.match(/#([a-zA-Z0-9]+)#/g)) {
str = str.replace(/#([a-zA-Z0-9]+)/g,'<span class="hashtag2">#$1</span>');
}else{
str = str.replace(/#([a-zA-Z0-9]+)#([a-zA-Z0-9]+)/g,'<span class="hashtag2">#$1</span>');
}
}
$("#editor").htmlcode(str);
}
you can check a working code here on jsfiddle.
http://jsfiddle.net/4kj7d6mh/2/
You can type your text and use the editor, and when you want to higlight the hastag you click the button. If you want that to happen automatically you have to change this line:
$('#btn').click(function () { report() });
And attach the function to the keypress for example (experiment a bit)
I'm trying to search through the p tag content inside the .list and I'm probably just over complicating this but my alert isn't working, maybe it's because of other code I have on the page this isn't functioning but I was wondering if someone can help me figure out where I'm going wrong.
JS
$(document).ready(function() {
var sresults = $('.mainsearch input').val();
var sfinder = $('.list p').find(sresults).text(sresults);
$('.mainsearch input').keyup(function () {
$('.search-help').append(sfinder);
alert(sfinder);
});
});
HTML
<div class="mainsearch">
<input/>
<div class="search-help">Results:
</div>
</div>
<div class="list">
<span><p>test</p></span>
<span><p>another result</p></span>
<span><p>yet another result</p></span>
</div>
something like this?
$(document).ready(function() {
$('.mainsearch input').keyup(function () {
var sresults = $('.mainsearch input').val();
var sfinder = $('p:contains('+sresults+')').text();
$('.search-help').text("Results:" + sfinder);
alert(sfinder);
});
});
http://jsfiddle.net/h7uYB/
Update:
try this:
http://jsfiddle.net/h7uYB/2/
Typo?
alert(sfiner)
should be
alert(sfinder)
Try using the :contains() Selector. From the website:
Description: Select all elements that contain the specified text.
The matching text can appear directly within the selected element, in any of that element's descendants, or a combination thereof. As with attribute value selectors, text inside the parentheses of :contains() can be written as a bare word or surrounded by quotation marks. The text must have matching case to be selected.
So for you:
var sfinder = $('.list p:contains(' + sresults + ')');
Are you just trying to return the paragraphs that match what's typed? Then you want to use :contains():
$(document).ready(function() {
$('.mainsearch input').keyup(function() {
var sresults = $('.mainsearch input').val();
var sfinder = $('.list p:contains("' + sresults + '")');
//$('.search-help').append(sfinder);
console.log(sfinder);
});
});
http://jsfiddle.net/mblase75/kQnTV/
You might be aiming for this, though:
$(document).ready(function() {
$('.mainsearch input').keyup(function() {
var sresults = $('.mainsearch input').val();
var sfinder = $('.list p:contains("' + sresults + '")');
$('.search-help').html(sfinder.clone());
});
});
http://jsfiddle.net/mblase75/kQnTV/1/
I want to be able to mouse over a <div> and use JavaScript to get the information (for example the id) and store it in a variable.
What would be the most efficient way to make this happen?
This sould do it for you :
$('div').mouseover(function(){
var content = $(this).html();
var id = $(this).attr('id');
alert('the element\'s ID is: '+id+'and content is: '+content);
});
$('#yourDivId').hover(function(){
var value = $(this).html();
});
You can try this:
var currentDivID;
var currentDivValue;
$(document).ready(function(){
$('div').mouseover(function(){
currentDivID = this.id
currentDivValue = $(this).html();
});
});
besides the fact that div's doesn't have values, you can store it's text or argument or something else.
var someVar = '';
$(document).ready(function(){
$('div').mouseover(function(){
someVar = $('div').html();
someVar = $('div').attr('id');
someVar = $('div').attr('class');
someVar = $('div').find('input').val();
}
});
$("div").bind("mouseenter",function(){
var divHTML = $(this).html();
});
here is the fiddle http://jsfiddle.net/fveRk/
Here is a simple example:
<div id="test">Hello world!</div>
$('#test').mouseover(function(){
var test = $(this);
console.log(test);
});
http://jsfiddle.net/4uLzf/
Attach a mouseover event to the div.
Using jquery:
$('#theDiv').mouseover(function() {
var value = $(this).html();
//store value
});
jQuery has a nice way to detect the hovering: http://api.jquery.com/hover/
When you say "get the value" are you talking about getting the div's contents? In that case, the html() jQuery method will do it.
http://api.jquery.com/html/