Develop Reference

Can I trigger xe:namepicker via csjs?

On an xpage I have an editbox control and xe:namepicker nicely grouped beside each other with a Bootstrap add-on component.
However I would like to trigger the xe:namepicker when the cursor enters the editbox.
In the DOM I see that for the namepicker an anchor link is generated such as:
a class="glyphicon glyphicon-user xspPickerLink" href="javascript:;"
And I could trigger the click event via csjs
$("a.xspPickerLink").trigger('click');
But I happen to have multiple xe:namepicker-s on my xpage.
Does anyone have a clue how I can trigger a SPECIFIC xe:namepicker ?

You can work with wrapper elements:
<div id="namePicker1Wrapper">
<xe:namePicker id="namePicker1" pickerText="Select..."></xe:namePicker>
</div>
<div id="namePicker2Wrapper">
<xe:namePicker id="namePicker2" pickerText="Select..."></xe:namePicker>
</div>
Now you have the opportunity to select a SPECIFIC xe:namepicker:
$("#namePicker1Wrapper a.xspPickerLink").trigger('click');

Jquery: .click() not working

I have a link on my php file which when has an event listener attached to it and clicks another link on the same page.
<p>Upload the image you want on your cake:Upload </p>
<div id="openModal" class="modalDialog">
<div>X
<?php require 'image-upload.php'; ?>
</div>
</div>
<script>
$('#upload-button').on('click', function () {//This works fine
$('#upload-link')[0].click(); //This doesn't work.
});`
</script>
Now click event should click the upload-link and a modal should pop.However, nothing happens.What could be the reason and the solution?

Add jQuery to your HTML by putting
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
before your custom script.
Besides as it is now, your div will always show up. you should set up a dynamic way to hide/show it.
You can use jQuery hide() and show() methods on your elements like
$("#close").click(function(e){
$("#openModal").hide();
});
also your identifiers syntax should always be the same . All camelCase or all i-dont-know-how-this-case-is-called .

I don' know why it didn't work previously but when i made some changes to the upload button link.Everything worked and the modal pops up just fine.
<p>Upload the image you want on your cake:Upload </p>
I Just changed the href from # to javascript: void(0) and everything just worked fine.

This works for me. But, (FYI), id's should not contain hyphens.
NOTE: I am only using an inline HTML event handler on #openModal to show that its click event is being triggered, but you haven't added any actions to that link, so otherwise it would do nothing. DO NOT USE INLINE HTML EVENT HANDLERS IN PRACTICE.
$(function(){
$('#uploadButton').on('click', function () {
alert("Upload Button has been clicked");
$('#uploadLink').trigger("click");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>Upload the image you want on your cake:Upload </p>
I am the Open Modal link
<div id="openModal" class="modalDialog">
<div>I am the Close link
<?php require 'image-upload.php'; ?>
</div>
</div>

Need jquery to activate a click through by clicking on a different div

I was hoping someone could help...I'm new to Jquery ....all I want to achieve is a click through on a hyperlinked image but this occurs when a completely separate div on another part of the page is clicked on rather than the hyperlinked image I just mentioned. .......the hyperlinked image needs to be invisible also. In case anyone is wondering why I need this ....it's because I want my own custom button rather than the standard one that comes with a CMS that I'm using and it can't be changed....it's basically a work around the owners of the system suggest.
Here's what I thought would work
<style>
#my-custom-button{
margin: 0 auto;
width: 200px
}
#the-standard-button{
display : none
}
</style>
<div id="my-custom-button">
<img src="../images/order-now.png">
</div>
<div id="the-standard-button">
<?php
proprietary PHP here that renders the standard button
?>
</div>
<script type="text/javascript">
<!--
$(function(){
$("#my-custom-button").click(function(){
$("#the-standard-button").click();
});
});
-->
</script>

The whole
<?php propiertary blah blah ?>
makes it hard to decipher but my guess is that the handler is being generated for whatever is being created by php, i.e. the php generates
<button id="phpButton">
blah
</button>
and then a handler like
$("#phpButton").click(....)
Notice that the handler is NOT on "#the-standard-button". So, you need make sure that you are using the correct selector when calling the click() in $("#my-custom-button").click(...)
Check out this jsFiddle. Notice which secondary click event is fired.

I'm not sure I understand your question perfectly, if what you want is that when You click on one button it will act as though the other was clicked.
Here is a solution that will work IF the default button is also an anchor tag (<a>)
HTML:
<div id="newButton">
<img src="/theimage.jpg"/>
</div>
<div id="oldDiv">
<img src"oldImage.png"/>
</div>
JQuery:
jQuery(document).ready(function($){
$("#oldDiv").hide();
$("#newDiv > a").click(function(){
window.location = $("#oldDiv>a").attr("href");
});
});

lightbox_me not working on click event

I am very new to this so apologise in advance for offending/upsetting anyone.
I have built my first website (http://www.goodgollyexeter.co.uk). There is a shopping cart on my website (I'm using Plum shop which is working great). I want the user to be able to click the "View Cart" button (in the top right hand corner on the website which has id="viewcart") and then for the contents of their cart to be displayed in a lightbox style window. The contents of their cart is contained within a <div> which has id="cart_holder".
To try and achieve the above I am using lightbox_me but I can't get it to work off of the "View Cart" button click event. If I remove the button click event coding then lightbox_me works and displays the contents of the cart but, as there is no event to trigger it, it opens as soon as the page loads. For now I have removed the button click event coding so if you were to visit the website you should see lightbox_me working (but on page load rather then a button click event).
I have tried to pick out the relevant code and show it below. This is the code that I have tried in order to get lightbox_me to work off of the "View Cart" button click event (adapted from lightbox_me website example) but this does not work:
<head>
<script src="js/jquery.js"></script>
<script src="js/jquery.lightbox_me.js"></script>
</head>
<body>
<button id="viewcart" class="viewcart">View Cart</button>
<div id="cart_holder">
<h1> Your Cart </h1>
<p>Currently your cart contains the following items:</p>
<div id="cart"></div>
<label>Items:</label> <span class="cart-quantity">0</span><br>
<label>Sub-Total:</label> <span class="cart-subtotal">£0.00</span><br>
<label>Shipping:</label> <span class="cart-shipping">£0.00</span><br>
<label>Total:</label> <span class="cart-total">£0.00</span><br>
<br>
Please click below to pay using a credit or debit card or via Paypal:
<br>
<br>
<button class="paypal">Checkout</input>
</div>
<script>
$("#viewcart").click(function() {
$("#cart_holder").lightbox_me();
});
</script>
</body>
When I add the above code lightbox_me stops working which is really annoying as if I remove the View Cart button click event coding so it reads like this:
<script>
$("#cart_holder").lightbox_me();
</script>
then lightbox_me works (but only on page load and not on button click event).
I don't know if it is of any use but when I inspected the <div id="cart_holder"> element in Chrome I did notice the following error message:
Uncaught TypeError: Object [object Object] has no method 'lightbox_me'
Due to my ignorance I'm afraid this means very little to me. If anyone could tell me what I am doing wrong and how to get lightbox_me to work from the "View Cart" button click event I would be very grateful indeed. Please let me know if I can explain anything better or post more code or anything else to better assist. Thanks Alex

Check your last closing button tag for checkout:
<button class="paypal">Checkout</input> <!-- should this close with button and not input? -->
Can you wrap your jquery like this?
;(function($){ // add
$(document).ready(function(){
$("#viewcart").button().click(function() {
$("#cart_holder").lightbox_me();
});
});
})(jQuery); // add

How to prevent Ctrl + mouse click to open new tab?

I have a a link as below
link
and javascript function1 include submit form action
now I want to use JavaScript to prevent Ctrl + mouse click to open new tab on this a link for IE(>=6), FF, and Chrome.
Updated to fix
1. update href="javascript:void(0)"
2. update onclick="function1();return false;"
Note: I'm not using a JavaScript library such as jQuery or Dojo.

The A tag is used for links or references. If you mainly want a clickable function I would suggest to use the button tag and style it like a link with css.
For example, bootstrap does this with the btn-link class:
<button type="button" onclick="function()" class="btn btn-link">Link</button>
This has the advantage over using a span or div element that it is clear to browsers, search machines and screenreaders that this is supposed to be a clickable element.

If you want to execute a function on click of an element, use a div tag instead of an anchor tag
<div onclick="function1()" style="cursor:pointer">link</div>
EDIT: a div tag is a block element and will push the link to a new line. And as Jan has suggested move styles to a CSS. Used inline style for ease here.
<span onclick="function1()" style="cursor:pointer">link</span>

[Edited]
You can do whatever you want to do from within the event's function (onclick) and don't use href at all. For the mouse hover cursor effect use style="cursor:pointer".
example code:
<html>
<head>
<title></title>
<script type="text/javascript">
function fn(){
/* do something */
}
</script>
</head>
<body>
<a style="cursor:pointer" onclick="fn()">1234</a>
</body>
</html>