I have a django view which contains a simple form and a table of links. The form has a dropdown box, and the link's query parameters should contain the value of the dropdown. So for example if the dropdown has options 1, 2 and 3, and 2 is selected, the link targets in the top three rows of the table should be something like this:
/preview/first?other_arg=somevalue&choice=2
/preview/second?different=argument&choice=2
/preview/third?choice=2
Everything except the arg=2 is predefined for each row.
It seems to me that there are two ways of doing this. Either I could recreate all the links whenever the dropdown value changes, or I could create the link when it is clicked. I've been trying to do it via the second method, but I can't get it to work (i.e. nothing happens when I click on the link). I created a fiddle showing my test code:
http://jsfiddle.net/LcY8c/4/
Is this the best approach, and can anyone point out where I'm going wrong?
I changed you fiddle a bit. Changed the id's to class, and the jQuery from an click event to a change event. Is it this you are looking for?
http://jsfiddle.net/Grevling/LcY8c/17/
<div>
<select id="choiced">
<option choice="1">1</option>
<option choice="2">2</option>
<option choice="3">3</option>
</select>
</div>
<div>
<a class="link" base="/link1" href="#">link1</a>
<a class="link" base="/link2?arg1=1" href="#">link2</a>
<a class="link" base="/link3?arg1=other" href="#">link3</a>
</div>
Script:
$(document).ready(function () {
$("#choiced").change(function () {
var reportType = $('#choiced').val();
var link = $('a').attr('base') + '&choice=' + reportType;
$("a").each(function (index) {
$(this).attr("base", $(this).attr("base") + '&choice=' + reportType);
});
});
});
You're using an id attribute with the same value 3 times. Id attributes are supposed to be unique.
<a id="link" base="/link1" href="#">link1</a>
<a id="link" base="/link2?arg1=1" href="#">link2</a>
<a id="link" base="/link3?arg1=other" href="#">link3</a>
Related
Please I need to delete item from my website using jQuery and ajax but I don't know how to get the particular id of what I want to delete or less is single see below example:
HTML CODE
<span id="file-1">Orange</span> <a id="delete-1">Delete</a>
<span id="file-2">Orange</span> <a id="delete-2">Delete</a>
<span id="file-3">Orange</span> <a id="delete-3">Delete</a>
<span id="file-4">Orange</span> <a id="delete-4">Delete</a>
<span id="file-5">Orange</span> <a id="delete-5">Delete</a>
<!--Next item will have id of 6 is looping...-->
AJAX JQUERY
<script>
$(document).ready(function(e){
$("#delete-").click(function(){
//Am confused here how to know which id need to be deleted?
var id = $('#file-').val();
$.ajax({
url:'/delete_reply.php',
data:'id='+id,
type: "POST",
beforeSend: function(){
$('#comment-'+id'').attr('class', 'deleting');
},
success: function(data){
$('#comment-'+id'').hide();
$(#comment-'+id'').css('display','none');
}
});
});
});
</script>
Please I don't know how to pass the id of the content I want to delete to the ajax can someone help me?
UPDATE:
It's good approach to assign value to HTML element using data
attributes. For that HTML and jQuery both would look something like
follow.
HTML:
<span id="file-3">Orange</span> <a data-fileid="3" class="cmnDeleteFile">Delete</a>
JQUERY
$(".cmnDeleteFile").click(function(e){
e.preventDefault();
var id=$(this).data('fileid');
// This is how you get id of the file from same element using data attribute.
});
Old answer:
You're following wrong method.
Give every link common CSS class and fire trigger event on click of a link like this.
HTML:
<span id="file-3">Orange</span> <a id="3" class="cmnDeleteFile">Delete</a>
JQUERY
$(".cmnDeleteFile").click(function(e){
e.preventDefault();
var id=$(this).attr('id');
// This is how you get id of the file from same element.
});
Replace your
var id = $('#file-').val();
with
var id=$(this).attr('id').split("-")[1];
Btw, I haven't tested rest of your code. Particularly, your #delete- selector that you have used for binding click event.
I'm trying to click specific button but with no result yet.
Using Python 3.4.2 and Ghost.py.
<a class="button" title="" ref="1" id="details" href="javascript:void(0);">
</a>
This code is under many div's and li's.
The simplest answer is welcomed!
You can evaluate a line of Javascript with Ghost.py and use the click method on the appropriate DOM element you get with getElementById:
page, resources = ghost.evaluate("document.getElementById('details').click();", expect_loading=True)
UPDATE
To get the link by class use the following line
ghost.evaluate("document.getElementsByClassName('button')[0].click();", expect_loading=True)
There is another version you can use to select and click the first link with an ref="1" attribute on your page:
ghost.evaluate("document.querySelector('a[ref="1"]').click();", expect_loading=True)
I am trying to execute a function when clicking on a dynamic element(does not exist on page load), here is my code:
jQuery(document).ready(function(){
jQuery('body').off('click','.itemAttribute').on('click','.itemAttribute',function(){
var title = jQuery(this).find('img').attr('title');
jQuery(this).parent().parent().find('select').val(title).change();
});
})
However the code is only executed on second click..
HTML's of Dynamic element:
<ul class="attribute-list">
<li class="itemAttribute tbn-images" rel="837"><img src="pathxxx.jpg" title="UNIVERSITY BLUE/DARK"></li>
<li class="itemAttribute tbn-images" rel="838"><img src="pathxdfhdxx.jpg" title="UNIVERSITY RED/DARK"></li>
</ul>
static HTML:
<select name="super_attribute[92]" id="attribute92" class="required-entry super-attribute-select" onchange="MagicToolboxChangeOptionConfigurable(this, 'farve');" style="visibility: hidden; ">
<option value="">Please choose...</option>
<option value="837" price="0">UNIVERSITY BLUE/DARK</option>
<option value="838" price="0">UNIVERSITY RED/DARK</option>
</select>
Please help..
NOte: When adding an alert in the code, the alert is executed in first click, seems the problem is:
jQuery(this).parent().parent().find('select').val(title).change();
:(
To select an item based on the value, you should be querying the rel attribute of the <li> element.
var value = this.getAttribute('rel');
jQuery(this).parent().parent().find('select').val(value);
Note that the selector you're using is fragile, but in my given example below it works as expected.
Demo
jQuery(this).parent().parent().find('select').val(title).change();
change to
jQuery('#attribute92').val(title);
I'm trying to hide and show HTML Elements by using javascript. It all works well, but the result isn't longer available then 1 Second. After one second, the element, that is displayed by default appears and the element that should be shown is hidden.
Here below I posted my sample code. I created an element called selected, that keeps a value, that tells which paragraph is actually shown. If I click on next, I want the next Paragraph to be shown.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<selected id="displayedResults" value="0">
</selected>
<div>
<p id="results_0" style=""> Result 0 </p>
<p id="results_1" style="display: none;"> Result 1 </p>
<p id="results_2" style="display: none;"> Result 2 </p>
<p id="results_3" style="display: none;"> Result 3 </p>
<p id="results_4" style="display: none;"> Result 4 </p>
<p id="results_5" style="display: none;"> Result 5 </p>
<a onclick="previousResults()" href="">Previous</a>
<a onclick="nextResults()" href="">Next</a>
</div>
<script type="text/javascript">
function previousResults()
{
var index = document.getElementById("displayedResults").getAttribute("value");
var rslString = "results_";
if(index>0)
{
document.getElementById(rslString.concat(index)).style.display='none';
index=index-1;
document.getElementById(rslString.concat(index)).style.display='block';
document.getElementById("displayedResults").setAttribute("value",index);
}
}
</script>
<script type="text/javascript">
function nextResults()
{
var index = document.getElementById("displayedResults").getAttribute("value");
var rslString = "results_";
if(index<5)
{
document.getElementById(rslString.concat(index)).style.display='none';
index++;
document.getElementById(rslString.concat(index)).style.display='block';
document.getElementById("displayedResults").setAttribute("value",index);
}
}
</script>
</body>
</html>
Your links are reloading the page when you click on them, so you're seeing the results of your JavaScript, then the page reloads and it resets back to the starting state. The simplest solution would be to modify your HTML for the <a> elements to this:
<a onclick="previousResults(); return false;" href="">Previous</a>
<a onclick="nextResults(); return false;" href="">Next</a>
The return false will prevent the default behaviour of that action - in this case following the link - thereby preventing the page reload.
In addition to that, there's no <selected> element in HTML. You'd be better served by using a hidden input, so replace this:
<selected id="displayedResults" value="0">
</selected>
with
<input type="hidden" id="displayedResults" value="0"/>
<selected id="displayedResults" value="0"></selected>
That ain't gonna work ;-)
- Edit: Oke, yes it can work but it's not valid HTML...
<select id="displayedResults">
<option value="0">zero</option>
</select>
It is because your page is reloading in each click. Change that anchor tag to another tag like span or something..
<span onclick="previousResults()">Previous</span>
<span onclick="nextResults()">Next</span>
add
return false;
on each function
use jquery than traditional javascript
to hide result 1
$('#results_1').hide();
to unhide just use
$('#results_1').show();
please tell what you are trying to achieve. I think you are doing it in a complex way.
The page is reloaded once you click the previous and next link. So please do as follows :
<a onclick="previousResults()" href="javascript:">Previous</a>
<a onclick="nextResults()" href="javascript:">Next</a>
Add return false; in the onclick attributes, in order to prevent the browser refreshing the page.
See http://jsfiddle.net/xZSyz/
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
$("#results").load( "jquery-routing.php", { pageNo: $(this).text(), sortBy: $("#sortBy").val()} );
return false;
});
});
</script>
<div id="results"> </div>
1
2
that code works fine, only problem that after I run it all my a href links stop to work! The links become jquery ajax calls.. why?
You're $("a") selector matches all <a ...> tags, you need to change it to something more specific:
$("a#someid")
$("a.someclass")
$("div#somecontainer a")
To target specific links, use the id or class tag on your anchor tags.
E.g.
<a class="link1" href=""></a>
<a id="link2" href-""></a>
Do note that id tags are unique within a page and can only be used once.
Reference those links in jQuery using:
$('a.link1').click(function() {}
$('#link2').click(function() {}
or you can combine both:
$('a.link1, #link2').click(function() {}
What you need to do is assign an id or class tag to the link that will call the ajax request. E.g. <a class="ajax" href="">ajax</a> and referencing it with $('a.ajax').click(function () {}
Your setting the onclick event of all anchor tags on the page. Try only selecting the link that you want instead of the more general $("a")
Your selector $("a") indicates all the hiperlink in your page.
You may need to give a specific id to the hiperlink where you want your ajax call to work and then change the selector based on that.
ex:
<a id= "my-link" href="" >ddd</a>
$("a#my-link").click()