I am new to ruby and watir-webdriver. I am trying to learn how to test tinymce from the website http://www.tinymce.com/tryit/full.php. I can click the buttons such as "Bold" but I cannot figure out if there is a way to select/highlight text in the textarea to test the "Bold" button. I can find the text "Feel free" in the textarea but I am not sure how to select the text. I have noticed that the other posts mention that Tinymce is in frames but it does not appeart to be in a frame on the current page.
Here is what the section looks like (edited form)
<textarea id="content" style="width: 100%; height: 550px; display: none;" name="content" cols="20" rows="20" aria-hidden="true">
<p>Feel free to try out the different features ...</p>
</textarea>
require 'watir-webdriver'
b = Watir::Browser.new :firefox
b.goto "http://www.tinymce.com/tryit/full.php"
b.div(:id => 'main').wait_until_present
b.textarea(:value => /Feel free/).exists? #this evaluates to "true"
Where I need to select the text
b.a(:title => 'Bold (Ctrl+B)').hover
b.a(:title => 'Bold (Ctrl+B)').click
Yes, the editor is in a frame. This selects to from Welcome to the TinyMCE editor demo!:
require "watir-webdriver"
browser = Watir::Browser.new :firefox
browser.goto "http://www.tinymce.com/tryit/full.php"
require "watir-webdriver/extensions/select_text"
browser.frame(id:"content_ifr").h1.select_text "to"
Related
I am testing this code and it is working here http://www.w3schools.com/js/tryit.asp?filename=tryjs_debugger but not on my Joomla page. The Chrome console error is at the bottom of the post
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function toggleDiv(divId) {
$("#"+divId).toggle();
}
</script>
Toggle Button
<div id="myContent" style="background-color: #aaa; padding: 5px 10px;">
The content in this div will hide and show (toggle) when the toggle is pressed.
</div>
63-tet.html:168 Uncaught TypeError: Cannot read property 'toggle' of nulltoggleDiv # 63-tet.html:168(anonymous function) # VM4704:1
I have cheched the source page and my code is sent back to me by the server untouched:
<div itemprop="articleBody">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function toggleDiv(divId) {
$("#"+divId).toggle();
}
</script>
Toggle Button
<div id="myContent" style="background-color: #aaa; padding: 5px 10px;">
The content in this div will hide and show (toggle) when the toggle is pressed.
</div> </div>
It sounds like Joomla is filtering/ black-listing certain keywords. You can see that it is trying to call the function:
nulltoggleDiv and access the toggle property of that.
If you press f12 and search for "toggleDiv" you should be able to see the actual html after it has been deformed.
Check out this document:
https://docs.joomla.org/Help16:Content_Article_Manager#Filtering_Options_.28HTML.29
from doc:
Black List Filters
The default filter method in Joomla! is 'Black List'. The default 'Black List' contains the following tags to exclude:
'applet', 'body', 'bgsound', 'base', 'basefont', 'embed', 'frame', 'frameset', 'head', 'html', 'id', 'iframe', 'ilayer', 'layer', 'link', 'meta', 'name', 'object', 'script', 'style', 'title', 'xml'
The default 'Black List' contains the following attributes to exclude:
'action', 'background', 'codebase', 'dynsrc', 'lowsrc'
You can 'Black List' (disallow) additional tags and attributes by adding to the Filter tags and Filter attributes fields, separating each tag or attribute name with a space or comma. If you select a Filter Type of "Black List", this list will always be used, plus any additional tags and attributes you add.
The problems seems to be with this reference
$("#"+divId).toggle();
After I replaced the above with
var element = document.getElementById(divId);
element.toggle();
the code worked
I am using Twitter Bootstraps "dropdown menu" on WordPress for some widget I created and it works fine. But I want to change the icon to "minus" when it drops the content and when another "plus"-icon is clicked the "minus" should close. At the moment it will only toggle the current "plus".
<div class="dropdown toggle-details">
<img src="">
<h3>title</h3>
<h4><subtitle</h4>
<a class="dropdown-toggle my-btn" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i class="fa fa-plus-circle"></i></a>
<ul class="dropdown-menu" >
<li> <h6>item 1</h6></li>
<li><h6>item 2</h6></li>
</ul>
</div>
my script is
jQuery('a').click(function() {
jQuery(this).find('i').toggleClass('fa-minus-circle');
jQuery(this).find('fa-minus-circle').toggleClass('fa-plus-circle')});
You're missing a dot in your jQuery, so right now jQuery is looking for an html element with tag name fa-minus-circle within the "a" element. And obviously not finding it.
jQuery(this).find('.fa-minus-circle').toggleClass('fa-plus-circle')...
actually that probably won't fix it either, because after that statement you'll end up with both classes on the i element. I guess you could work around that with css, but cleaner would be to have the "i" element default to a + icon, and then toggle a more semantic class name like "open".
So css:
i { /* show plus icon */ }
i.open { /* show minus icon */ }
And jQuery:
jQuery("a").on("click", function() {
jQuery(this).find("i").toggleClass("open");
});
Heh - now that I just typed everything out I see what you were doing with that second statement. So yeah, you just need a dot so jquery looks for the classname not the element.
In my JQUerymobile pages, I have embedded popup div.
Here is an example of my pages content :
<html>
<head>...</head>
<body>
<div data-role="page" id="myPage" data-dom-cache="true" data-theme="a">
<div data-role="content" data-theme="a" >...</div>
<div data-role="footer" data-theme="a" data-id="footer-sante" data-position="fixed">...</div>
<div data-role="popup" id="popupOne" data-dom-cache="true" data-theme="b">
</div>
</div>
<div data-role="popup" id="popupTwo" data-dom-cache="true" data-theme="b">
...
</div>
</body>
</html>
I navigate from pages to anothers. Suddently, my embedded popups disappear from my DOM when I inspect my code.
As shown in my example, the popup location in the source code doesn't seem to change anything to the problem.
Since popups are removed from DOM, the code bellow does nothing (it actually worked before) :
$('#popupOne').trigger('create');
$('#popupOne').popup({ transition: "slidedown", position:"position-header" });
$('#popupOne').popup('open');
Is there a solution to keep my popups in my DOM ?
Is there a better location to embed popups in source code ?
Another way could be to load a popup from an external (cached) page but i never achieved to do that by javascript.
Any idea to solve the problem (or a workaround) ?
(Both) your HTML placements might be incorrect here. Remove the popupOne markup from the end of the page and paste it inside the div with data-role=content like this :
<div data-role="page" id="myPage" data-dom-cache="true" data-theme="a">
<div data-role="content" data-theme="a" >
<div data-role="popup" id="popupOne" data-dom-cache="true" data-theme="b"></div>
</div>
<div data-role="footer" data-theme="a" data-id="footer-sante" data-position="fixed">...</div>
</div>
And if you want to reuse popups, I suggest you go the JS way. You could create popups n the fly and open them. Here's some code which does just that. Feel free to alter it to any thing you want :)
$.extend({
"makePopup": function (text) {
var $popup;
//creat popup element
$popup = $("<div/>", {
"data-role": "popup",
"data-theme": "a",
"data-overlay-theme": "a",
"data-transition": "pop"
}).popup();
//create close element
var $close = $("<a/>", {
"data-role": "button",
"html": "Close",
"href": "#",
"data-theme": "e"
}).on("click", function () {
//click event of close element
$(this).closest("[data-role=popup]").popup("close");
}).buttonMarkup();
//create content div - makes a nice jQM page structure.
var $content = $("<div/>", {
"data-role": "content",
//change this any way you want- Im just adding the text from clicked link here.
"html": "<span>" + text + "</span>"
});
//append $close to $content, then append $content to $popup
$content.append($close).appendTo($popup);
return $popup;
}
});
And when you want to use this, just do this,
var popupEl = $.makePopup("Some HTML");
And then you could, say, open it :
popupEl.popup("open");
Or simply,
$.makePopup("Some HTML").popup("open");
Here's a demo : http://jsfiddle.net/hungerpain/xjz3V/
Hope this is what you wanted :)
I have HTML loaded with the Jquery .load method and need to dynamically change anchor HREF and input button ONCLICK targets in this HTML on the client as the page loads, (I don't have the option to change the server generated HTML).
The .load works fine and I can change the HREF target OK but I can't find a way of changing the ONCLICK target?
HTML
Anchor HREF
<div style="width:143px;" id="LM_OBJV">
<span title="View Objectives Detail" class="PSHYPERLINK">
<a class="PSHYPERLINK" href="javascript:Action_win0
(document.win0,'LM_OBJV','Relationship Building',false,true);" tabindex="54"
id="LM_OBJV" name="LM_OBJV">Relationship Building</a>
</span>
</div>
Button ONCLICK
<div id="win0divLM">
<a id="Left" style="background-Color: transparent;border:0;" class="PBUTTON">
<span style="background-Color: transparent;">
<input type="button" onclick="Action_win0(document.win0,'LM_PB', 0, 0, 'Add New',
false, true);" style="width:120px; " class="PBUTTON" value="Add New" tabindex="77"
id="LM_PB" name="LM_PB">
</span>
</a>
</div>
Javascript
$('#result').load('some.php', function() {
$("a.PSHYPERLINK")
.each(function()
{
this.href = this.href.replace("Action_win0", "Action_winx");
});
});
So this JS works fine, loads the HTML into the #results DIV and changes the HREF's from "Action_win0" to "Action_winx".
But how can I also change the input type="button ONCLICK events from "Action_win0" to "Action_winx"? I've tried several Jquery selectors but just can't get it to work :(
$('a.PSHYPERLINK').attr('onclick', 'alert("bar")')
Demo: http://jsfiddle.net/kzVSt/
The markup below is what I have right now. I am writing an MVC application.
I found advise on this site that lead me to insert the width and height, however that did not answer my problem.
When I am entering text that is longer that 500px I want it to wrap, currently it is all staying on a single line and obviously, the complete text is not visible.
Can anyone help?
Thanks
Describe your Special:
<%= Html.TextBox("ShortDescription", Model.Special.ShortDescription, new { #style = "width: 500px; height:60px;background-color:#f1f2f3" })%>
The Html.TextBox helper generates an <input type="text" ... and text inside this type of inputs doesn't wrap. You should consider using a <textarea>. You could use the Html.TextAreaFor helper (not Html.TextArea because you already have a model, so make profit from it):
<%= Html.TextAreaFor(x => x.Special.ShortDescription, 10, 20,
new { #style = "background-color: #f1f2f3" }) %>
You should be able to use a TextArea as such:
<%= Html.TextArea("ShortDescription", Model.Special.ShortDescription) %>
or for your case explicitly :
<%= Html.TextArea("ShortDescription", Model.Special.ShortDescription,
new { #style = "width: 500px; height:60px;background-color:#f1f2f3" })%>