Is there a way to reload JavaScript within a DIV block without doing a page refresh?
Thanks!
You can evaluate the javascript, say in a string
var script = "...";
by calling the eval function
eval(script);
Related
I have an tinymce editor in admin area where I want to use script tag. With using follows, I am able to use tag and save it. After that I can see it in database as saved. But the problem is that when I edit the same page again and the editor preloaded with content then it stripped the tag somehow. So I can not see it and edit it again.
valid_children : '+body[style],+body[script]',
extended_valid_elements : '*[*]',
So please let me know if there is any way I can stop these script tag stripping off. I have tried to consol log the editor.getContent() but it also show content without tag whereas I can see it in DB and frontend source.
Thanks
You are likely getting tripped up by trying to load the closing script tag as part of a string in JavaScript itself.
If you have a closing script (</script>) tag in a JavaScript string the interpreter is likely interpreting that as the closing of your script block and not part of the content in the string. In many cases this will simply break the page's JavaScript completely.
Here is an example in TinyMCE Fiddle that shows the correct way to pass a </script> tag in a string: http://fiddle.tinymce.com/Fvhaab
For example:
tinymce.editors[0].setContent(`
<p>This is NEW content in TinyMCE!</p>
<script>
var x = "test";
var y = 10;
</script>
`);
...will not work. If you use this attempt for the closing script tag you will see the editor does not appear at all as that closing script tag prematurely ends the entire section of JavaScript.
Instead you can escape the / in the closing script tag:
tinymce.editors[0].setContent(`
<p>This is NEW content in TinyMCE!</p>
<script>
var x = "test";
var y = 10;
<\/script>
`);
...and you will see that the script is loaded into TinyMCE as you would expect.
As you can see I'm not trying to access anything from inside the actual iframe's contentWindow but rather the iframe tag itself.
Example iframe element:
<iframe id="placeholder"
data-ids="1J2cSrn6ox4,BUQzSn85NMs,Fzav6plKfr8,MsNJTTP3LMM,hTZLXnY7Gc0"
style="100%; 330px;" frameborder="0" allowfullscreen="1"
allow="accelerometer; autoplay; encrypted-media; gyroscope;
picture-in-picture" width="100%" height="100%"></iframe>
I'm trying to retrieve the string that is assigned to the property data-ids
how can I retrieve this using XPath?
//iframe[1].data-ids
//*[#id="placeholder"]/#data-ids
If I use JavaScript getAttribute function works to retrieve:
var frame = document.querySelector('iframe');
var val = frame.getAttribute('data-ids');
alert(val);
but how to do it in Xpath?
Update 1
I'm using the inspector in Chrome, under elements, CTRL-F doing search for XPATH; it won't let me access the specific string I'm trying to reference:
//*[#id="placeholder"]//#data-ids
When I use this it doesn't work it still highlights the entire iframe.
Do you know how to access only the string between quotes assigned to "data-ids" attribute of the iframe tag?
Is there a command similar to the JS command getAttribute() in Xpath?
I want to return only "1J2cSrn6ox4,BUQzSn85NMs,Fzav6plKfr8,MsNJTTP3LMM,hTZLXnY7Gc0".
Update 2
Now I'm now using JavaScript "snippet" inside chrome's inspector to evaluate the Xpath reference like so:
function getElementByXpath(path) {
return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
}
test = getElementByXpath("//*[#id="placeholder"]//#data-ids")
console.log(test);
and it now outputs the following to the console:
data-ids="1J2cSrn6ox4,BUQzSn85NMs,Fzav6plKfr8,MsNJTTP3LMM,hTZLXnY7Gc0"
which is great, but how do I get just the text? Not the name/value pair, not the attrName="value" but rather just what's in between the quotes?
I'm not asking how to do it with JavaScript; I'm asking how to target the string value of the attribute without converting it to a string.
Ideally //iframe/#data-ids should return the value.
Can you please elaborate what message you are getting and where you are trying the xpath.
I have a richtext component, I gave input as "foo" to richtext component, and it generated
<p>foo</p>, I'm trying to pass this generated content from JSP to JS using the following code.
<script>
var jsvariable = '<%=jspvariable%>'
</script>
the above line throws "unterminated string literal" error, as the JS variable contains
ptagstarts foo ptagends
I'm using the value in JS as I need this variable in other pages as well.
May I know how we to remove this error.
From what you wrote, seems, that you have in your jspvariable string </script>. Html parser treats it as ending of the script block, and you getting invalid script block.
You can check source of your page to be sure, that I am right.
As Thomas suggested, you can escape your content. But as long as this content is provided by user, I would use XssApi, to prevent xss attack as well.
So it would be something like:
var jsvariable = '<%=xssApi.encodeForJSString(jspvariable)%>'
Or:
var jsvariable = '<%=xssApi.filterHTML(jspvariable)%>'
In first case you will get that <script> block from richtext component into your js variable. It will be encoded, and you will not get this error, but I think you do not need it.
In second case, you, should get only text value from you component.
UPDATE 1
Also, as I wrote you in comments, It would be nice to see the way you extract content from your richtext component, because I think, there is a better way of doing this, so you will get only text without anything else.
I want to add some javacsript to a Zend_Form_Element_Text .
At first I thought a decorator would be the best way to do it, but since it is just a script (the markup doesn't change) then maybe a view helper is better? or a view script?
It seems like they are all for the same purpose (regarding a form element).
The javascript I want to add is not an event (e.g. change, click, etc.). I can add it easily with headScript() but I want to make it re-usable , that's why I thought about a decorator/view helper. I'm just not clear about the difference between them.
What is the best practice in this case? advantages?
UPDATE: Seems like the best practice is to use view helpers from view scripts , so decorators would be a better fit?
Thanks.
You could create your own decorator by extending Zend_From_Decorator_Abstract and generate your snippet in it's render() method :
class My_Decorator_FieldInitializer extends Zend_Form_Decorator_Abstract {
public function render($content){
$separator = $this->getSeparator();
$element = $this->getElement();
$output = '<script>'.
//you write your js snippet here, using
//the data you have in $element if you need
.'</script>';
return $content . $separator . $output;
}
}
If you need more details, ask for it in a comment, i'll edit this answer. And I didn't test this code.
Use setAttrib function.
eg:-
$element = new Zend_Form_Element_Text('test');
$element->setAttrib('onclick', 'alert("Test")');
I'm not actually seeing where this needs to be a decorator or a view-helper or a view-script.
If I wanted to attach some client-side behavior to a form element, I'd probably set an attribute with $elt->setAttrib('class', 'someClass') or $elt->setAttrib('id', 'someId'), some hook onto which my script can attach. Then I'd add listeners/handlers to those targeted elements.
For example, for a click handler using jQuery , it would be something like:
(function($){
$(document).ready(function(){
$('.someClass').click(function(e){
// handle the event here
});
});
})(jQuery);
The benefit is that it is unobtrusive, so the markup remains clean. Hopefully, the javascript is an enhancement- not a critical part of the functionality - so it degrades gracefully.
Perhaps you mean that this javascript segment itself needs to be reusable across different element identifiers - someClass, in this example. In this case, you could simply write a view-helper that accepts the CSS class name as the parameter.
"the markup doesn't change", Yap,
but I like to add some javascript function throw ZendForm Element:
$text_f = new Zend_Form_Element_Text("text_id");
$text_f->setAttrib('OnChange', 'someFunction($(this));');
The best way is if you are working with a team, where all of you should use same code standard. For me and my team this is the code above.
I am trying to integrate yui editor in a cakephp form
the editor is attached to the textarea, I tried the handleSubmit option and it didn't work, so I went trying manual. so- I've attached a listener to the onsubmit, which is working.. or not.
Editor initialization ( a copy-paste from yui site, only element named changed):
(function() {
//Setup some private variables
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event;
//The SimpleEditor config
var myConfig = {
height: '300px',
width: '99%',
focusAtStart: true
};
//Now let's load the SimpleEditor..
var myEditor = new YAHOO.widget.SimpleEditor('ArticleContent', myConfig);
myEditor.render();
})();
Initialization works fine (I assume) since the editor now holds the real content of that record field.
The onsubmit listener function:
function setTextArea()
{
alert('s');
var dd = myEditor.saveHTML();
alert('d');
return false;
}
The first alert is working, so the event is handled.
However, the second alert never happens. the form - somehow - is submitted before it.
and, the content is not saved.
further checks shows that ANY call to myEditor [even alert(myEditor)] is submitting the form...
anyone? help? i
just a guess, but is any code in the 'saveHTML' function calling something that clashes with cakephp functions?
if this is the problem, you may be able to get around it by modifying the yui code function names (hacky i know, but unless there is some way to use a custom namespace for it i think you'd be stuck with it)
The best solution was to use tinyMCE....