I currently have multiple links acting as buttons, and each link has a different form with a hidden value storing the ID. The problem is that I'm using bootstrap and it's messing up the styling, and the only way around it seems to be having a single hidden value that will update with the selected ID once a link is clicked.
I currently have <a href="javascript:;" class="list-group-item list-group-item-default" onclick="parentNode.submit();"> as the link, and I've been looking around for a way to edit a value too. Unfortunately, it appears everyone seriously recommends not going down the javascript route and using jQuery instead, but I'm not quite sure how I'd link the two.
I've found this link which has a good example of how to do the jQuery to change values, though I could do with a bit of help putting it together, since I'm not sure if it's possible to use the jQuery code to submit the form as well, or if I should make a separate javascript function to run the jQuery then submit the form.
If there's actually nothing wrong with the javascript route, it looks like this would do the job, just want to check first.
First of all, jQuery actually IS Javascript, it's merely an extention - if you're using jQuery, you are writing Javascript. jQuery just has become so popular that some people mix this up.
You can pass the form you want to be submitted as a parameter to the function like this:
function handleClickAction(formElement) {
// change values
formElement.submit();
}
With your given markup, you could call it like this:
<a href="javascript:;" class="list-group-item list-group-item-default" onclick="handleClickAction(parentNode);">
Of course, you can add more parameters to the function call if you need to know what value to change and/or how.
In general, the solution you are using isn't very elegant and it's redundant, but if you want to go with inline code, this might be an appropriate way :)
So do it in one line if you are doing inline events
onclick="document.formName.elementName.value='foo';this.form.submit();"
Bootstrap's plugins rely on jQuery to function. That being the case, you'll see greater functionality (beyond just css styling) when you add jQuery to a bootstrap design. That being the case, here is a jQuery version which does what you are asking for:
NOTE: revised to answer subsequent questions in the comments. Now uses the index of the element clicked instead of the id, which is what the original post requested, since there is no id attribute assigned to the links.
jQuery(function($) {
$('#form_of_forms a.list-group-item').click(function(e) {
e.preventDefault();
$('#dynamic_form_id').val($(this).index()+1);
$('#form_of_forms').submit();
});
});
Additionally, replace href="javascript:;" with href="#" and remove the onclick="..." attribute from each link entirely.
Related
I am trying to post some data to another php file using ajax. This data is on the link attribute. I am thinking bad guy on the page could inspect the element and change the value of that particular data attribute which i want to stop this from happening using javascript.
for example: <a href='#' data-user_id='25'> Add Friend </a>
How do i let javascript make sure the value of data-user_id still stand the same if a bad guy inspect the page and try to change the value of the attribute ??.
below is my code but its not working the way i want:
<script>
$(document).ready(function(e) {
$(".save").attr("data-user_id").change(function(){
var savefriendbtn = 57;
if($(".save").attr("data-user_id") !== savefriendbtn){
$(".save").attr("data-user_id","57");
}
})
});
</script>
A code example would be much appreciated.
Thank you
Short answer you can't verify the change, even if its doable what prevent the user from inspecting your JavaScript and play or monkey-patch some other code and override your client-side checks,
Client-side checks was never a way to verify valid data, its a way to help but you can't guarantee or depend on it, you should have a back-end validation for this parts of code,
Validate in back-end if this user is not permitted to add this user as a friend, otherwise no issue if he changed the id and add another one as long as he can do that, and you may or may not handle error for this part as actually for me i don't care if an error explode to user if its his fault by hacking.
If I am understanding correctly you need this function to run while the user (or bad guy) browses the page, constantly forcing the id of the element to be 57.
If I am not wrong you wouldn't need jquery.
There are two problems:
var savefriendbtn has a number type, 57, whereas you are setting it as "57", a string.
The problem should be because Document.ready only calls once, i.e. when the page loads for the first time. Hence, you would have set up an event listener or do as follows:
setInterval(function(){document.getElementById('save').data-user_id=57;},1000)
Does it help?
Then and again, the bad guy could simply change the var to another value, preventing the entire mechanism from working. I really hope this helps you.
I am new to stack overflow and this is my first question. Pardon me for any mistakes.
This question is more generic but i tried to search for an answer but could not find it.
Say i have a page and i am using jquery ui button() widget for all the button. What happens is i have a specific class defined for all the buttons on my page. So i can just specify $('.myButtonClass').button(); but whenever i render partial views which has button again i have to do the same thing in the partial views. Is there any way i can globally specify a transition for button or any element for that matter.
Here is a sample Fiddle which adds buttons on click. But the added buttons are not transitions as button widgets(I do not want to use clone).
http://jsfiddle.net/wjxn8/
$('.clsTest').button().click(function(){
$(this).after('<input type="button" value="Added" class="clsTest"/>');
});
Is this possible without:-
1) Adding the css classes for a button widget manually for all the buttons created.
2) Tracking DOM Changes using Javascript and perform transitions for all the button elements.
Thanks for your help!!!
Since you were looking for something else, why not trigger a custom event when you load partials or whatever:
$('.clsTest').button().click(function(){
$(this).after('<input type="button" value="Added" class="clsTest"/>').trigger('addButtonUI');
});
$(document).bind('addButtonUI',function(){
$('.clsTest').button();
});
http://jsfiddle.net/wJXN8/3/
If you trigger your event and have the document listening for it, then you can do whatever you would like. I could have put in there the ability to add more buttons as well, but this should get the point across.
What you are asking for, some event when a button is added.... you would need to come up with that yourself and trigger it when a button is added. There is this: How to detect new element creation in jQuery? which talks about a specific event that is triggered when new elements are added to the DOM. Haven't tested it, and it looks like it may not work on IE.
I'm not a huge fan of this, but you could poll for new buttons. Check out my fork of your fiddle (that sounds funny):
http://jsfiddle.net/lbstr/Hq97H/
Using your example, this would look like:
setInterval(function(){
$('.clsTest').not('.ui-button').button();
}, 1000);
As I said, I'm not a huge fan of this. I understand the desire for something like $.live here, but I still think its better to initialize your new content when you add it. If you are making an ajax call for new content, just initialize it when you add it to the DOM.
My silly polling code and $.live (which is now deprecated) might be convenient, but they perform terribly. Just my two cents. You know your code better than I do!
A kinda of subjective issue I think. I have an action element and want to refer to it in the code for binding event I'm trying to choose between to ways of declaring such things:
1) the first option is more simple and straightforward in declaring and use:
<a class="play">Play</a>
('#menu .play').bind('click',...)
2) but the second option shows explicitly the purpose of the attribute
<a data-action="play">Play</a>
('#menu [data-action="play"]').bind('click',...)
Which should I choose (I'm not going to use selectors in CSS, only in JS code)?
If you're not using it for styles, I'd lean towards data-action="play" because it better describes the purpose (the action is play).
However, if you are planning on getting multiple elements like this and looping over them, I would either use class="play", because then you're treating them like a class of the same kind of thing again.. or use both, class for getting them and data-action to verify, can't go wrong there.
I have a problem embarrassing problem with hidden field not being part of DOM; at least I cannot find it using JavaScript. Field has "id" and "name" attributes, it is in the form, has a value and can be seen when looking at the view source in browser. So, I attach a click handler to a button, which looks for a hidden field using either document.getElementById or using jquery selectors (any combination of the selectors, by Id, by class name etc) and it is not part of DOM. How is this possible, or is it even possible? What could be a cause if this?
Edit:
Markup is huge, so I did not want to paste it in here. My question was basically, is it possible for hidden field to be missing from DOM. Why are people down-voting this? Is it not a valid question?
Maybe the field has been removed, the browsers viewsource doesn't care about changes of the DOM(It is just the response he gets from the server).
Use e.g. firebugs HTML-tab to inspect the current DOM.
Its possible if your javascript code is running as is, ie not inside a DOM ready event, but as in the normal flow of the document. If your javascript code is placed above the html that declares this hidden field, then the browser will execute the javascript before it got the chance to create the elemeent. You are able to see it in view source because by that time the browser has rendered everything.
So my blind guess is that your js code in NOT inside a DOM ready event. I could very well be wrong. Please post the least possible html markup and css and javascript that will reproduce this problem. You may use jsfiddle.net to share the code with us ...
I am trying to write my own Dojo/Dijit Editor Plugin. the only Information i found on the topic is this forum post recommending to use the print plugin as a pattern.
So i did build my own plugin, copying the print plugin and not changing anything apart from the name.
Then i included the plugin to an editor instance.
But instead of getting the print buttons functionality and the print button, i get a button with classes "dijitButtonDisabled dijitDisabled" and no functionality.
The Print button does work though.
Anyone any idea why that is?
In JavaScript events are often hooked onto individual objects, which are referenced by things like id, classes, and other parameters. For this to work you need both the selector and the original element to match.
It sounds like you updated some parts of the code (by changing the names) but did not update the corresponding actions. I'd start by looking for any remaining events bound to the previous names (in jQuery, look for bind() or live()) and changing those selectors to the new names if you find them.