I have next table in my template:
<table ...>
<tr mc:repeatable mc:hideable>
<td mc:edit="mc-news-item-image"><img .../></td>
<td mc:edit="mc-news-item-h3"><h3>Lorem ipsum.</h3></td>
<td mc:edit="mc-news-item-date"><span>22.10.13</span></td>
</tr>
</table>
In edit campaign mode if I try to dublicate a row I get copy of it but can't edit any block in template. Any help would be much appreciated!
It appears that Mailchimp doesn't allow the hideable and repeatable tags to be on the same table/div.
So you are going to have to use one or the other.
Related
Since the align attribute is considered obselete I am cleaning up code to remove it and replace with a CSS class. I'm trying to determine if there is a way to do this using find and replace (or something else) in VS Code.
As an example, I might have some html that looks like this:
<table>
<tr>
<td align="left" class="someclass" id="mainTitleCell" title="Title1">Title1</td>
<td align="center" title="Title2">Title2</td>
<td class="someclass" align="right" title="Title3">Title3</td> <!-- attributes are not always in the same order -->
</tr>
<tr>
<td align="left">Title</td>
<td align="center">Title</td>
<td align="right">Title</td>
</tr>
</table>
which I would like to change to
<table>
<tr>
<td class="left someclass" id="mainTitleCell" title="Title1">Title1</td>
<td class="center" title="Title2">Title2</td>
<td class="right someclass" title="Title3">Title3</td>
</tr>
<tr>
<td class="left">Content</td>
<td class="center">Content</td>
<td class="right">Content</td>
</tr>
</table>
Basically removing the align attribute and either adding a class attribute with a specific value OR adding a specific value to an existing class attribute. Is there a way to do this with the Edit...Replace option in VS Code? I know I can find based on a regex but not sure how I would go about the replace since this becomes
Find the align tag
Remove it
Find a class attribute in the <td> or <th> tag and add the appropriate class
If there is no class attribute, add one with the appropriate class.
Obviously step #1 & 2 are easy, it's #3 & 4 that I'm not sure of. I'd be totally happy with having to run 3 separate find and replace commands (one for left, center and right).
Do I have any options here (I am open to extensions)?
UPDATE:
#Mark had the right answer and I was able to chain together several find and replace commands using the Replace Rules extension. With that I can open a file, run a single keystroke to find and replace everything and clean up the extra spaces in the class attribute.
Try this:
Find: align="(.*?)"(.*?) class="(.*?)"|class="(.*?)"(.*?) align="(.*?)"|align="(.*?)"
Replace: class="$7$1$6 $3$4"$2$5
See regex101 demo.
I'm a little surprised this works as well as it does (I included a couple of other test cases you didn't). The only issue (thus far...) is that it can result in one stray space, as in:
<td class="left ">Title</td> // only happens when there is no class attribute
as you can see in the demo page. You could then search for " and replace with just ". It could be handled by a conditional replacement but vscode find/replace doesn't allow those.
To some degree attributes will be re-ordered so that the class attribute is first, but not always - you didn't mention that as a concern - any attribute that occurs before either the first class or align attribute will not be moved. Otherwise, attributes like id or title if they are between class<->attribute (in any order) will be put last.
I am creating a custom MailChimp template but having issues when using the mc:repeatable element. I have it on a wrapped around a block of code and in the editor when creating a campaign, it works fine, I can spawn a new version of the parent block and move it around in the template, but when I preview, or send the email, the child block that was spawned from the parent sits below it's parent and not where I have placed it following spawning it from the parent block... Something seems to be wrong? (Heavily simplified) Code example below... Anyone any ideas on the fix???
<!-- BLOCK A -->
<div style="width:100%" mc:repeatable="CONTENTBLOCK_A">
<p>This is block A</p>
</div>
<!-- end of BLOCK A -->
<!-- BLOCK B -->
<div style="width:100%" mc:repeatable="CONTENTBLOCK_B">
<p>This is block B</p>
</div>
<!-- end of BLOCK B -->
So, when creating a new campaign, if I duplicate BLOCK A and position the duplicated BLOCK A below BLOCK B - in the preview within the campaign editor it looks fine, but when I click to view it into PREVIEW MODE, or send a PREVIEW EMAIL - the duplicated BLOCK A sits above BLOCK B and below its original spawned parent BLOCK A element...
Any ideas? Are the HTML COMMENTS (e.g. < !-- --> ) The issue perhaps?
Very late, but I was able to find success using this:
<table mc:repeatable="content" mc:variant="variant_1">
<tr>
<td mc:edit="section_1">
Variant 1 Content
</td>
</tr>
</table>
<table mc:repeatable="content" mc:variant="variant_2">
<tr>
<td mc:edit="section_2">
Variant 2 Content
</td>
</tr>
</table>
<table mc:repeatable="content" mc:variant="variant_3">
<tr>
<td mc:edit="section_3">
Variant 3 Content
</td>
</tr>
</table>
More in depth explanation can be found here: Create Editable Content Areas with MailChimp’s Template Language
Basically, in English I want to tell Selenium "look for the content ttc202 in column one, of a multi-row, multicolumn table, then mouseOver on the Edit link"
HTML is as follows:
<tr id="86" class="ui-widget-content jqgrow ui-row-ltr ui-state-highlight" tabindex="0" role="row" aria-selected="true">
<td aria-describedby="jqLst_Short Name" style="text-align:left;" role="gridcell">
ttc202
</td>
<td aria-describedby="jqLst_Long Name" style="text-align:left;" role="gridcell">
Testing Training Company 202
</td>
<td aria-describedby="jqLst_Actions" title="" style="text-align:center;" role="gridcell">
<a class="act avw" title="View this Organisation" href="company/view?lcId=86"></a>
<a class="act aed" title="Edit this Organisation" href="company/edit?lcId=86"></a>
</td>
</tr>
I have tried this:
//td[contains(text(),'ttc202')]/following-sibling::td[contains(a/title(),'Edit this Organisation')]/a
All help appreciated. I assume I am missing something to skip over the first column, but can't imagine what will enable me to do that...
Progress:
I have found the following as an alternative which should get to the correct cell, but I am not able to workout how to target the title in the link code:
//td[normalize-space() ="ttc202"])[1]/following-sibling::td[2]/a[. = 'Edit']
I think this is progress just not sufficient to get me to the finish line!
After much investigation I found the following answer, perhaps this might help others who come across this question:
//tr[contains(td[1], "ttc202")]/td[3]/a[#title='Edit this Organisation']
The trick was realising which cell the information was in (represented by the square brackets).
---Jump down to my edit with a simplistic example---
I have searched Ad Nauseum, and spent hours getting this close, but still not solving my automation problem.
Here's the thing I convert the local paper from the print edition to the online edition through PDF's, the content gets pushed to the website and is not live, until I go in and edit some settings, a lot of these are redundant. so if I can get past this one point I'm golden and can shave literally hours off of the time it takes to do this work.
The paper has twenty or thirty writers, and the one_off_byline can vary a bit here is some examples.
id=id_one_off_byline value="Michael Reid" however it may also look like the these next two or some variation thereoff even.
id=id_one_off_byline value="By Michael Reid"
id=id_one_off_byline value="By Michael Reid - Your Daily Paper"
I have used storeTextPresent to find Michael on the page. however the problem is there is another select value box on the page that contains every writers name in a selection box, which is what I'm actually trying to populate. So here is what I have
<tr>
<td>storeTextPresent</td>
<td>Jeff</td>
<td>IsTextAppears</td>
</tr>
<tr>
<td>gotoIf</td>
<td>${isTextAppears}</td>
<td>Jeff</td>
</tr>
<tr>
<td>storeTextPresent</td>
<td>Graham</td>
<td>IsTextAppears</td>
</tr>
<tr>
<td>gotoIf</td>
<td>${isTextAppears}</td>
<td>Graham</td>
</tr>
<tr>
<td>label</td>
<td>Jeff</td>
</tr>
<tr>
<td>label</td>
<td>Graham</td>
</tr>
Another way to phrase this I hope___
Form Field 1 (ignore syntax, I'm just setting up an example here) the id= is the important part in the two form fields.
<select name="select" id="pick_animal" value="">
< option="the fast cat" id="1">
< option="the fast dog" id="2">
</select>
Form Field 2
<input type="text" id="some_animal" value="the fast cat from dover">
I need to detect that id="some_animal" contains cat
so I can perform an action on the correct option in field 1.
I can do the second part just fine, I just can't detect "cat" in only the input with id "some_animal"
storeTextPresent just looks for cat to exist anywhere on the page. ugh!!
<tr>
<td>storeTextPresent</td>
<td>Jeff</td>
<td>IsTextAppears</td>
</tr>
<tr>
<td>gotoIf</td>
<td>${isTextAppears}==Jeff</td>
<td>Jeff</td>
</tr>
<tr>
<td>goto</td>
<td>END</td>
<td></td>
</tr>
<tr>
<td>label</td>
<td>Jeff</td>
<td></td>
</tr>
<tr>
<td>echo</td>
<td>something</td>
<td></td>
</tr>
<tr>
<td>label</td>
<td>END</td>
<td></td>
</tr>
Try like this.
I've been messing with this for far too long, and managed to get IE8 working, but IE7 has me stumped.
I've got a table, and for each column, I am trying to extract a number of divs. I am only extracting divs which match specific selectors, not all divs in the column.
My original jquery selector was
jQuery('div.a1, div.a3, div.a4, div.a7','table#a'+tableId+' td:nth-child('+columnNum+')').each(function(){
alert(jQuery(this).attr('id'));
});
This worked great in FF, but didn't trigger the .each function at all in IE.
After messing around for a bit, I got to
jQuery('td:nth-child('+columnNum+') > div.a1, td:nth-child('+columnNum+') > div.a3, td:nth-child('+columnNum+') > div.a4,td:nth-child('+columnNum+') > div.a7', table#a+'tableId).each(function(){
alert(jQuery(this.attr('id'));
});
Not so nice, but works in IE8.
I had tried all sorts of combinations using .eq(+'columnNum+') but nothing else was working.
Now I go and test in IE7, and again the .each isn't being triggered.
What is the nicest way (and cross-browser compatible) to work with this sort of .each element?
--------------addition--------------
After further testing and playing around with suggestions from DrJ and bdukes, I've found that the table#'+tableId breaks the function in both IE7&8.
I've gone back to my original code
jQuery('div.a1, div.a3, div.a4, div.a7','table#a'+tableId+' td:nth-child('+columnNum+')').each(function(){
alert(jQuery(this).attr('id'));
});
as that seems to me the most efficient.
If I remove 'table#a'+tableId, i get the correct response in all browsers, except that it is adding up the results from all tables, and I need to be able to get only the results from one table at a time.
I have also tried 'table#a'+tableId+'>td:nth-child('+columnNum+')').each, but that doesn't work either.
The first function i've used works perfectly in firefox.
----------------the html being selected---------------------------
The tables are being created dynamically in javascript so I can't really copy and past it, but here is what the output looks like. It ends up looking kinda like a gantt chart on a table.
<table id="a1">
<tr>
<th colspan="5">
Group Name
</th>
</tr>
<tr class="rowId1" >
<td>
<div class="a1" id="a43" style="margin-left:13px; width:60px" ></div>
</td>
<td>
</td>
<td>
<div class="a3" id="a93" style="margin-left:4px; width: 80px" ></div>
<div class="a2" id="a94" style="margin-left:4px; width: 30px" ></div>
</td>
<td>
<div class="a1" id="a24" style="margin-left: 15px; width: 65px;" ></div>
</td>
<td>
</td>
</tr>
</tr>
<tr class="rowId1" >
<td>
<div class="a7" id="a24" style="margin-left:10px; width:60px" ></div>
</td>
<td>
<div class="a2" id="a15" style="margin-left:14px; width: 22px" ></div>
</td>
<td>
;
<div class="a2" id="a105" style="margin-left: 8px; width: 50px" ></div>
</td>
<td>
</td>
<td>
<div class="a4" id="a102" style="margin-left: 5px; width: 45px;" ></div>
</td>
</tr>
</table>
It turns out this was an issue with IE failing when two different elements have the same ID. Apparently this breaks the .each function.
I had two tables
table.notes#a1 & table.inputs#a1
The .each function should have gone through each table but instead found neither.
jQuery also wouldn't run in ie with
jQuery('div.a1, div.a3, div.a4, div.a7','table.inputs#a'+tableId+' td:nth-child('+columnNum+')').each(function(){
alert(jQuery(this).attr('id'));
});
which it should have done, as I am them pointing directly to a specific table even if the id is not unique.
I'm using id's retrieved from the database for the id, and IE doesn't like id's that start with numbers, so I just added an 'a' to the beginning of the id.
However, it apparently doesn't like that either, so now I'm adding the first letter of the class and then the '1' or whatever the id number is.
This solves the issue.