i have link
<a onclick="return package_tour_order(14400287396);" href="javascript:;">advanced</a>
<a>doit</a>
need to get value from onclick only ID nubmer, but this
return package_tour_order(14400287396) is javascript function that popup new window with informationabout that ID
if i run this code
$('a:contains("advanced")').attr('onclick').match(/\d+(?=\))/)[0]
it works fine but when i run in my project with that javascript function(this function is loaded from another site) its does not work and popup window
i need to disable onclick somehow and get only that ID number, how can i doo that?
Don't make it a link. Make it a span or whatever. Also... what do you mean by "function is loaded from another site". If the script is loaded that should not influence things.
Related
I work in advertising. I have a client who has a tracking tag implemented on page load on their advertiser's site. The tracking tag is just a script that calls the JavaScript contained within.
The client is running into a dilemma because they want to trigger another tag when a specific button on the page is clicked on. I don't know the reasoning, but the advertiser's web developers said that it would take them weeks to make the change and the client is aiming to get the tracking set up as soon as possible.
The client's only means of access to the advertiser's page is through the tracking tag called on page load. The client wants to call some JavaScript from the tag that fires on page load that executes a certain function with the button is clicked on. I guess this would involve writing some JavaScript to the document so that it is usable when the button is clicked on.
Questions:
1) Is this possible? In other words, can I take some JavaScript that executes on page load and use it to modify elements on the page?
2) If the button already has another onclick function attached, can we add a second one? The button has a 'class' attribute attached, so could I develop some JavaScript to search for that class attribute and append a second onclick to it? Or would that override the first one?
Note: I cannot use document.write. Would document.appendchild work? Any tips would be appreciated.
To clarify what I want to do again:
1) Trigger JavaScript file on page load.
2) From within that JavaScript file, send a function to the document/page, and attach the reference to that function to a button with a specific class attribute on the page via an onclick attribute.
3) I do not want to override any existing onclick function on the button.
Thanks,
Update:
Here's what I have so far.
<html>
<head>
<script>
function myFunction (){
//do something
}
document.getElementsByClassName('test').onclick = myFunction();
</script>
</head>
<body>
<button class="test"> Submit Request </button>
</body>
</html>
I want to make it so that when the script in the header loads, myFunction is called from the button with class "test". Am I on the right track?
Update 2: Would using setAttribute work?
<html>
<body>
<script>
function myFunction (){
//do something
}
document.getElementsByClassName('test')[0].setAttribute("onclick", "myFunction()");
</script>
<button class="test"> Submit Request </button>
</body>
</html>
I am using Popup.js by Toddish.
http://docs.toddish.co.uk/popup/demos/
Long story short, the popup plugin creates divs by default given the classes ".popup_back" and ".popup_cont".
I have another button I wish to press which should completely delete the added divs with those classes after they have been generated and added to the html. As if they never even existed. Surely this is possible?
I have tried running a function which simply runs:
$(".popup_back").remove();
$(".popup_cont").remove();
As shown in this example:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_remove
Unfortunately despite the code running, the actual divs are never deleted as required.
Any ideas? I am new to this kind of thing and have googled around and read a lot about DOM etc but am yet to crack it.
Thanks
EDIT:
In reply to the comments:
The Javascript:
function removePopups() { // This function is called to remove the popups.
console.log("removing...");
$(".popup_back").remove();
$(".popup_cont").remove();
}
function func(url) { // url is the url of the image to be displayed within the popup.
removePopups(); // As soon as the function casillas is called, removePopups is used to remove any existing instances of the divs.
$('a.theimage').popup({ // This is where the Popup plugin is utilised.
content : $(url),
type : 'html'
});
}
The HTML:
<a class="theimage" onclick="func('image/image1.jpg')" href="#" >
Long story short, an image is displayed in the popup.
I think the issue is that the popup plugin runs due to the class but the function func is never actually run when the click occurs. However simultaneously "removing..." still prints out in the console which tells me that the function IS being executed. The problem is I want the popup plugin to run together with the javascript function. Is there a solution for this conflict?
Your implementation should really be as simple as this:
<a class="theimage" href="#" >Open</a>
Bind the popup creation to your popup link:
$('a.theimage').popup({
content : 'image/image1.jpg',
type : 'html'
});
I'm speculating here, but what might be happening is that you're invoking the popup twice by binding the popup() call to a click handler in your markup. The popup plugin already binds the popup creation to a click event.
View working demo. Note the 3 external resource: the popup CSS, the popup JS, and the jQuery JS.
I have to change my code a little bit to add jquery popup window.
So far I just open new window using:
<a href="?action=_edit&_code=code"><img src...
In new version I simply open popup window using:
<a href="#myDialog" data-toggle="modal" onclick="">...
It works in terms of open dialog box, the only problem remains is how to pass arguments from ?action=_edit&_code=code in this case ?
Thanks for help ;)
You can use more data tags, for example, data-action, and data-code. These can then be obtained in your on click handler.
This link here might give you a better idea: http://www.slideshare.net/lensco/html5-data-attributes
I have an html/php webpage (the file is called searchresults.php) that imports jquery mobile. When you enter the page, the url is usually something like
www.domain.com/searchresults.php?&sort="off"&max="5"
In this example sorting is off and only 5 items are displayed. On that page is a button that opens a popup where I want the user to be able to change these settings. I use the built-in jquery mobile popup. On that popup you can toggle "sort" on/off and you can enter a new maximum. On the popup is an "ok" button to confirm your new settings. It looks like this:
OK
The sortAgain(); function in javascript looks like this:
function sortAgain();
{
//some code to get the necessary variables//
...
//change the href of the button so you reload the page
document.getElementById("okbutton").href = "searchresults.php" + "?keyword=" + var1 + "&sort=" + var2 + "&max=" + var3
}
So, basically, right before the "ok" button navigates to another page, I set its href of the page where it should navigate too.
This scheme works, and the searchresults.php file is fetched again from the server and re-interpreted (with the new variables in the url).
However, if i try to change the settings again after changing it once, the popup just does nothing! In other words, the href of the ok button on the popup stays empty and the javascript function sortAgain() is not called. I don't understand why it calls the onclick method perfectly fine the first time, but then refuses to call it again?
I assume it has something to do with the fact that the popup html code is an integral part of searchresult.php file, and that hrefing to the same page gives problems? The popup is pure html, no php is involved in the popup code. and again, it works fine the first time.
You should check out how to attach events via JavaScript. See here: javascript attaching events
You need to use the "pageinit" event when setting up click handlers in JQM: http://api.jquerymobile.com/category/events/
Here is an example of how to bind click handlers when the page is first loaded.
$( document ).on( "pageinit", "#that-page", function() {
$('#okbutton').on( "click", "#that-page", function( e ) {
$(this).attr("href", "searchreslts.php");
});
});
Here's what I have:
A web application that runs in a single HTML page (call it myapp.req), with content coming and going via AJAX
The application can be entered externally with a link such as myapp.req?id=123, and the application opens a tab with the item at id 123
The content on the page is mostly user's content, and many times has inner-application links to myapp.req?id=123
The problem is that clicking a link to myapp.req?id=123 reloads the browser, and removes any content or state that the user had loaded
What I want is to be able to catch link clicks whose destination is myapp.req?id=123, and instead of reloading the page, just open the tab for item 123, leaving anything else currently loaded alone. If the link is for an external website, though, obviously just let the browser leave.
So my question really: Can I have a global link handler that checks if I want to handle the link click, and if so, run some Javascript and don't leave?
I understand I could find all <a>s and add listeners, but my hope is that the solution would only require setting up the listener once, and not adding link handlers every time new content is loaded on the page. Since content can be loaded many different ways, it would be cumbersome to add code to all those places.
Does that make sense?
jQuery's live is what you need:
$('a').live("click", function () {
var myID = $(this).attr('href').match(/id=([a-zA-Z0-9_-]*)\&?/)[1];
if (myID) {
//run code here
alert(myID);
return false;
}
});
Any link will now have this click handler whether it's been added after this is called or not.
Sure you can. Add a clickhandler on the body. So you catch all clicks. Then you have to check if the target of the event or one of its parent is a link with your specific href. In this case stop the event and open the tab.
updated to use .live instead of .click
If you use jQuery, you can add a "live" click event handler to every a href at once:
<body>
click here
<br/>
whatever
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$('a').live('click',function() {
var myID = $(this).attr('href').match(/id=([a-zA-Z0-9_-]*)\&?/)[1];
if (myID) {
//run code here
alert(myID);
return false;
}
});
</script>
This should extract the id from the href's query string and let you do whatever you want with it.