<#a href="javascript:.ListSubfunds.edit_subfund('JSIT0', 'C123');"><#span class="icon icon-edit"><#/span><#/a>
<#a href="javascript:.ListSubfunds.edit_subfund('JSIT1', 'C345');"><#span class="icon icon-edit"><#/span><#/a>
<#a href="javascript:.ListSubfunds.edit_subfund('JSIT2', 'C659');"><#span class="icon icon-edit"><#/span><#/a>
I need to click the correct <#span class="icon icon-edit"><#/span> based on text "JSIT1" within the <#a> tag ("href"). I'm trying to do this using selenium IDE firefox.
I'm brand new to selenium and not sure if this will work. The reason for this task is:
I am doing a manual job of updating data on a website so I'm trying to automate this process.
It doesn't look like an optimal way of selecting the element, but since you didn't provide any more of the HTML, the best I can do is the following XPath for you to try:
//a[contains(#href,'JSIT1')]
Related
I am having a problem with my XSLT, I am using SharePoint 2010 and I am building a custom front-end that will pull data from lists and render the data in a nice manner. I have figured out how to use XSLT with HTML to render a SharePoint list, I wasn't able to add an image of my news feeds because my rep is too low but I will get it up!
Now here is where my problem starts:
I am using jQuery toggle to show/hide the body paragraph of this news feed. The Continue Reading button is where my issue is, every time I click on the "Continue Reading" button in the lower right of each news post, it show/hides all the news items, not just the one I click on.
I have tried using Bootstrap collapse and now I am using jQuery Toggle() however I run into the same issue! Take a look at my XSLT code snippet to display thee body paragraph and the corresponding jQuery code snippet that actives the show/hide toggle:
XSLT:
<tr class="spacer">
<td valign="top" class="td-newscontent">
<div class="news content">
<!-- start excerpt -->
<xsl:value-of select="#BodyExcerpt" disable-output-escaping="yes" />
<div class="moving">
<xsl:value-of select="#Body" disable-output-escaping="yes" />
</div>
<!-- end news excerpt -->
<!-- start continue reading link -->
<xsl:text disable-output-escaping="yes"><![CDATA[<br class="continue-br" />]]></xsl:text>
<a class="butt pull-right continue-right">Continue Reading</a><br /><br />
<!-- end continue reading link -->
</div>
</td>
</tr>
Javascript (jQuery)
$(".moving").hide();
$(".butt").click(function() {
$(".moving").toggle("slow", function() {
});
});
.moving is the actual #body being shown/hidden
.butt is the "continue reading" button (I know butt was a bad name to use)
I have read a few things on the net about "this" but I am not sure how to use it.
First time posting so I couldn't post any images, but when you click on "continue reading" all the body news articles expand then you click it again and all the body news items contract, what I would like it to do is open just the one I am clicking on!
I have a lot going on, everything is housed in SharePoint, using HTML5, Css3, jQuery and XSLT. I started by using IDs but I switched to classes, not sure if that was a good idea but it functions, but not as intended.
Any help would be appreciative, I have been researching this issue for almost 2 weeks so I finally decided to ask some experts :) (Feel free to ask any questions or ask for more information, I will answer with everything I got!)
You are close, so well done for getting this far! Your problem lies in your JavaScript. If you look at the rendered code using your browser's developer tools (F12), you will find that all of the different body texts have the same class (moving) and all of the buttons have the same JavaScript onclick, which is to toggle everything of class .moving.
Thus the solution you are looking for is to match each button with its respective body text. There are two main ways you can do this.
You can give each text div and each button a unique ID by assigning it to some unique feature of the list item (SharePoint list items already have a unique identifier as the field ID). Using xsl:value-of within HTML attributes would violate XML rules, so you can use something called an Attribute Value Template, which is the bit in the curly braces:
<div id="newstext_{#ID}">
<xsl:value-of select="#Body" disable-output-escaping="yes" />
</div>
<!-- etc... -->
<a onclick="$('#newstext_{#ID}').toggle('slow', function() {});">Continue reading</a>
Modify just the JavaScript to target the parent of the button. The following code selects the parent DOM element of the button, which should be the div of class .news, then finds the child of class .moving, then applying your toggle:
$(".butt").click(function() {
$(this).parent().find(".moving").toggle("slow", function() {
});
});
The second method is easier but can get complicated if you end up running a lot of JavaScript. It is easier (and more efficient) to select elements by ID, so personally I think the extra effort is worth it. I haven't tested this code so let me know if it doesn't work. On some of your other points:
no, butt is not a good name for a class - remember, you can use element types in your jQuery selectors, so there is no need to duplicate the type as the class. For example, $('a') selects all the anchor tags on the page.
IDs should be used when elements need to be uniquely identified (e.g. for scripts), classes when you are grouping elements together (e.g. for styles).
I use Composite C1 CMS, but the custom TinyMCE in it is so crazy. Simple issue: we'd like to use Font Awesome icons. Source code editing is OK.
If we add the following:
<i class="fa fa-bus"></i>
This is removed. OK then, add a space:
<i class="fa fa-bus"> </i>
i is converted to em.
If I change valid_elements in config in the file visualeditor.js, nothing happens, still the same problem.
Are there any solution for this issue? Anyway it would be nice to add a button to the toolbar 'add icon'.
TinyMCE will remove empty elements by default, so you add a between your tags to tell the TinyMCE it's not empty. Also <i> used to be Italic in older versions of HTML so it's trying to convert an old italic tag into a preferred <em> Emphasis tag. Really though, you can use any tag with Font Awesome so to fix this issue, just change your <i> to a <span>:
<span class="fa fa-bus"> </span>
The accepted answer uses , but this will create a gap next to your icon causing it to be slightly offset. A better alternative is to use a comment:
<i class="fa fa-bus"><!-- icon --></i>
Now TinyMCE won't cleanup the "empty" element and you won't have a gap, but it will still convert your <i> to <em>. To prevent this, add the following to your TinyMCE init:
tinymce.init({
// ...
extended_valid_elements: 'i[class]'
});
TinyMCE Icon Fonts Plugin
The icon font dilemma has been a problem for years, so I finally wrote a plugin to solve it with minimal effort. The plugin:
Prevents TinyMCE from converting icons into elements
Prevents TinyMCE from removing empty icons
Makes icons selectable so you can copy/paste/delete them easier
Let's you configure the CSS selector used to identify icons font elements
If you don't want to use the plugin, feel free to dive into the source to see exactly what's going on under the hood.
Cheers!
I know it's an old question but I want to add my two cents here.
As we all know, TinyMce strips out <i></i> so we have to find a way to bypass this problem.
A fast way I use in such cases is to replace <i></i> with <span></span> as Howdy_McGee mentioned before me.
So, to summarize, in your example instead of using:
<i class="fa fa-bus"></i>
you can just use:
<span class="fa fa-bus"> </span>.
Cany anybody tell me how to render the following structure in
typo3 without developing a new extension.
<div class="sidebar-details">
<div class="sidebar-details-title">
<h4><span>MY TITLE</span></h4>
</div>
<div class="sidebar-details-body">
<p>
TEXT
</p>
</div>
</div>
What would be the best/recommended way to achieve this ?
Start using gridelements.
Gives you exactly what you want.
http://typo3.org/extensions/repository/view/gridelements
You can activate the RTE html mode and put it in its source or make use of HTML element, but that's depending on your needs.
If you want to keep RTE functions for editing the text what I mentioned first is the recommended way. Have done it several times myself.
If you are using Template mapping using Templavoila so, you can create FCE(Flexible content element) for it and you can map this part.
If you are using fluid template mapping so, you can create gridelement for it. and map all part.
I'm using the Bootstrap-wysihtml5 jquery plugin (https://github.com/jhollingworth/bootstrap-wysihtml5/) to convert textareas to WYSIWYG. I would like to be able to activate and deactivate the editor by clicking on 2 buttons, so far i can show the editor, please will you let me know how i can deactivate the editor and leave just the textarea and its value. My code is as follows:-
HTML
<textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>
<input type="button" id="button1" value="Show Editor">
<input type="button" id="button2" value="Hide Editor">
Script
$("#button1").click(function(){
$('textarea').wysihtml5();
});
$("#button2").click(function(){
// this is where i'm stuck
});
Thank you
A few lines of custom JS code. I think they can help you.
var content = $('#content');
var contentPar = content.parent()
contentPar.find('.wysihtml5-toolbar').remove()
contentPar.find('iframe').remove()
contentPar.find('input[name*="wysihtml5"]').remove()
content.show()
I had the same problem trying to disable/hide the toolbar and editor and had luck with the following commands (to disable the editor). I'm using version wysihtml5-0.3.0_rc2.js)
$('#editorId').data('wysihtml5').editor.composer.disable();
$('#editorId').data('wysihtml5').editor.composer.enable();
or (to hide the editor)
$('#editorId').data('wysihtml5').editor.composer.hide();
$('#editorId').data('wysihtml5').editor.composer.show();
To do the same to the toolbar you do the following to hide/show (can't find a wat to disable the toolbar):
$('#editorId').data('wysihtml5').editor.toolbar.hide();
$('#editorId').data('wysihtml5').editor.toolbar.show();
I was wondering if anyone has seen this issue before.
I have two button on a webpage. When I navigate away from the page and hit the back button to return the value of one button is placed in the value of the other.
E.g
<input class="SmallData" type="submit" id="logButton" value="Log In" tabindex="93"></input>
<input class="btn" type="submit" id="acBtn" value="Detailed Quote"></input>
When I come back to the page Detailed Quote replaces Log In e.g.
<input class="SmallData" type="submit" id="logButton" value="Detailed Quote" tabindex="93"></input>
There is no JavaScript causing this to happen. I look at the source everything looks fine but I inspect the DOM I can see that the there is a different value.
Is there something about how web kit handles the dom that it gets corrupted when the back button is used?
Thanks,
Try giving each input element a name="some_unique_name" attribute -- see if that helps Safari differentiate.
Mght it be because of having two submit buttons...?
Just my "random" suggestion though... :)
Check if the same thing happens in Chrome (if you have access to a Windows box) to see if it's a WebKit issue or Safari itself.