Pass Variable to JQM Dialog, from link click - javascript

I call my Dialog with a link
<li>" + text + "</li>;
Is there away I can pass a variable which is also the id, to the refPerson beforeshow function? I am trying to not have to make a phony hidden element. I have tried a bunch of different ways but nothing seems to pass the var.
$(document).on('pagebeforeshow','#refPerson', function(){
});
I have changed how the dialog is called to making the onclick of the link a function that dynamically opens the dialog but I couldnt get that to correctly pass the param either. I just need to get the clicked links ID to the beforeshow function, or somehow pass a variable to it

You can consider using html5 data-* attribute.
refer to this
Using .attr() to retrieve the value from the attribute. Refer to api

As mentioned before, you can use .attr(), here's an example:
<li><a href='#' onclick='getId(this);' data-transition='pop' id='someId'>Some Text</a></li>
<script>
function getId(e){
var myId = $(e).attr("id");
console.log(myId);
//yourcode...and then redirect...
$.mobile.navigate( "#refPerson" );
}
</script>
You can also assign a global javascript variable and retrieve it on your dialog, like this:
function getId(e){
window.myId= $(e).attr("id");
console.log(window.myId);
//yourcode...and then redirect...
$.mobile.navigate( "#refPerson" );
}
I personally use the sweet-alert plugin to handle dialogs and messages.

I just changed the onclick of the link to a function and passed the param. Then dynamically opened the new dialog. It just seems like the easiest solution to my problem

Related

View onclick data via Chrome Extension

I want to pull the onclick information from an a tag. I know how to do this normally and I've confirmed it works via the console. However, it returns null when attempted through an extension. Is this possible via an extension and if so: what strange method must be employed?
Example:
On the page: text
I'd like to be able to grab that something(stuff,otherstuff).
However, pure JS didn't work: String(document.getElementsByTagName("a")[10].onclick)
And neither did jQuery: String($(".tableclass").find("tbody").find("a")[10].onclick)
Both of the above working when entered into the console.
First of all, you can never read the onclick property that was set by a page because extension code runs in an isolated scope.
Secondly, even if the code was not isolated, the onclick property of <a onclick="foo"></a> may not have the value foo you are expecting. That is because a property is not the same thing as an HTML attribute.
Therefore, if you want to access the string value of an onclick attribute you can and should use linkElement.getAttribute('onclick'); instead.
Is this what you mean, that you want to change a href of the link? You can do it like this:
html:
<a href='foo' class='link-to-swap'>link</a>
javascript:
$(document).ready(function(){
$('.link-to-swap').click(function(e){
e.preventDefault();
var grabbedData = $(this).attr('data-id')
$(this).attr('href',grabbedData)
return false
})
})
here is the fiddle:
https://jsfiddle.net/cp6x9pf5/1/

How to generate the content of an href link by the return value of a javascript function?

I have a javascript function:
function foo() { return "/a/b/SomeApi"; }
then I have a href link in my web page. I want this link to point to the value returned by my javascript function, so that when the user clicks the link, it's as if the user had clicked a link with url /a/b/SomeApi.
I tried following:
Click
But the result of this is the browser would open a new window showing the literal value /a/b/SomeApi instead of sending a request to the server.
Any suggestions? Thanks.
Instead of returning the string, set the location of the current page with it, like this...
function foo() { document.location.href = "/a/b/SomeApi"; }
As pointed out by #haim770 - these are not the droids you are looking for.
If you want to specifically set the href attribute, you must do it from outside of the link. Firstly you should give your link an id attribute, such as this...
<a id="myAnchor">Click</a>
This piece of code should then be placed either after the element in the page, or as part of a "document loaded" piece of code.
document.getElementById("myAnchor").href = "/a/b/SomeApi";
If you were using jQuery (which is not in your list of tags) you could do something like this...
$(function(){
$("#myAnchor").attr("href", "/a/b/SomeApi")
});
I don't think HREF was ever meant to be dynamic; for that, just use the onclick property, such as :
Click

Javascript | passing string variable to onclick event not working

I am trying to open a popup windows but the button's onclick content is stored in a variable. Thsi is my approach:
var page = 'window.open(\'ticket.html?wallet='+global_wallet+'\',\'popUpWindow\');';
document.getElementById('EditButton').onclick=page;
This is not working. Not popup being displayed. Something is missing and i don't figure out what is it...
Regards,
The onclick property is supposed to be a JavaScript function, not a string like you are trying.
You can pass a function:
document.getElementById('EditButton').onclick = function(){
window.open('ticket.html?wallet='+global_wallet,'popUpWindow');
};
Or if for some reason you have to use the string, you can set the onclick attribute. In this case you need to use setAttibute() instead of the onclick property.
document.getElementById('EditButton').setAttribute('onclick', page);

How to add text to dynamically created DOM objects?

Say I have two buttons "Add Link" and "Add Text". The "Add Link" button automatically appends the following to the existing page:
When i click on the button "Add Text", the text of all dynamic links created should contain the text "Text".
I originally use "$("a").text("Text")" for the function of the "Add Text" button, but it does not work because the links are dynamically created as the user clicks the "Add Link" button.
How do I make it so that I can get "Text" into all of the dynamically created link?
NOTE: Something Like this
$('buttonforaddtext').live('click', function() {
$("a").text("Text");
});
Does not work for me because the button has been there the whole time, its the "a" that are dynamically created with the click of the "Add Link" button.
Try like below as I mentioned in comment,
$('#addLink').on('click', function () {
$(body).append('');
});
$('#addText').on('click', function () {
$('a.newLink').text('New Link');
});
$('button').on('click', function() {
/* your code */
});
If you have dynamic object you need to use .on() to let it work...
var yourLink = $(""+yourText+"");
or
var yourLink = $("<a href="+someURL+"/>");
yourLink.html("Text");
then
yourLink.appendTo($('body'));
Thats if you wish to create # the same time
That you describe sounds fine to me. Maybe you should post the code you are using. The follow should work:
$('#addLink').click(function(){
$('body').append('');
});
$('#addText').click(function(){
$('a').text('Text');
});
As long as your jQuery object ($('a')) is being created after the click event has happened, everything should work as you describe.
You need to use '.live' method, as our colleague said before. It happens that in the moment you are trying to bind the event, the element doesn't exis and it dosn't work.
Using .live, the window will keep listening for the element you've selected.
In the case you're using jQuery 1.7.+, I recomend you use the .on() method to bind the event and the .off() to unbind it as soon you dont need it anymore...
PS.: By the way, what are you trying to select?
$('buttonforaddtext')
Your problem is probably that live is beyond deprecated or you don't have the HTML that you think you have. Since you re-query the A tags in your callback for the text insertion and the button is static HTML, you shouldn't need 'live' or 'delegate' or 'on'. Just do a simple .click

trying to access rel attribute of <a> using javascript

I am using an javascript overlay in my site for my subscription form. I have loaded the code for overlay from net. It is in javascript. Now the thing is to trigger the overlay function using a link i need put some value under <a rel="">.
more specifically, click
But i dont want to put a tag instead i want to link to the subscription page using javascript function. Now my problem is how or where do i put the value under 'rel' attribute in my javascript to get the same result???
Like this:
A
If you want to use plain JS without jQuery, try setAttribute: https://developer.mozilla.org/en/DOM/element.setAttribute
Give your tag an id attribute and then you can add:
document.getElementById("your_id").setAttribute("rel", "gb_page_center[450, 450]");
Using jQuery, this can be accomplished quite cleanly by using the .attr() method:
$('a').attr('rel', 'gb_page_center[450, 450]');

Categories