I have embedded a widget into my site provided by a third party site, this widget displays an input box that auto-suggests text to the user on input.
It's the same as the Ask Your Question search on this page.
I embed the widget by including a widget.js file in my document <head>, and calling it in my html with;
<div id="widget-5032"></div>
When I inspect the HTML of the widget I see the following (sample item list);
<div>
<ul id="search-query-5032_list">
<li data-question="Alaska">Alaska</li>
<li data-question="Hawaii">Hawaii</li>
<li data-question="etc.">etc.</li>
</ul>
</div>
The auto-suggestions are being served from the third party website, when one is clicked, the input is populated with the suggested text and the page automatically redirects to the external website (no need to click the search button). I have no control over how the widget functions.
I'm trying to capture the value of the selected text but I'm not sure how to?
The reason I want to do this is so I can send it to Google Tag Manager using dataLayer.push({})
I've tried this but it doesn't work;
$('#search-query-5032_list li').on('click', function() {
alert($(this).text());
});
Any advice is appreciated.
I had a quick look at the code on the page and I think you can use this piece of code on your page. The Try/Catch is important as the hidden input is only created when an item is selected.
springSpace.la.widget_5032_inst.search.autocomplete.input.parentNode.addEventListener('click', function(){
try {
alert(searchform_5032.form.querySelector('input[name=faqid]').value);
}
catch(err) {
console.log("empty");
}
});
Where I have the "alert" message, you would replace with your GTM dataLayer push to get that information into GTM/GA.
Can you try this:
$('#search-query-5032_list').on('click', 'li', function(){
alert($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
<ul id="search-query-5032_list">
<li data-question="Alaska">Alaska</li>
<li data-question="Hawaii">Hawaii</li>
<li data-question="etc.">etc.</li>
</ul>
</div>
Related
I am trying to use applescript to add a file to a website's input field.
This is my code so far:
set ClickInput to "var myInput = document.getElementByClassName('jsx-1828163283 upload-btn-input')[0]; myInput.dispatchEvent(new MouseEvent('mousedown')); myInput.dispatchEvent(new MouseEvent('mouseup'));"
set ClickInput2 to "var myInput = document.getElementsByName('upload-btn')[0]; myInput.dispatchEvent(new MouseEvent('mousedown')); myInput.dispatchEvent(new MouseEvent('mouseup'));"
activate application "Safari"
tell application "Safari"
open location "https://www.example.com/upload"
set theTab to tab 1 of window 1
-- wait until page loads
repeat while document 1's source = ""
delay 0.5
end repeat
-- do JavaScript ClickInput in theTab
do JavaScript ClickInput2 in theTab
delay(5)
close theTab
end tell
Here is the HTML around the input element I want to select:
<div class="jsx-3758851661 upload">
<div class="jsx-1828163283 upload-btn">
<div class="jsx-3758851661 card stage-1">
<div class="jsx-3758851661 text-main">Select video to upload</div>
<div class="jsx-3758851661 text-sub text-sub-margin">Or drag and drop a file</div>
<br class="jsx-3758851661">
<ul class="jsx-3758851661 text-sub">
<li class="jsx-3758851661">MP4 or WebM</li>
<li class="jsx-3758851661">720x1280 resolution or higher</li>
<li class="jsx-3758851661">Up to 60 seconds</li>
</ul>
</div>
<input type="file" name="upload-btn" accept="video/mp4,video/x-m4v,video/*" class="jsx-1828163283 upload-btn-input">
</div>
</div>
The way the site works is you click the outermost div <div class="jsx-3758851661 upload"> and the safari file finder pops up and you select what file you want.
I have tried clicking the divs outside of the input tag and I have tried clicking the input tag by itself.
I tried to do this by selecting the classnames of the divs and the input tag
I also tried to do this by selecting the input tag by its name and clicking on that
None of these worked.
Im not sure if it clicked but none of these made the file finder pop up
Do you guys have any ideas? Let me know if you would like some clarification. thanks!
figured out set ClickInput to "document.getElementsByName('upload-btn')[0].click();" works !
getElementsByName isn’t a function that I’m aware exists as standard, so you probably want to use getElementsByClassName or querySelector.
The input element has two class names, of which I’m going to choose ”upload-btn-input” in my example below:
tell application id "com.apple.safari"
open location "https://www.example.com/upload"
tell document 1
repeat while the source = ""
delay 0.5
end repeat
do javascript "document.querySelector('.upload-btn-input').click();"
end tell
end tell
If you can provide the actual URL of the page in question, this would allow me to refine this answer to ensure it’s appropriate for what you’re trying to do.
what I am trying to do is have a specific div from another page being loaded into a div when you click on a dropdown menu.
Here is my dropdown menu code and the div #location-info is where I want the info pulled into.
<div class="nav-location">
<ul>
<li class="locationhead">Select Locations
<ul id="location-options">
<li>Atikokan</li>
<li>Dryden</li>
<li>Emo</li>
<li>Fort Frances</li>
<li>Rainy River</li>
<li>Red Lake</li>
<li>Sioux Lookout</li>
<li>Thunder Bay</li>
</ul>
</li>
</ul>
</div>
<div id="location-info"></div>
Now here is the script I have in the footer of my site to try to pull in the content from the a href of each of the items in that dropdown...
$('#location-options').on('click', 'a', function (event) {
$el = $(event.target);
$.ajax({
type: 'GET',
url: $el.attr('href'),
success: function (html) {
$('#location-info').html(html);
}
});
return false;
});
I would think that this would pull in the info from the div location-info from each of the other pages in the dropdown when you click so the info changes and you get the location info for example, this is the page at modocom.ca/gillons/emo which I want to pull in the info from the location-div
<div id="location-info">
<div class="sevencol">
<h4>Gillons | Emo</h4><p>74 Front St<br />Emo, ON P0W 1E0</p>
<p>Phone: (807) 482-2146<br />Fax: (807) 482-2757</p>
</div>
<div class="fivecol last">
<h4>Office Hours</h4><p>Monday-Friday<br />8:30am - 5:00pm</p>
</div>
</div>
So that HTML above is what I would be trying to pull into the location-info div when someone clicks on Emo and then so on it would change when you select different location from the Dropdown.
I am using Wordpress but this stuff is all hardcoded in.
Struggling with this one hopefully someone can lend a helping hand, can seem to wrap my head around it.
I think that your problem is that in line $('#location-info').html(html); you're pulling entire site content from selected link, and stuffing it into your <div>.
Instead you should take only <div id="location-info"> from html variable.
Also normal behaviour of click is not being prevented here - it simply follows the link. Also $el.attr('href') will not return a string with link, but an empty object, check for yourself.
EDIT:
I was able to bind the 'click' event to each link, so instead of following the link, it simply displays href in your div, and then makes ajax request.
This is my JSFiddle example:
http://jsfiddle.net/mUThR/51/
Ajax request fails, but in console i can see that it's due to Proxy 407 error, access denied; but it should work from your machine. If it does, you still need to extract proper div from returned html.
Cheers.
I have a link (A link), which dynamically creates some html content into the page by a js file placed in the head content. This works well.
<head>
<script src="my.js">
</head>
<body>
<div>
<a href="A link">
</div>
</body>
Than clicked the A link, and this is created:
<div>
<a href="B link">
</div>
The newly created html content also contains a link (B link), which should use the same js file, as used before, but it seems, that the B link cannot see it, however the js file is still in the header content.
Works only if I put the js file in a script tag to the end of the dynamically created html content generated by A link, like this.
<div>
<a href="B link">
<script src="my.js">
</div>
But this means I load this js file twice. What am I missing here?
Thanks.
If you want the newly created element to perform some action then you should use this technique using jquery.
$(document).on('click', '.linkclass', function()
{
// Perform your action here.
alert('I was clicked');
});
live of Jquery is now obselete and is better to use on. In this way your all newly created element or already created elements having class as .linkclass will perform alert(); action. Hope it helps.
I am trying to update or replace a list and keep the styles that were present before the update. Reading form the jQuerymoble website it says that the refresh() method call only works on new nodes. I am using the .html call to update the list and not .append. I am not sure if that is where I am having problems but the refresh call is not working in any case. My new list does not have the correct styles. I am using .html because many nodes are removed/added at the same time so append would not really work in my case.
Sample Code:
<script>
$(document).ready(function(){
$("#quicksearch").keyup(function() {
$.getJSON(search,function(data){
newlistcode= data //formatted correctly for a new list
$(“ul”).html(newlistcode);
$(“ul”).listview(‘refresh’);
});
});
});
</script>
<div data-demo-html="true">
<ul data-role="listview" class="list" id="listview1">
<li>test</li>
</ul>
</div>
Change
$(“#listview1”).html(newlistcode);
$(“listview1”).listview(‘refresh’);
to
$(“#listview1”).append(newlistcode);
$(“#listview1”).listview(‘refresh’);
Where
newlistcode = '<li><a>content</a></li>';
<ul class="contact">
<li class="first">Carnegie Mellon University</li>
<li>5000 Forbes Avenue, Pittsburgh, PA 15213</li>
</ul>
=>
<ul class="contact">
<li class="first">Carnegie Mellon University</li>
<li>[address]5000 Forbes Avenue, Pittsburgh, PA 15213[/address]</li>
</ul>
Imagine I open a web page in a browser and find some info useful in the page. So I'd like to select the useful info (e.g., the address of Carnegie Mellon University) from the page and click a TO-BE-IMPLEMENTED "inject tag" button. As a result, the source code of the page will be injected with a pair of tags (e.g., [address][/address]) surrounding the user selected text. Then I will save the injected source code for further processing.
Can anyone help suggest a way of implementing such a function? I'm really new to Javascript stuff so please be a little detailed with your suggestion.
Search in google, I find an example where you can get the selected text: http://mark.koli.ch/2009/09/use-javascript-and-jquery-to-get-user-selected-text.html.
With this, you only need to change the alert action to insert the tags you want. To do this with jquery, use the following code:
$(selected).text("[tag]" + $(selected).text() + "[/tag]");
where selected must be the variable that represents your selected text.