I have an ajax "load more/show less" button on my blog. The default button text is "More Posts" with a down arrow icon.
More Posts button
When the button is clicked, the text changes to "Less Posts", but I can't figure out how to change the icon to an up icon.
Less Posts button
In the code below, I need to change the value of data-icon="7" to data-icon="6".
<a class="et_pb_button et_pb_custom_button_icon el-pagination-button el-button el-show-less" href="https://wbj1.flywheelsites.com/blog/?el_dbe_page" data-icon="7">Less Posts</a>
I tried this jQuery snippet without any luck, but I'm not very skilled in javascript or jQuery so it could be wrong:
document.getElementByClassName("el-show-less").setAttribute("data-icon"), "6");
If you want to change the value of data-icon using pure Javascript you can handle that like this
let element = document.querySelector('.el-show-less');
element.dataset.icon = 7;
Using jQuery you can perform that like this
let element = $('.el-show-less');
element.data('icon', 4);
Related
I've been trying for some time now to get this to work. I don't have much experience with jquery or javascript. I want to set a default option that is selected from the drop down options when the button is pressed. I hope this will also prevent the alert(not sure if that's correct) from appearing. I have add the following code to the "code injection" part of squarespace, which seems to work fine. (Edited, I have removed the code as recommend)
I'm using the Brine template. Here's a link to the website https://www.metastudio35.com/private-photography-services/event-collection the password is "Google360".
<squarespace:script src="plugin.js" combo="true"?>
<squarespace:script src="site.js" combo="true"?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
I then added the code below in the page I needed to redirect the button. Which also works, but without the "$("#Additional Photos").val("0");" and "$( ".sqs-widgets-confirmation-content clear" ).dialog( "close" )" lines.
<script>
$(document).ready(function(){
$("#Additional Photos").val("0");
$( ".sqs-widgets-confirmation-content clear" ).dialog( "close" )
$(".sqs-add-to-cart-button").click(function(){
window.location = '/booking/';
});
});
</script>
This is a screenshot of the dialog box I want to remove/disable.
dialog box pop up screenshot
If someone could point me in the right direction or tell me what I'm doing wrong it would be greatly apprenticed.
Thank you for your help.
I checked your website and it seems like jQuery is not used by your template, and instead of including jQuery just for this simple function, I've written the below code in vanilla JS instead.
function setValue() {
var dropdown = document.querySelectorAll('[data-variant-option-name="Additional Photos"]')[0];
dropdown.value = '0';
Y.one('#'+dropdown.id).simulate('change');
}
window.onload = setValue;
If you're interested in figuring out why your code wasn't working, here's the explanation :
$('#Additional Photos').val("0")
This line of code is setting the element that has an ID of "Additional Photos" with a value of "0".
Your "Additional Photos" select box does not have an ID of "Additional Photos", instead - it has a randomly generated ID that re-generates each time the page is refreshed.
So the reason that your code isn't working is because you're simply targeting the wrong element :)
var dropdown = document.querySelectorAll('[data-variant-option-name="Additional Photos"]')[0];
Due to the fact that the ID of the select box is not constant, we are targeting the select box by the 'data-variant-option-name' attribute instead. I figured out this constant attribute simply by inspecting the selectbox on the ChromDev tools.
dropdown.value = '0';
Y.one('#'+dropdown.id).simulate('change');
The other thing to consider is the fact that your template is using YUI to handle the select box. This means that we need to manually trigger the 'change' event in order for the UI to update. As you can see from the code above, the first line is setting the value of the select box, while the second is telling YUI to simulate the 'change' event, and thus - updating the UI.
Hope this helps !
This question already has answers here:
Button text toggle in jquery
(10 answers)
Closed 7 years ago.
So, I have the following jQuery code that slides a list up to replace another list when a button is clicked. The button's text is then changed to "dev languages" so that the user knows to click the button again to go back to the original list. When the user clicks the button again to go back to that original list how do I get the button to change back to it's original text?
$(document).ready(function() {
$(".projects").on("click", function(){
$(".devList").slideToggle();
$(".devButton").slideToggle();
$(".projects").text("Development Languages");
});
});
There are many ways to do this, the simplest of which is to use the .text() method to retrieve the current text of the button and test it:
var currentText = $(this).text();
if (currentText === "Development Languages")
$(this).text("Whatever the old label was");
else
$(this).text("Development Languages");
However, you may not want to have to hard-code the different labels within your JavaScript. So you could put it in the markup like this:
<button class="projects" data-alternate-label="Development Languages">Click me</button>
...and then have more generic JavaScript that checks the data- attribute to see what the alternate label is when clicked, storing the previous text for use after the next click:
var $this = $(this),
alternateLabel = $this.data("alternate-label");
$this.data("alternate-label", $this.text());
$this.text(alternateLabel);
That way you could have multiple buttons with associated lists on the same page and still only need the one click handler to manage them, as shown here: http://jsfiddle.net/c5584bgr/2/
You can check what the current text is and change it depending on the state:
if ($(".projects").text() === "Development Languages") {
$(".projects").text("New Text");
} else {
$(".projects").text("Development Languages");
}
I am trying to use jQuery to show section if a user selects a certain checkbox in a sharepoint form. I have had success doing this with a button and with a simple checkbox with one value to show all from this blog post http://akanoongo.blogspot.com/2008/04/how-to-hide-fields-in-sharepoint-list.html, but am struggling with if they select multiple values.
<script type="text/javascript" src="/SiteAssets/Libraries/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
$("nobr:contains('Desk Calendars')").parent('h3').parent('td').parent('tr').hide();
$("nobr:contains('Calendar Refills')").parent('h3').parent('td').parent('tr').hide();
$("nobr:contains('Spiral Bound')").parent('h3').parent('td').parent('tr').hide();
$("nobr:contains('Wall Calendars')").parent('h3').parent('td').parent('tr').hide();
$("nobr:contains('Misc. Calendars')").parent('h3').parent('td').parent('tr').hide();
$("nobr:contains('Franklin Covey')").parent('h3').parent('td').parent('tr').hide();
$("nobr:contains('Comments')").parent('h3').parent('td').parent('tr').hide();
$("nobr:contains('Retention Policy')").parent('h3').parent('td').parent('tr').hide();
});
</script>
It would appear the value needs to be an if statement for contains VALUE not a click function. I am not sure what to do with this though.
$("input[title$='ShowFields']").click(function()
Basically if they select Wall Calendars it should show jsut wall calendar but if they do Wall and desk, it should toggle them both.
Any guidance would be fantastic. Thank you!
EDIT: I change my answer based on your comment below
To do what you want I'll use the library I created that is called SharepointPlus (please load jQuery and SharepointPlus in your page). Then the JavaScript code would be something like:
// hide all the rows by default
$SP().formfields("Desk Calendars,Calendar Refills,Spiral Bound,Wall Calendars,Misc. Calendars,Franklin Covey,Comments,Retention Policy").row().hide();
// add a trigger for when you click a checkbox
$SP().formfields("Calendar Type").elem().on('click', function(event) {
// the value of the checkbox is found with the "title" attribute from the parent
// if it's checked, then we show the row, if it's not then we hide it
$SP().formfields($(this).parent().attr("title")).row().toggle(this.checked)
})
I have a big grid of values. At first, each values was a drop down. But it was very slow to load (+15 sec).
So I would like to use text in my grid (a regular table ) and use a dropdownlist on the double click of the text .
Is this possible ?
Also, is it possible to use a telerik drop down ?
Here's an example : A grid containing color (ex: blue, blue, red, yellow....).
When double click on the word, a dropdown will replace the selected text. The dropdown will contain all available color : blue, red, yellow. After that, when the value is selected, the drop down would disapear and the text will display the new value.
So far, I got this :
$(function () {
$('.colorGrid').dblclick(function () {
debugger;
$(this).html("<select class=\"resultMenu\" id=\"resultMenuID\" size=\"1\"></select>");
$(this).children("select").append('<option value=1>Black</option>');
$(this).children("select").append('<option value=2>Red</option>');
$(this).children("select").append('<option value=3>Blue</option>');
$(this).children("select").append('<option value=4>Yellow</option>');
});
$('#resultMenuID').change(function (event) {
debugger;
$(this).html("<td>test</td>");
});
});
I'm close to my goal. Now I need to put back the result of the selected in a td tag, and the select must disappear! The change select function is never call. Does anyone know why?
If it takes +15 seconds, then you definitely have to go for AJAX or hardcoding the dropdownvalues in javascript strings.
As told by MrOBrian, I can't provide you the code solely based on your one or two line problem. You have to upload your existing problem code to get a solution from here. However I can give you an idea.
Say this is your colour block
<div id="colour-block-list">
<div id="red-block" class="colour-block">
Red
</div>
</div>
You have to add an onclick handler.
$(".colour-block").click(function(){
//call your ajax or get values from hard coded javascript string
$(this).html("<select></select>");
$(this).children("select").append(list_of_options);
});
Here is functioning code on a form that displays a Tweet button -- the button's on a form that displays several images -- when the user clicks one of the images, it becomes the 'selected' image and the Tweet button is supposed to tweet the selected image's name and url:
<a id="tweetBtnId" href="https://twitter.com/share" class="twitter-share-button"
data-text="Check me out on OurWebSite!"
data-url=http://$ourSiteURL
data-via=http://$ourSiteURL data-size="medium" data-count="none">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];
if(!d.getElementById(id)){js=d.createElement(s); js.id=id;
js.src="//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js,fjs);}}
(document,"script", "twitter-wjs");</script>
I have an 'onclick()' handler for the div that displays the image. When the user clicks one of the images, its div's onclick() handler is called and sets that image to be the 'currentlySelectedImage' on the page -- and the onclick() handler then needs to update the Tweet button's 'data-text' attribute with the name of the just-selected image:
// This is part of the code of the 'onclick()' handler for
// the image being selected.
<script>
function handleImageOnClick()
{
var myDynamicTweetText = "name of currently-selected image goes here";
var elem = document.getElementById("tweetBtnId");
alert("The elem is: " + elem); // elem IS NULL !! Dagnabbit.
// this fails because 'elem' is null
elem.setAttribute("data-text", myDynamicTweetText);
// other onclick() code not shown for brevity......
}
</script>
I need to dynamically change the 'data-text' attribute's value in the Tweet button to be the name of the selected image. I added the javascript code above which fails-- the 'elem' obtained from the code here:
var elem = document.getElementById("tweetBtnId");
is null (I think) because of this line in the Twitter tweet button code above:
if(!d.getElementById(id)){js=d.createElement(s); js.id=id;
I'm not sure but it looks like the Twitter Tweet button default script overwrites any attempt
to add an 'id' attribute to the Tweet button.
You will see that I added the id="tweetBtnId" to the Tweet button above so I could get access to the Tweet button in my image-selection onclick() handler above, then set the 'data-text' to the name of the just-selected image.
I just doubt that Twitter's design goal for the Tweet button was "we're gonna dumb this sucker WAY down, we'll only let these animals choose ONE data-text value - every Tweet button has to have one hard-coded, "Once-on-the-page" data-text attribute - joke's on them if they try to dynamically change the Tweet button's data-text attribute."
I need to get this to work -- any ideas?
Just put it in a container with a known ID and traverse the document with it:
<div id="someIDiKnow">
<a id="tweetBtnId"...>...</a>
</div>
$("#someIDiKnow a").attr("data-text", "Replacement Text!");
Looks like it's going to be the kludgy hidden form/php variable approach for now -- I'll post back if I find a better work-around.
EDIT: the hidden-form/PHP variable solution has beaten the roadblock put up by Twitter's Tweet button -- I can now successfully, dynamically change the Tweet button text at will, anytime based on the user's client-side input. Per Domenic's astute observation that the question above is too long and has code in it, I'll skip posting the answer here, and I apologize for the length above.
You could use JQuery to update the attribute data-text by adding an onclick action on the image. If you wanted to include the text inside the actual image tag by adding your own attribute to the tag, that could be an easy work around to assembling the tweet text.
For example:
function updateTweetBtn(obj) {
$('#someIDiKnow a').attr('data-text', $(this).attr('tweet'));
}
<img src="/images/myimage.jpg" tweet="This is what I want to tweet" onclick="updateTweetBtn(this);" />
<img src="/images/myimage2.jpg" tweet="This is some other text I want to tweet" onclick="updateTweetBtn(this);" />
using in html
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
Tweet
I managed to change the 'data-text' with javascript
var a = "new text";
document.getElementsByClassName('twitter-share-button')[0].setAttribute("data-text", a);
also worked with document.getElementById('twitter') if you add id='twitter' to <a>