Jquery taconite selector with character that needs to be escaped - javascript

I'm using the jquery taconite plugin to make an ajax request that will replace a certain element in my page, however the element has an id like "email.subject"..
I can select it just fine if I do '$("email\\.subject")', but when I try to use the taconite plugin like this:
<taconite>
<replaceWith select="#email\\.subject">
JUCA
</replaceWith>
</taconite>
The plugin log says:
[taconite] No matching targets for selector: #email\\.subject
How can I make this work?

Ok this is what i did. It is not working for me though. (I did not go through the entire source). But it will point you in the right direction.
The problem really is that in the jquery.taconite.js file, around line 152 (if you are looking at the latest version!) you can see:
var q = cmdNode.getAttribute('select');
var jq = $(q);
if i add an alert to the above statement to find out the value of jq it says: [Object object]. But this works as long as it contains no .
The problem is that the author of taconite is not checking for . from the "select" attributes value. The following code works for me when i tried it isolated in a simple js file. But when i use the same in the jquery.taconite.js file it does not work. Needs more tweaking around?
var x = cmdNode.getAttribute('select');
alert(x); //Shows what you have entered in <replaceWith select="#email.subject"> i.e "#email.subject"
var q = x.replace(/\./g, "\\\\\."); //Searches for a . in the string and escapes it! So now it becomes: "#email\\.subject"
alert(q) //Alerts #email\\.subject ... Great! Works fine till this point!
var jq = $(q);
alert(jq[0]); //Says "undefined"!!!! This is where i got stuck! Why does it say undefined??

Related

How do I get document.getElementsByTagName('').innerHTML to make text between 2 tags?

I'm trying to use JavaScript to include a footer on several webpages, so if I want to change the footer, I only have to change it in one place. PHP is not available on this server and neither are server side inserts (SSI), but Perl, Python, and Tcl are available. I have been trying with document.getElementsByTagName('footer').innerHTML = "text"; but it doesn't produce text. I copied this code from dev.mozilla, and it tells me how many tags I have:
var footer = document.getElementsByTagName('footer');
var num = footer.length;
console.log('There is ' + num + ' footer in this document');
So, I don't know what's wrong with the innerHTML script. I also tried with paragraph tags and got the same results in both cases.
I reccoment using textContent instead. Se why here.
To see how it works, paste the following into your browser console while you're on StackOverflow and hit enter.
document.querySelector('.site-footer').textContent = 'Custom footer content.'
note: use querySelector with a class instead of getElementByTagName
Cheers! 🍻
Before asking this question, I had searched for Python includes without any luck, so I stopped there, but after asking this question, I thought that I should search for Perl/Ruby includes. Today, I found out that I can use the Perl use function, so I could study that and try to implement it although I am completely new to Perl. Ruby also appears capable, perhaps even more. I have no experience with Ruby either, but maybe I should start there.
I just figured out that getElementsByTagName() results in an array, so I have to refer to the footer's index with [0]:
var footerTags = document.getElementsByTagName('footer');
footerTags[0].innerHTML = "test";

Passing in a String argument from Wordpress placeholder

I'm currently using Wordpress event manager. There is basically a placeholder feature where when using Wordpress in which text from say the "Excerpt" text area will be saved into a placeholder say #_EVENTEXCERPT. The problem I am having is that when I pass this in as a String argument it yields an error because of the line breaks (I'm guessing)
Link to console error
jQuery("#event-excerpt").append("<p id ='test'>#_EVENTEXCERPT</p>");
Is there any way I can get around this?
Update: Link to console after fixing quote mismatch Updated console link
Try that:
jQuery("#event-excerpt").append("<p id ='test'>#_EVENTEXCERPT</p>");
And also you need to replace the line breaks, something like that:
var test = "<p id ='test'>#_EVENTEXCERPT</p>";
test = test.replace("<br>", " ");
jQuery("#event-excerpt").append(test );
I dont know if this solve the problem for you, because I just replace the line breaks with spaces.

JavaScript: Change objectHTMLScriptElement

I am currently working within a CMS, cleaning up 12 websites.
Currently there are 12 identical JS files each residing within their respective site. Since they are all the same, my first initiative is to point every site to a single JS file that lives on the server.
Because I'm working within a CMS, I would have to open up 200 templates to accomplish this feat manually, so I'd, of course, rather do this dynamically.
Here is what I have done, so far:
var scripts = document.getElementsByTagName ("script");
console.log(scripts[15]);
My console.log statement returns what I'd like to replace, which is this:
<script src="/Assets/AmericanTower.com.br/uploads/content/js/main.js">
When I use alert(); rather than console.log(); I get this:
[object HTMLScriptElement]
I don't really understand why alert and console.log are showing me 2 different results.
So, I gather that I need to find a way to convert this HTMLElement to a string and then replace the string(or part of it) with the path to my new JS file.
Can anyone please shed some light?
Thank you in advance!
Robin
===============================
Thank you, L.C. Echo Chan, for your contribution. Here's how I used your suggestion and it worked like a charm!
var scripts = document.getElementsByTagName("script");
var jsPath=scripts[15].outerHTML;
var changedURL=jsPath.replace(jsPath,"RegionalGlobalAssets");
alert(changedURL);
Using outerHTML property can return the entire element
var scripts = document.getElementsByTagName("script");
alert(scripts[15].outerHTML);
Try to set you code as that
var scripts = document.getElementsByTagName("script");
console.log(scripts[15]);

Object [object Object] has no method surroundSelectedText

I made a jsfiddle and it works there, but I'm not able to find a work around for my problem.
window.surroundtest = function surroundtest(element, text2,text3) {
var c = $(element).parent().next('textarea');
c.surroundSelectedText(text2, text3);
}
This is the code working on jsfiddle: http://jsfiddle.net/qmpY8/4/
It uses rangy plugin to place text in certain textareas. But when I tried to place this on my website, it doesn't work and gives me that error I set on the topic.
Fixed. had to use jQuery instead of $ for some reason.

Print Element names in Console Use Firebug

I want to listing all input elements in console of firebug so in console window write the followings:
var inputs = $(":input");
console.log(inputs);
but when I press the Run in console appear null
also when I write just var inputs = $(":input"); the console show Undefined I sure the page have a lot of input elements, where is the problem?
There is nothing wrong with the provided snippet.
Though, without specifying what to write (using console.log) firebug will print whatever the last statement returned, when declaring a variable using var the result is always undefined.
var inputs = $(":input"); // firebug printing 'undefined' is valid
var abc = 123; // results in the same thing
Please make sure that the website in question actually uses jQuery (bound to global $), and that there really are input elements present in the DOM.
Also make sure that the jQuery version running is of a version later/equal to 1.0 (:input selector didn't exists until then).
If it has jQuery it probably is of a more recent version, how ever; without you providing us with additional information there is no way to guarantee it.
simply go to the firebug console and wrtie as #refp mentioned the page in question must have jquery included
$(":input")
press run

Categories

Resources