I have this code
jQuery its an add new input field
var scntDiv = $('.q3_field');
var i = $('.q3_field p').size() + 1;
$('.add_field_q3').live('click', function() {
$('<p><span class="added'+i+'"><input type="text" name="inputq3['+i+'][q3]" class="edit-text" placeholder="http://www.domain.com" /></span> <img src="hw_img/trash.png" id="remScnt" /></p>').appendTo(scntDiv);
i++;
return false;
});
$('#remScnt').live('click', function() {
if( i > 1 ) {
$(this).parents('p').remove();
i--;
}
return false;
});
HTML - where it will be added
<div class="simpleTabs">Questions</div>
<div id="questions">
<li class="q3_field">
List five (URL) links you would like to be displaced/removed in search engine results related to your name/keywords. These can be named below or marked on a print out of a relevant Google search. <br />
<img src="hw_img/plus.png" class="add_field_q3" />
<input type="text" name="inputq3[0][q3]" class="edit-text" placeholder="http://www.domain.com" /> <br />
</li>
</div>
I am using simpleTabs jQuery where i put my simple hard code of adding input fields.
But when i click it to add, it double the field.
please see the image below.
I try that outside of the simpleTabs jQuery, it doesn't double the field when i click the add button.
Yes when im not going to use the simpleTabs.
Is there any conflict from from simTabls that i download from google? That is why it double the field when i click add button?
the codes of tab which i put it on the footer.
<script src="hw_js/jquery.easytabs.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready( function() {
$('#tab-container').easytabs();
});
</script>
UPDATE
the weird part is that when i check it on fireBug
it also double the span and id which is the same 1 and 1 2 and 2 please check the image below.
Related
What I want to do is simple in words but I have no idea how to actually do it.
I have a Div ID/Class given to a container in an HTML file.
Now I want to add a checkbox or button in a php file which can hide and show the div element on HTML file.
What I want to do:
Normally vislble to everyone.
I checked hide open and clicked submit.
Remove the container or change the visibility to none.
If i understood you right try this :
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_show
just change buttons to checkbox, and do some checking, if checkbox is checked make hide else show
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#showHide').change(function(){
var c = this.checked ? $("p").show() : $("p").hide();
});
});
</script>
<p>If you click on the "Hide" button, I will disappear.</p>
<input type="checkbox" id="showHide" name="showHide" value="Show">Check it
Use this Javascript (you don't have to use Jquery):
<script type="text/javascript">
function showHide(thediv){
id = document.getElementById(thediv).style;
id.display = (id.display != 'inline')? 'inline' : 'none';
}
</script>
Then define the div that you want to hide:
<div style="display:none" id="my_div">
Hello World or any other HTML
</div>
Now - set your radio button some where in your code, and trigger the show script upon click:
<input type="radio" onclick="showHide('my_div')" />
If you want the div to be shown as default, change to
<div style="display:inline" id="my_div">
Or just completely remove the style.
I'm trying to code a todo list form. this form can contain unlimited rows. the rows each contain a text input field with 2 buttons beside it. 1 of the buttons adds a new row below, the second button deletes the row.
The problem is, when I click the add button a bunch of times, it removes ALL of the elements that were added below it when i click on the delete icon for that row.
I hope im making sense, maybe the code will explain whats going on.
Heres the PHP code for the todo-list form page:
<div class="table table-todo">
<?php include 'projects-add-task.php'; ?>
</div>
Here is the contents of projects-add-task.php:
<div class="field">
<input type="text" name="task[]" />
<img src="images/icon-todo-add.png" alt="" onmouseover="this.src='images/icon-todo-add-h.png'" onmouseout="this.src='images/icon-todo-add.png'" />
<?php if ($_GET['show_delete'] == 'yes') { ?>
<img src="images/icon-todo-delete.png" alt="" onmouseover="this.src='images/icon-todo-delete-h.png'" onmouseout="this.src='images/icon-todo-delete.png'" />
<?php } ?>
<div style="clear: both;"></div>
</div>
Here is the jquery that isnt working 100% correctly:
$('.todo-add').live('click', function (e) {
e.preventDefault();
$parent = $(this).parent('.field');
$.get('projects-add-task.php?show_delete=yes', function (data) { $parent.append(data); }, 'html');
});
$('.todo-delete').live('click', function (e) {
e.preventDefault();
$(this).parent('.field').remove();
});
I had to use live for the .todo-add icon because it was not working obviously for the newly appended rows. however im unsure if this is necessary for the .todo-delete icon, but i did it just to be sure.
Any help would be greatly appreciated with this issue.
I think you need after and not append:
function (data) { $parent.append(data); }
should be
function (data) { $parent.after(data); }
Also, live is actually deprecated now. You should be using on.
you are adding many divs with the class "field" and then asking jquery to delete them on the delete button.
you need to either have unique ID for each row and then delete that ID element os simply work witht he parent of the delete button, no need to specify the '.field' in the parent()
$('.todo-delete').live('click', function (e) {
e.preventDefault();
$(this).parent().remove();
});
I'm trying to display multiple checkboxes and then submit the selected checkboxes as HTTP GET (i.e. as parameters in URL string) to the same script:
Here is my simplified test code - test.php:
<html>
<head>
<style type="text/css" title="currentStyle">
#import "http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css";
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$('#name').dialog({ autoOpen: false, modal: true });
});
</script>
</head>
<body>
<form>
<p><input type="button" value="Select name"
onclick="$('#name').dialog('open');"></p>
<div id="name" title="name">
<?php
$NAMES = array(
'project one',
'project two',
'project three',
);
foreach ($NAMES as $name) {
printf('<p><label><input type="checkbox" name="name" value="%s">%s</label></p>',
urlencode($name),
htmlspecialchars(substr($name, 0, 120))
);
}
?>
</div>
<input type="submit">
</form>
</body>
</html>
But for some reason, when I select the first 2 checkboxes click the "Submit" button (sorry for the non-English name in the screenshot), then the script http://myserver/test.php? is being submitted and not http://myserver/test.php?name=project+one&name=project+two as I would expect.
If I get rid of all JQuery UI stuff, then it works.
What am I doing wrong? (besides using name="name" which is because that's a database table column name and doesn't seem to be the reason for this problem anyway)
UPDATE:
In my real program (not the above test case) I actually have several such dialogs and would like to set some settings in each dialog and only after that that click a Submit button. So the Submit button must be outside the dialog(s).
Thank you!
Assuming all the form inputs are checkboxes you can use the following to compile and submit the details as a GET.
using your original code add the following function
function compileInputs(){
var string = '';
var inputs = new Array();
//loop through all checkboxes
$(':checkbox').each(function(){
if($(this).is(':checked')){
inputs.push($(this).attr('name')+"="+$(this).val());
}
});
string = "?"+inputs.join("&");
window.location.replace(string);
}
you will need to change the names of the inputs from name='name' to name='name[]'
then change the submit to a button as follows:
<input type="button" onClick='compileInputs()' value='submit'>
you will no longer need the <form> tags
for a more selective approach:
//get all checkboxes from div#name
$('div#name :checkbox').each(function(){
if($(this).is(':checked')){
inputs.push($(this).attr('name')+"="+$(this).val());
}
});
//get all checkboxes from div#appsversion
$('div#appsversion :checkbox').each(function(){
if($(this).is(':checked')){
inputs.push($(this).attr('name')+"="+$(this).val());
}
});
//get all checkboxes from div#osversion
$('div#osversion :checkbox').each(function(){
if($(this).is(':checked')){
inputs.push($(this).attr('name')+"="+$(this).val());
}
});
You may need to wrap the whole form in a div and then dialog the new div in the dialog rather than just the div #name
Try this:
$("#submitButton").click(function(){
$("#formId").submit();
});
Should you not do name="name[]" . Then on the form submit (however you submit it (AJAX or non AJAX), you can get the "name" array as your post variable and handle it as you may wish. Correct me if I am wrong
Assuming the dialog is actually the problem, you may have to have your dialogs populate some hidden fields on the page to actually submit.
Here is a very simple sample to get you started.
http://jsfiddle.net/jUH9g/
When you click ok in the dialog it populates the 'names' textbox inside the form that actually gets submitted. In your real code you would change input type="textbox" to input type="hidden"
$("#dlg").dialog({autoOpen: false,
buttons: {
"OK": function () {
var names = "";
$("input:checkbox").each(function () {
if (this.checked) {
names += $(this).val() + ",";
}
});
$("#names").val(names);
}
}
});
Is there a way to hide a form from my users until they click a link and then the form drops down for the user to fill out, by using PHP or JQuery if so how? Is there a tutorial that will teach me how to do this?
Yes, you can do so, you hide the form initially either with jquery or css and the slideDown it down like this:
$(function(){
$('a#link_id').click(function(){
$('form-selector').slideDown('slow');
// prevent default action
return false;
});
});
and to hide it back, you can use the slideUp function:
$(function(){
$('a#link_id_2').click(function(){
$('form-selector').slideUp('slow');
// prevent default action
return false;
});
});
If you want to show and hide using same link, use the slideToggle instead:
$(function(){
$('a#link_id').click(function(){
$('form-selector').slideToggle('slow');
// prevent default action
return false;
});
});
Here is the prototype for your html:
<a id="form_show_hide">Show/Hide Form</a>
<div id="form_container">
<form>
...form elements...
</form>
</div>
and jquery for that:
$(function(){
$('a#form_show_hide').click(function(){
$('#form_container').slideToggle('slow');
// prevent default action
return false;
});
});
and finally here the demo for that
try adjusting the display property of the form using hide and show:
jQuery:
$('#formId').hide();
Yes, there are a number of ways to implement something like this. An Ultra Basic implementation:
<form action="" method="post" id="login_form" style="display: none;">
<label for="username">Username</label> <input type="text" name="username" /><br />
<label for="password">Password</label> <input type="password" name="password" />
</form>
Show Form
You could use any number of jquery plugins and methods for showing the form, including show()/hide(), fadeIn()/fadeOut(), slideUp(), slideDown() (as above) etc. You could use something like FancyBox (or Facybox) to display the form in a 'popup' type window.
Note - For compatibility, I'd suggest not using jquery in the onclick event.
Simple:
http://docs.jquery.com/Show
With effects:
http://jqueryui.com/demos/show/
You can do this with jQuery. You need a click target, then an event bound to the click target and a container for the form. Something like:
<span id="ClickTarget">Click Me!</span>
<div id="FormContainer"> <!-- fill in the form here --> </div>
<script type=text/javascript language=javascript>
$('#ClickTarget').click(function () {
$('#FormContainer').show();
});
</script>
Hi I'm using jQuery and Codeigniter. I'm creating a simple todo list that can add delete entries using ajax.
The problem is whenever I click on my delete anchor, it won't delete the entry. The adding of the entry feature works BTW.
Here's my code:
todo_view.php
<html>
<head>Todo List</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#submit').click(function() {
var msg = $('#message').val();
$.post("<?= site_url('todo/add') ?>", {message: msg}, function() {
$('#content').load("<?= site_url('todo/view/ajax') ?>");
$('#message').val('');
});
});
$('a.delete').click(function() {
var id = $('input', this).val();
$.post("<?= site_url('todo/delete') ?>", {todoid: id}, function() {
$('#content').load("<?= site_url('todo/view/ajax') ?>");
});
});
});
</script>
<body>
<div id="form">
<input type="text" name="message" id="message" />
<input type="submit" name="submit" id="submit" value="Add todo" />
</div>
<div id="content">
<?php $this->load->view('message_list'); ?>
</div>
</body>
</html>
message_list.php
<ol>
<?php foreach ($todolist as $todo): ?>
<li>
<?php echo $todo->todo; ?>
<input type="hidden" value="<?=$todo->todoid ?>" />delete</li>
<?php endforeach; ?>
</ol>
Why doesn't it work?
First and foremost - to track GET/POST headers and values you should start using Firebug (an extension for Firefox). Really makes your life easy to terms of debugging ajax calls and responses.
Next (somewhat on the lines of what alimango mentioned)... the most likely cause is that the message list is being loaded AFTER your main page's DOM has already loaded. jQuery won't automatically bind the click event to elements added later. Your click binding routine has to be called AFTER the message list has been added to the DOM. Now this isn't always possible... as your list is being fetched / altered dynamically.
One solution is to use the live() bind event function that has been introduced since jQuery 1.3. This helps binds a handler to an event (like click) for all current - and future - matched element. Can also bind custom events. Fore more information, see http://docs.jquery.com/Events/live#typefn
Second solution is to use, LiveQuery - a jQuery plugin which "utilizes the power of jQuery selectors by binding events or firing callbacks for matched elements auto-magically, even after the page has been loaded and the DOM updated." You can grab it from http://plugins.jquery.com/project/livequery
Cheers,
miCRoSCoPiC^eaRthLinG