I have made a sortable list.
Based on the order of the sortable list i want to insert text into a textarea #notes.
is there anyway I can have text sorted based on the list so even if i change the order. the text in the textarea should change accordingly
eg
<ul>
<li>entry 1</li>
<li>entry 2</li>
</ul>
entry 1 = "this is line 1"
entry 2 = "this is line 2"
I am not sure if i have to use Ajax or something to have this done. since i want each list item to have predefinded text.
I am trying to learn Jquery and would really apprieciate any help.
any hints on how i can have this done.
Question
Where and how do i store these predefined values ?
How to get the text in the text area sorted ?
can someone please point me in the right directions
Maybe write a javascript function to refreshTextarea() that you will use initially to fill the textarea and every time the sorting changes it will "refresh" it by emptying and refilling depending on the sort order of the list.
ok, to associate values with your list items, give your ul an id and your li unique ids
<ul id="the-list">
<li id="item-1">entry 1</li>
...
</ul>
then for each list item, create a hidden input with an id that corresponds in some way
<input type="hidden" id="item-1-data" value="this is where you put info for the list item entry 1" />
Then with jquery you programmatically associate them by looping through your list items and refreshing your textarea after any sort is made.
$('#the-list li').each(function() {
//get the id of the list's data field
var li-data-id = $(this).attr("id") + '-data';
// get the actual data associated with this list item
var li-data = $(li-data-id).val();
// append next list's data in the textarea
$('#id-of-textarea').val($('#id-of-textarea').val() + "\n" + li-data)
}
A textarea is just a blob of text. You'd have to have some way of determining what constitutes a "sortable" line in there. Or regenerate the entire contents anytime the list is changed.
Related
I think I might just be over complicating things instead of keeping it simple.
My question is: I want to capture the title of a blog post into a prop variable, and the author who wrote it into another prop variable.
My thought would be to create a page load rule focusing only on the path of /blog. From there I would scrape the page looking for the class that defines it, and then pass it into my prop through DTM.
<div class="field field-name-title">
<h2>Online Education</h2>
<div class="field field-name-body">
<p>
<em> by Author Name</em>
</p>
</div>
</div>
I create a page rule pick my prop and set it as: div.field.field-name-title.innerText But when I set it, all I'm seeing being passed is the "div.field.field-name-title.innerText"
Am I tackling this in the wrong way?
The values you enter in a text field are literal, with the exception of %data_element% syntax, which signifies a reference to a Data Element (there are a couple of other built-in variable references, as well).
Point is, if you want to populate your Adobe Analytics variable from scraping page content, you need to create a Data Element that returns the desired value, and then reference the Data Element in the text field for the Adobe Analytics variable.
That aside, your selector is wrong. What you've done is some weird mix of css selector and javascript syntax.
Below is an example of what you can do, based on your posted HTML:
<div class="field field-name-title">
<h2>Online Education</h2>
<div class="field field-name-body">
<p>
<em> by Author Name</em>
</p>
</div>
</div>
Data Element: Article Title
First, create a Data Element to get the article title from the page, based on your html structure.
Go to Rules > Data Elements > Create New Data Element
Fill out the fields with the following:
Name: article_title
Type: CSS Selector
CSS Selector Chain: div.field-name-title h2
get the value of: text
[X] Scrub whitespace and linebreaks using cleanText
Then, click Save Changes
Data Element: Article Author
Next, create another Data Element to get the article author from the page, based on your html structure.
Go to Rules > Data Elements > Create New Data Element
Fill out the fields with the following:
Name: article_author
Type: CSS Selector
CSS Selector Chain: div.field-name-body em
get the value of: text
[X] Scrub whitespace and linebreaks using cleanText
Then, click Save Changes
Page Load Rule: Populate Variables
Finally, within the various form fields of your Page Load Rule, you can now reference your Data Elements with %data_element_name% syntax.
Tip: Once you start typing the Data Element name out (starting with % prefix), DTM will show an auto-complete dialog, listing Data Elements matched.
If you need to reference the Data Element within a javascript custom code box within the Page Load Rule, you can use the following syntax:
_satellite.getVar('data_element_name');
Where 'data_element_name' is the name of your Data Element.
Example:
s.prop1 = _satellite.getVar('article_title');
Note: Unlike the form field syntax, you should not wrap your Data Element's name with %
Inside a capybara test, I need to fill in a text field that doesn't have a unique id or class attribute.
The text field (the field called title in this case) can appear anywhere on the page. The only thing we know is that the text field is wrapped in a div and this div sits immediately after an h3 tag which has the content "Title"
<h3>Title</h3>
<div class="input-row clear">
<input id="ember5046" class="ember-view ember-text-field" type="text">
</div>
<h3>Work Location</h3>
<div class="input-row clear">
<input id="ember5048" class="ember-view ember-text-field" type="text">
</div>
How can I do it?
We are not allowed to use xpath (company policy)
We are not allowed to do index based selectors like all("input")[0]
I think it should be possible with the css adjacent siblings combinator selector. Something like:
h3[text=Title] + div
This gives you the next element matching the thing after the +. If you rather want everything that matches you could use the ~ operator instead. These siblings selector can only help you to find things after a certain node. Going backwards is not possible as far as I know.
In the following html code, One of the div is hidden and the other one is not.My question is
1.how to select any element with multiple class names with hidden attribute
2.how to get the inner html when the html is hidden or shown
I tried,
$('.middle-cont,.float-lft,.content-height').html()
$('.middle-cont,.float-lft,.content-height:hidden').html() //will this work
html
<div class="middle-cont float-lft content-height">
some html
</div>
<div class="middle-cont float-lft content-height" > //This div is hidden
some html123
</div>
no comma's, commas will select all elements with either of the classes, while removing the comma's will select the elements that has all the classes :
$('.middle-cont.float-lft.content-height').html()
wether or not it's hidden makes no difference for this.
FIDDLE
you don't need , to select element with multiple class....use html() to get the content.. (it doesn't matter if it is hidden or not)
$('.middle-cont.float-lft.content-height').html()
Comma using as OR operator, you dont need it here so:
$('.middle-cont.float-lft.content-height').html()
It's not matter that your element is hidden or not.
Try like this
var innerHtml = $(".middle-cont").filter(".float-lft").filter(".content-height").html();
alert(innerHtml);
Demo
I am using PHP Simple HTML DOM Parser and there is a section in the html page with the following source:
<div class="box-content padding-top-1 padding-bottom-1 font-size-3">
<ul>
<li>
linkdescription 1
</li>
<li>
linkdescription 2
</li>
</ul>
</div>
How can I now get the list of links with using the stacked class identifier?
Here's what I've currently tried:
List item $html->find('.box-content padding-top-1 padding-bottom-1 font-size-3'));
returns empty
List item $html->find('.box-content'));
returns other page elements in a box
List item $html->find('.box-content+padding-top-1+padding-bottom-1+font-size-3'));
never mind :(
For targeting an element with multiple classes, use dot (.) as the separator between classes. Spaces indicate a parent -> child relationship.
So, in your example, you would need:
List item $html->find('.box-content.padding-top-1.padding-bottom-1.font-size-3'));
Or you can try this:
List item $html->find('div[class=box-content padding-top-1 padding-bottom-1 font-size-3]');
I am using HTML4.01 Strict, CSS3 and the latest JQuery.
I have three identical lists in one page - one acts as a menu bar, the other two are smaller and appear on either side of the main page content.
I would like it so that when any single option in one list is selected, it also selects the same option in the other two lists.
'Selection' in this case means the application of the class "active_tab" [via .addClass("active_tab") ]
The list:
<ul id="lt-menu" class="shift_menu">
<li class="li_tab">Home</li>
<li class="li_tab">News</li>
<li class="li_tab">Info</li>
<li class="li_tab">Download</li>
<li class="li_tab">Contact</li>
<li class="li_tab">Shop</li>
</ul>
I have been attempting to use something along these lines -
$(".tab, .li_tab").click(function() {
$(".active_tab").removeClass("active_tab");
$("li".contains(this)).addClass("active_tab");
});
But with no luck so far.
I'm pretty new to JQuery, so any help at all would be much appreciated.
Il tried this with 3 copies of your list (I just change the ID), and it works:
$(".tab, .li_tab").click(function() {
//Disable current selection
$(".active_tab").removeClass("active_tab");
// We get the index of the <li> in the current list
// Each <li> has to be to the same index in the other lists
var index = $(this).index();
// We add the 'active_tab' class to all <li> with the same index
// Assume that all lists have the 'shift_menu' class, of modify the selector
$('.shift_menu').find('li:eq(' + index + ')').addClass("active_tab");
});
Hope it works for you...