JavaScript link not sending to correct href - javascript

I'm having problems with a JS link.
I have the following code:
window.addEvent('domready', function() {
$('province_aw').addEvent('change', function() {
var index = this.options[this.selectedIndex].value;
var b = document.getElementById("choice_2").value;
var link = "index.php?option=com_chronoforms&chronoform=listSpecific-3&id_province="+index+"&id_ch="+b;
document.getElementById('link1').href = "index.php?option=com_chronoforms&chronoform=listSpecific-3&id_province="+index+"&id_ch="+b;
});
});
with this link:
<a class="jcepopup" id="link1" href="" rel="{handler:'iframe'}"> <input type='button' name='prueba' id='prueba' value='...' /> </a>
The code is actually changing the link of the < a > tag, however, when I click on the button, nothing happens, it keeps sending me to the original href (which is the homepage).

You should use href="javascript:void(0);"

Related

How to Bind Jquery Value to an HTML Element

How can i bind the url result from the jquery to the href ? as you can see on the html below. Thank you.
JQUERY CODE
<script>
$(document).ready(function(){
$("#btnSearch").click(function(){
var yearArray = [];
$("input:checkbox[name=Year]:checked").each(function(){
yearArray.push($(this).val());
});
var makeArray = [];
$("input:checkbox[name=Make]:checked").each(function(){
makeArray.push($(this).val());
});
var url="http://example.com/results?Year="+yearArray.join()+"&Model="+makeArray.join();
alert(url);
});
});
</script>
HTML
<a href="/searchnew/{{ url }}"><button id="btnSearch" class="btn btn-cta margin-bottom-1x search-button cssBase"
type="button""
style="width: 262.5px;">Search</button></a>
You can simpy add href attribute after creating link. What i mean by this is
if your href tag is look like this
<a href="#" id="myurl">
$("#myurl").prop("href",url);
This will simply render your html like this
<a href="http://example.com/results?Year="......(your dynamic values here)">
You don't have to add tag on to button click. Instead, on click of button, within the function after you have prepared url, call
location.href = "searchnew/" + url;
In case you have the base url for the app, you can prepend as well to have the complete url with you.
Use id attribute for your a tag like this-
<a href="....." id="myLink" > ... </a>
And at the end of your jQuery code add the following:
var a = $('#myLink');
var href = a.attr('href');
a.attr('href', href + url);

Using a variable as the href

I want to have the href consist of a variable set in javascript, I also need the text that is displayed on the page to be a variable. In the example below I would like to have the string "http://google.com" be assigned to a variable, I also need to have "My Link Name" as a variable. I have looked at similar questions here but I don't see what addresses this particular situation.
Go Here Now<br>
In the example below I can create a variable called myLinkName and set it to the string "Go here now" however I don't know how to create a variable and set it to the value of the href e.g. "http://google.com"
<script type="text/javascript">
var myLinkName = "Go Here Now";
</script>
<a href="http://google.com">
<script type="text/javascript">
document.write(myLinkName)
</script></a>
You have to use the DOM API
HTML
<a id="aLink"></a>
Javascript
let link = document.getElementById('aLink');
link.href = "https://google.com";
link.innerText = 'This is my Link'
The complete code:
<html>
<body>
<a id="aLink"></a>
<script>
let link = document.getElementById('aLink');
link.href = "https://google.com";
link.innerText = 'This is Link';
</script>
</body>
</html>
I fear you are using some very old JavaScript material.
The usage of document.write() is depricated.
The approach you are following is antiqated. Today JS is not evaluated and just written to the document. Instead the document is explicitly manipulated.
First of all: <script> is sufficient to declare some JavaScript. The type attribute is not needed anymore.
<a id=myLink></a>
<script>
//get a reference to the a element
const myLink = document.getElementById("myLink");
//set the text
myLink.innerText = "Click me!";
//set href
myLink.href = "http://google.com";
</script>
You can set href attribute like this
var text = 'Go Here Now';
var href = 'http://google.com'
var atag = document.getElementsByTagName('a')[0];
atag.innerText = text;
atag.href = href;
var text = 'Go Here Now';
var href = 'http://google.com'
var atag = document.getElementsByTagName('a')[0];
atag.innerText = text;
atag.href = href;
<br>
I would create an object that contains your link name and href and on page load, assign accordingly. Something like:
window.addEventListener('load', function(){
var link = {
name : 'My Link Name',
href : 'http://google.com' //should use : instead of =
};
var myLink = document.getElementByTagName('a')[0]; //You would change this to whatever selector you want.
myLink.innerText(link.name);
myLink.setAttribute('href', link.href);
}, true);
Syntax may not be perfect. And, depending on your situation, it may be better to accomplish this with your server side code. Hope this helps!
You can change the href attribute by doing this:
<a href="http://google.com" id="link">
<script type="text/javascript">
var yourtext = 'Go Here Now';
var href = 'http://google.com';
document.getElementById('link').href = myLinkName;
document.getElementById('link').innerText = yourtext;
</script></a>
By using JQuery we can update/add href to the element like below.
HTML code:
Click Here
JQuery code:
$("#linkId").attr("href", "http://www.google.com/'");

Paste id into href

I have a lot of streams.
<a id="stream1" href="http://server/stream1/parameters">name_1</a>
<a id="stream2" href="http://server/stream2/parameters">name_2</a>
...
<a id="stream99" href="http://server/stream99/parameters">name_99</a>
I want to hide "http://server/stream99/parameters"
How to do a function to paste "id" into href
eg:
<a id="stream1" href="#">name_1</a>
using something like
function somefunction(a) {
document.getElementById('a').innerHTML = '<a href="http://server/'+id+'/parameters">';
}
Javascript or jquery will make the link and paste the "id".
Or perhaps I can somehow use a different method to hide links?
Like this - do note that this is easy to decipher by inspecting the code.
Alternatively use a server redirect and just send some encrypted ID
$(function() {
$(".stream").on("click", function(e) {
e.preventDefault();
location = "http://server/" + this.id + "/parameters";
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<a id="stream1" class="stream" href="#">name_1</a><br>
<a id="stream2" class="stream" href="#">name_2</a><br>
<a id="stream3" class="stream" href="#">name_3</a><br>
<a id="stream4" class="stream" href="#">name_4</a><br>

get id value to function

I want to load some PHP page to div tags with this, but this code does not work;
<span>Dahili Branşlar</span>
<a href="#" id="cerrahi" ><span>Cerrahi Branşlar</span></a></li>
<script>
var yuklenecek = document.getElementById(id);
$("#"+yuklenecek).on("click", function(){
$("#orta_load").load(yuklenecek+".php");
});
</script>
<div id="orta_load">
when ı click to buton that which ı choose : should load dahili.php or cerrahi.php page in here
</div>
You need this:
$(".loaddiv").click(function() {
var url = $(this).attr("id") + ".php";
$("#orta_load").load(url);
console.log("loading " + url);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Dahili Branşlar</span>
<span>Cerrahi Branşlar</span>
<div id="orta_load">
when ı click to buton that which ı choose : should load dahili.php or cerrahi.php page in here
</div>
Note how the jQuery function assigns the click handler to each <a>, then uses its id to determine the php document.

Ajax load div of one page called from another page

I am facing with some glitches regarding the ajax load
OK, so the query is lets say I have page a (picture attached)
the ajax loads the div into the "RESULT" div on clicking the specific id's
here is the ajax script & the html i have come so far. this loads perfectly on the Result div on the page a itself.
<a href="#" id="one" /><br>
<a href="#" id="two" /><br>
<a href="#" id="three" /><br>
<div id="result" class="functions"></div>
$.ajaxSetup({
cache: false
});
var ajax_load = "<img class='loading' src='img/load.gif' alt='loading...' />";
var loadUrl = "content.php";
$("#one").click(function () {
$("#result").html(ajax_load).load(loadUrl);
});
var load2Url = "content1.php";
$("#two").click(function () {
$("#result").html(ajax_load).load(loadUrl);
});
var load3Url = "content2.php";
$("#three").click(function () {
$("#result").html(ajax_load).load(load2Url);
});
thing is i need to load the same contents on the result div on page b from another page using the same id calls, lets say page b.
the concept is, on page b, the id is clicked, it LOADS page a first & loads the content on "RESULT" div. both pages are on the same server
Would really appreciate any assistance. thank you.
One way to handle it will be to pass the dynamic item as a request parameter like in page b use the url /pagea.html?section=one etc
Then on page load
$(function(){
var location = window.location.href;
var page = location.substring(location.indexOf('=') + 1);
$('#' + page).trigger('click');
})
You got your loadUrl's in the wrong pace they should be inside of the function otherwise it's value is the last value it was set to which is content2.php
jsFiddle Demo
$.ajaxSetup({
cache: false
});
var ajax_load = "<img class='loading' src='img/load.gif' alt='loading...' />";
$("#one").click(function () {
var loadUrl = "content.php";
$("#result").html(ajax_load).load(loadUrl);
});
$("#two").click(function () {
var loadUrl = "content1.php";
$("#result").html(ajax_load).load(loadUrl);
});
$("#three").click(function () {
var loadUrl = "content2.php";
$("#result").html(ajax_load).load(loadUrl);
});

Categories

Resources