Please review the below given code:
const a=document.querySelector('.nice');
a.addEventListener('click', (e)=>{
e.preventDefault();
if(name1.value.length<5){
a.href="#";
}
})
The problem is that although value length is more than 5 characters, a href is not working and I can not go to another html page when I click on a.
What can be the problem?
Related
I'm having trouble to find the correct way to do this. In my landing page I got a inner link like this:
Destacados
When I click on it, the page go to the #destacados id, but all the javascript stop working, so the carrusel just dies. I'm not sure if this can help, but when I click the link, the address bar change to /myapp/#destacados ... may be it has trouble routing that... any idea??
Thanks
Can you show how you are binding the click event to your <a> ?
Just tested with JQuery (could be without)
<a href='#destacados'>Go To Destacados Section</a>
<script>
$(function () {
$("a[href='#destacados']").click( function () { console.log('clicked'); });
});
</script>
The focus goes to the anchor and clicked is printed
How to get href value of <a> element and store it to a variable with jquery mobile?
This is my snippet code:
$('a').live('click', function() {
var href = $(this).attr('href');
console.log("href value: |"+href);
});
Here is sample:
Link
In my log cat (btw I am using jquery mobiel for phonegap), it returns : href value: |#
What i want is, something like this in my logcat:
href value: | 117.xx.xx.xx/timesheet/file.pdf
I'm using phonegap 2.9
Based on the symptoms you describe, it seems as though the a tag firing the click event has an href of #. Possibly some other tag wrapping your intended anchor? Try a more specific selector and see if that works, maybe something like:
$('#myLink').live('click', function() {
var href = $(this).attr('href');
console.log("href value: |"+href);
});
With this for a link:
Link
If it still gives you a #, then is it possible that the href value is populated after your click event is firing (possibly by some other javascript)?
Finally, solved. After frustating with jquery 'live' and 'on', I'm using plain Javascript function to get value of link in attribute: getAttribute('href'). And that worked!! Anyway, thank's for all the answer.
I am loading two MVC Partial Views in jQuery UI dialog using following code for editing and adding a record:
$.get(url, function(data)
{
dialogDiv.html(data);
var $form = $(formid);
$form.unbind();
$form.data("validator", null);
$.validator.unobtrusive.parse(document);
var dat = $form.data("unobtrusiveValidation");
var opts = dat ? dat.options || '' : '';
$form.validate(opts);
//THIS FUNCTION ADDS PLUGINS ETC.
runEditCreateStartScripts();
dialogDiv.dialog('open');
});
Following is the function that wires-up chosen functionality.
function runEditCreateStartScripts(){
$("select.chzn-select").chosen(
{
no_results_text: "no match",
allow_single_deselect: true
});
}
Everything is perfect on first call. After opening one dialog say edit a few times everything is broken. There is only hyperlink available in place of chosen stuff. This also happens if I open one dialog say add and then second dialog. The bindings and other functionality from first one (add) is gone.
Any insights on why this might be happening?
The problem that caused my issue was that the modals I was loading via AJAX had inputs with the SAME ID as an input field that was already on the page (using Django that has generic ID generators for model fields). This caused collision between the two inputs when re-triggering .chosen() on the selector. When I made the ID fields unique, all worked as expected.
Hope this would have helped.
I'm using $.mobile.ChangePage() to navigate from one HTML page to another. But the contents of the page is not changing. while doing so the page URL changes but the new page is not loaded. it requires to be refreshed to load.
you should use JavaScript function to change the page..using
window.location = 'your page ';
hope it will resolve your problem !
In the code that you provided in the comments above, you are likely getting an error stating that next_page is not defined. Given that you are dealing with jQuery Mobile, try assigning the click handler slightly differently:
Change the definition of the link to something like this:
<a id="btnNextPage" href="#" >Details</a>
You don't have to give it an id - you could just use selectors to identify the link in the following javascript:
// the event handler
function next_page() {
$.mobile.changePage("http://www.google.com", {transition:"slide"});
}
// assign the click event when the DOM is ready
$(function() {
$("#btnNextPage").click ( next_page );
});
I have a page with a ticket list. In it, there is a <td> that is either a grab or release link. That link inside the '' is wrapped in a '' for an ajax html replacement. Like:
<td>
<div id="ticket_grab_release_<%= ticket.id %>">
*---- either a grab or release link here ----*
<div>
</td>
So, the user clicks on 'grab': They are assigned the ticket, the worklist is updated with their info on the page via HTML replacements, and the grab link is replaced with a 'release' link.
Next to this is a 'complete' link. When the user clicks on that, a small complete form opens in a jQuery UI-Dialog window. I ran into a problem though because along with the grab/replace link changing I also had to toggle this 'complete' link with a grey non-link 'complete' or an actual 'complete' link (if ticket released - disable complete link or visa versa).
The problem is that if this 'complete' link was greyed out and I replaced that with a 'complete' link, the UI Dialog window would not open. Like (no idea what I'm saying) the link wasn't in the DOM.
I got frustrated for a bit and then tried wrapping the script in a <div> and doing an html page replacement on the whole script. I HTML replaced the greyed out 'complete' with a 'complete' link and then HTML replaced the script right after. Interestingly that worked, but I'm really curious as to why it worked. When you ajax insert a script through an HTML replacement, does that inserted script have access to the modified DOM where the original script only has access to the what was the original DOM from the page load?
<div id="html_replace_sript">
<script type="text/javascript">
$('.complete_ticket_link' ).click(function(){
var url = $(this).attr("href");
$("#form_load").load(url,
function() {
$(this).dialog({
modal:true,
draggable: true,
resizable: false,
width:'auto',
height:'auto',
title: ' Complete Ticket ',
position: [125, 50]
});
});
return false;
});
</script>
</div>
Thanks - much apprecaited!
Check out live()'s much less recource-demanding counterpart: delegate()
Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.
That means that instead of having to look through the entire window for an element, it starts at the specified root, significantly reducing overhead. This is the best solution for your issue.
The answer is YES.
But if you want to bind events to elements that match the selector now and in the future, you can use .live()
So you'd do:
$('.complete_ticket_link' ).live('click' function(){
...
});
Using this, your code can be on your main page and it will work.
Hope this helps. Cheers