I have a form with different options provided by radio buttons. I also have a script which displays different divs with different form inputs.
This script works fine, my problem is that I have a “previous” link where a user can go one step back and edit already entered data and that I can’t force the different options with the checked attribute to the radio button. It has to be clicked, which make sense because my script uses the .click event.
But how can I say something like: “If $_SESSION[‘unemployed’] == ‘yes’ then echo ‘checked’” and it shows the right option.
I hope I explained myself correctly otherwise fell free to ask.
Please see the code live here http://jsfiddle.net/GEFMX/1/ and my question is if one or more or the checkboxes default is "checked".
The Javascript I’m using looks like this:
<script type="text/javascript">
$(function() {
$("input[name$='step2_student']").click(function() {
var diffoptions = $(this).val();
$("div.studerende_janej").hide();
$("#studerende" + diffoptions).show();
});
$("input[name$='step2_otheredu']").click(function() {
var diffoptions = $(this).val();
$("div.othereducation_janej").hide();
$("#othereducation" + diffoptions).show();
});
$("input[name$='step2_haveeducation']").click(function() {
var diffoptions = $(this).val();
$("div.haveeducation_janej").hide();
$("#haveeducation" + diffoptions).show();
});
});
</script>
Sincere
- Mestika
You can add some code to your page load to trigger a 'click' for all radios that are checked. i.e. something like:
$(function() {
// .. bind your click events here
$('input[type="radio"]').each(function() {
if($(this).prop('checked')) $(this).click(); // trigger 'click' if checked
});
});
At the end of your document ready, add $("input[name~='step2_']:checked").click(). This will trigger the click event for already checked radio buttons, effectively displaying the divs.
Related
I have a serious problem about Fancybox. I have a website with an image gallery. Users can report images if there is any abusing data on the image.
At the moment I am using Fancybox to display the report form. I am validating the input fields with jQuery and submit data with AJAX and the scripts are on the parent page.
report
This works perfectly. But if the user opens the link in new tab or new window, a problem arises because the validation scripts are not on the report form. Those are on the parent page.
So is there any way to stop right clicking or clicking mouse scroll or how will I overcome this problem?
Thanks
Another option is to catch all mouse buttons (left, right and wheel) when clicking over the selector .report and trigger fancybox if any like :
$(document).ready(function () {
$(".report").on('mousedown', function (e) {
if (e.which == 1 || e.which == 3 || e.which == 2) {
e.preventDefault();
$(this).fancybox({
// API options
}).click();
}
return false;
});
$(document).on('contextmenu', function (e) {
e.preventDefault();
});
});
See JSFIDDLE and try any mouse button over the thumbnails.
NOTE: .on() requires jQuery 1.7+
You could invoke fancybox via the function call on a div or input.button element
<input type="button" value="click here" class="fake-fancy" data-href="linktothereportform?id=5">
<span class="fake-fancy" data-href="linktothereportform?id=5">Report</span>
<script type="text/javascript">
jQuery('.fake-fancy').click(function(){
jQuery.fancybox.open({
href: jQuery(this).attr('data-href'),
type: 'ajax'
});
});
</script>
You can void the right click and middle click options by replacing all such links with buttons.
i.e.
$('a.report').replaceWith('<button onclick="window.location.href=\'linktothereportform?id=5\'">report</button>');
You may need to tweak the above a bit, plus style the buttons to look like links etc. but the general idea is to get the 'open-in-same-window' functionality while voiding all 'open-in-new-window' possibilities.
All the credit should got to the people who gave their correct valuable answers for my question.
I decided to make a good answer for people who will seek answers for this question in future.
I would basically divide my answer into two section.
As for my original question I needed a solution with hyperlinks.
So the first method is hyperlinks
As #Jeemusu’s comment.
Fancybox use AJAX to load content. There's an HTTP variable set called HTTP_X_REQUESTED_WITH, which will be set and set to 'xmlhttprequest' if it's an AJAX request.
So even someone opens the links in new tab we can check whether it is AJAX or non-AJAX and display content according to that. So no worries about right clicking.
<?php
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
//this is an ajax request. do what you need to
}
else {
//this is non ajax. do what you need
}
?>
Second option is to change the hyperlinks as a button or any div.
General idea is to get the 'open-in-same-window' functionality while voiding all 'open-in-new-window' possibilities.
As #Scuzzy’s and #techfoobar’s answers
<input type="button" value="click here" class="fake-fancy" data-href="linktothereportform?id=5">
<span class="fake-fancy" data-href="linktothereportform?id=5">Report</span>
<script type="text/javascript">
jQuery('.fake-fancy').click(function(){
jQuery.fancybox.open({
href: jQuery(this).attr('data-href'),
type: 'ajax'
});
});
</script>
OR
jQuery('a.report').each(function(){jQuery(this).replaceWith('<button onclick="window.location.href=\'' + jQuery(this).attr('href') + '\'">report</button>');});
You can replace that link by a button which will not let the user to open that in new tab. You can do it like this :
<button onclick="window.location='linktothereportform?id=5';" class="report fancybox.ajax" style="color:#CC0033;">report</button>
I am echoing out a list of content from my database and have a star icon next to each item. I tried to make it so that when the user clicks the star it will find that content in my database and change the 'popular' value in that field (a 'like' button). I have been trying to do this by having each star wrapped in a tag and then making the id of each form 'formWithId'x ...... x being the id of the content that is being displayed.
Here it is in code:
echo "<form method = 'post' class ='formId".$row['id']."' id = 'likePostWithId".$row['id']."'>";
//all inputs are hidden and send the 'id' value of the content so the php file will know which field of the table to like in the mysql database
echo "<input type ='text' name = 'email' style = 'display: none;' value= '".$row['email']."' >
<input type ='text' name = 'id' style = 'display: none;' value= '".$row['id']."' >
//this is the star icon
<i class = 'ss-icon' id = '".$row['id']."'>⋆ </i>";
echo "</form>";
So, now what i need is to be able to send the form by using jquery validate.... but the problem i am having is that I have always used jquery validation (using the submit handler) to submit specific forms whose id's are predefined and dont change based on the id of the content sent from the database.
Here is my example that i am trying to
$(document).ready(function(){
$(".ss-icon").click(function(){
var id= $(this).attr('id');
$("#likePostWithId"+id).submit();
});
});
$(function(){
$(".ss-icon").click(function(){
//this doesn't work...
$("#likePostWithId").validate({
submitHandler:function(data){
//do stuff
}
)};
)};
see where $("#likePostWithId")... i dont know how to make it choose the one with the correct id (example $("#likePostWithId"+id)) would interpret as #likePostWithId6 or $likePostWithId7 where the number is the id of the mysql content
anyway i have no clue if this will be clear to any of you... I don't really know how to ask this question.. But basically i need to send an id (the id of the content from mysql) to php form without reloading page
any help is appreciated.
thanks
You may achieve this using jQuery's Ajax. Simply give each star icon a unique id (this id should have some relation with the MySQL data, like index key). Pass this argument (the id) using jQuery's Ajax function to a php script which takes the data (unique for each MySQL entry, like index) which changes it's popularity field entry. On success function, you may give some animation or color change to star icon informing that the data is successfully posted. just give it a try.
try this
$(function(){
$(".ss-icon").click(function(){
var id= $(this).attr('id');
$("#likePostWithId" + id ).validate({ <--- here
submitHandler:function(data){
$("#likePostWithId"+id).submit();
}
)};
)};
this however submits the form... you can use ajax to submit the form wihtout reloading
Maybe you can use $.post() to solve your problem. Then you don't have to mess around with forms:
$(document).ready(function(){
$(".ss-icon").click(function(){
$.post('yourPHPUrl', { contentID: $(this).attr('id') }, successFunction);
});
});
function successFunction(data) {
if (data.success) { //just a sample, you can give a JSON-Object back to the success function
$('#' + data.ID).css() ... // do something with the clicked star
}
}
Your code:
$(function(){
$(".ss-icon").click(function(){
//this doesn't work...
$("#likePostWithId").validate({
submitHandler:function(data){
//do stuff
}
)};
}); // <-- this was missing
)};
You were missing a set of brackets but you still shouldn't implement it like that. You are merely re-initializing the plugin on every click. (The plugin already has the click event handler built-in and it's captured automatically.)
.validate() must be called once within the DOM ready to initialize the plugin. As per documentation, the submitHandler callback function is "the right place to submit a form via Ajax after it validated."
$(function(){
$("#likePostWithId").validate({ // initialize plugin
// other options & rules,
submitHandler: function(form){
// do ajax
return false; // blocks form redirection since you already did ajax
}
)};
)};
Play with a demo: http://jsfiddle.net/XnfDc/
I have filter-from with ajaxSubmitButton.
CHtml::ajaxSubmitButton('Show',Yii::app()->createUrl('office/ajaxFilter'),array('update'=>'#office-install'),array('id'=>'filterSubmit'))
And i want to submit it on pageLoad (to recive data using default filter values). How to trigger click on ajaxSubmitButton?
using
$(document).ready(function () {
$('#filterSubmit').trigger('click');
}
raise redirect.
If I understand your problem correctly, you need to trigger the click on #filterSubmit element to run some actions associated with it, but without having the page following the regular click, if so:
UPDATE YOUR CODE TO THIS:
$(document).ready(function () {
// bind a click event to the button
$('#filterSubmit').bind('click', function(e) {
// the browser from following the click
e.preventDefault();
});
// trigger the click on the button
$('#filterSubmit').trigger('click');
// unbind the click event to allow the normal usage of that button
$('#filterSubmit').unbind('click');
}
This assumes that you have some click events binded to the #filterSubmit... If that is not the case, perhaps a more elaborated question cold allow us to help you out!
EDITED
By the comment you've just post, you can do something like:
YOU CODE (with a minor fix):
$(document).ready(function(){
$('#filterSubmit').trigger('click');
}); // was missing ); here
WITH Yii Framework
<?php
// the script string
$ourscript = "$('#filterSubmit').trigger('click');";
// Yii’s registerScript
Yii::app()->clientScript->registerScript(
'filtersubmitclickscript',
$ourscript,
CClientScript::POS_READY
);
?>
This topic has been covered many times here:
https://stackoverflow.com/search?q=click+trigger+jquery
You might get issues in several browsers with the trigger because of security restrictions.
I am using a form that shows different (extra) fields based on the onChange selection of the following drop down list.
What I did, I get the value and if the value equals to an IF statement it displays the correct extra field for the selected category. This procedure is done with a reload of the page.
My question is how can I build it using Ajax and avoid reloading? An Ajax call on the OnChange otion maybe..
Thank you!
<select
onchange="if(this.options.selectedIndex>0) window.location.href = 'http://mypage/?something&value=+this.options[this.options.selectedIndex].value"
class="select" id="termid" name="termid">
<option value="46">CARS</option>
.
.
</select>
this is something I found from a tutorial
$(function() {
$('#sel').change(function() {
$("input").hide().filter("." + $(this).find("option:selected").val()).show();
});
$("input").focus(function() {
$(this).next("span").fadeIn(1000);
}).blur(function() {
$(this).next("span").fadeOut(1000);
});
});
and the css that hides everything
input{
display:none;
}
span
{
display:none;
}
There are a few steps to transform a new page load in an ajax call on the same page:
You need to make a php file that just returns the html for the extra fields (no head, body, your select, etc.)
You need to change your event handler. As you are using jQuery, you can remove all inline javascript and just replace it with $('#termid').change(function() { // your ajax stuff here });
The easiest ajax call in jQuery is the load() method so you could use that like $('#some_div_below_select').load('your_new_php_file.php&value=' + $(this).val());. That puts the contents that are generated with you new php file in the element with ID some_div_below_select.
In the part where I put your ajax stuff, you can add the necessary checks like the if statement you have now.
To sum up the javascript part (I changed the way the parameter is passed):
$(document).ready(function() {
$('#termid').change(function() {
$('#some_div_below_select').load('your_new_php_file.php', { "value" : $(this).val() });
});
});
Use the javascript change event. Bind that event to the select list and make the ajax call to update the list when change is fired.
If using JQuery nice and easy and lots of documentation
I want to be able to either Press the enter key or click the mouse to submit the info in the inputbox.
Right now when you manually change focus using tab or click with mouse it will submit the info. It is using the jQuery live Click method.
I found this solution for setting focus to a button
Setting focus to a button next to a text box
but I don't know how to implement that so I can listen using the live click and do either or. A mouse click or the enter button. Any help is appreciated.
example: be able to do this using either the enter button with focus or a mouse click.
$('#theinput').keypress(function(event) {
if (event.keyCode == '13') {
$('#mybutton').click();
event.preventDefault();
}
});
Problem is I don't know how to convert that example to also use something like this
$('a.button').live('click',function(){
//do stuff here
)};
I would do this using a named function:
$(document).ready(function(){
var submitter = function() {
// do something
};
$('#theinput').keypress(function(event) {
if (event.keyCode == '13') {
event.preventDefault();
submitter();
}
});
$('a.button').live('click', submitter);
});
This uses the same function for both events without triggering another unnecessary event, which would cause performance issues.
I think if you change this:
$('a.button').live(click,function(){
to this:
$('a.button').live("click",function(){
it should work