On changing href value to popupid not working

Question

I have created some blocks which have different descriptions which should be printed,so i have created all the popup details separately and made the print button with "#" on load and on clicking on blocks i have tried to change the href value to the corresponding popupid.After this change in href value on clicking print popup is not showing. Following the codes i have used:

<div id ="9print">
<a class="vc_general vc_btn3 vc_btn3-size-md vc_btn3-shape-square vc_btn3-style-classic vc_btn3-color-grey" href="#" title="">PRINT</a>
</div>

onclick button 9

$("#9print a").prop("href", "#sg-popup-id-429");

the href value is changing to "#sg-popup-id-429", but after that when i click on "PRINT" popup is not showing , if we directly put the href value as "#sg-popup-id-429" its working fine

Can anyone please help me on this?

How do you open the popup? Is this another event that is added to the anchor tag? Could you add this code? — Jerodev, Mar 18 '19 at 11:07
if i click on a button and its href="#sg-popup-id-429" in this way i could open the popup — user11196214, Mar 18 '19 at 11:10
$( "#9A" ).click(function() { $("#9print a").prop("href", "#sg-popup-id-429"); }); — user11196214, Mar 18 '19 at 11:15
no if i click on 9A,"#sg-popup-id-429" should shown if i click 9B "#sg-popup-id-430" should shown like wise — user11196214, Mar 18 '19 at 11:17
Why won't you just show the popup event code? I think it has to do with when the event is created. — Jerodev, Mar 18 '19 at 11:18

Mark Baijens · Answer 1 · 2019-03-18T13:06:20.770

It's because the href property contains more then just "#". It contains the full url. You can make it work by replacing the last part of the url.

The regex /#.*/ works as follows.

# matches the # character
.* matches (almost) any character 0-unlimited times

var currHref = $("#9print a").prop("href");
$("#9print a").prop("href", currHref.replace(/#.*/, "#sg-popup-id-429"));

//code for showing initial and new href values.
var newHref = $("#9print a").prop("href");
console.log("initial href: " + currHref);
console.log("new href: " + newHref);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id ="9print">
<a class="vc_general vc_btn3 vc_btn3-size-md vc_btn3-shape-square vc_btn3-style-classic vc_btn3-color-grey" href="#" title="">PRINT</a>
</div>

<div style="height: 2000px;"></div>

<div id="sg-popup-id-429" style="height: 100px; background-color: red">test<div>

score -2 · Answer 2 · answered Mar 18 '19 at 11:19

-2

First of all I would place this inside the document ready function in jquery, so you don't run the jQuery function you're trying to invoke on an element that is not yey loaded on your page.

$(document).ready(function(){
    $("#9print a").click(function() {
        $("#9print a").attr("href", "#sg-popup-id-429");
    });
});

This is just assuming, that this is your problem :) Show more of your code if this did not help at all :)

answered Mar 18 '19 at 11:19

IncrediblePony

518
6
19

1

this ready function is there already i just put the click function code – user11196214 Mar 18 '19 at 11:24
you shouldn't use `click()`. `on()` is the way to go these days. Beside that you shouldn't need the click event handler. – Mark Baijens Mar 18 '19 at 11:25
@user11196214 - fair enough. But I cannot read that from your example :) you still did not answer if the function worked. – IncrediblePony Mar 18 '19 at 12:08
@MarkBaijens - ok, but does utilizing a function that is not deprecated in jQuery really deserve a downvote? And why shouldn't one need a click event handler? As far as I can read from the question he wants to change the href attribute when the link is clicked? Am I missing something really obvious here? – IncrediblePony Mar 18 '19 at 12:13

On changing href value to popupid not working

2 Answers2