i've been trying to learn yii recently and so i started to work on an simple form with bootstrap. im using yii 1.1.x version not version 2 so i had to install bootstrap manually and write coding based on it.
anyway coming back to the problem it seems that my has-success class is being called correctly by jquery but it does'nt seem so for the has-error...
can someone help and im grateful for your help
<script>
$(document).ready(function() {
$('#contact_name').on('input', function() {
var input = $(this);
var is_name = input.val();
if (is_name) {
$('#contact_name').removeClass("has-success").addClass('has-error');
} else {
$('#contact_name').removeClass("has-error").addClass('has-success');
}
});
});
</script>
<h1>Example Form Validation</h1>
<br>
<div class="form " id="cla">
<?php $form=$this->beginWidget('CActiveForm',array( 'id' =>'form','htmlOptions'=> array('class'=> 'form-horizontal', 'name' => 'forvalidate', 'id' => 'registration-form' ))); ?>
<?php echo $form->errorSummary($model); ?>
<div class="row">
<div class="form-group col-lg-5" id='contact_name'>
<?php echo $form->label($model,'name',$htmloptions = array('class'=>'control-label ',)); ?>
<div class="controls">
<?php echo $form->textField($model,'name',array('name' =>'name' ,'class'=>'form-control col-xs-5', 'aria-describedby'=>'inputSuccess4Status')); ?>
</div>
</div>
</div>
<?php $this->endWidget(); ?>
</div>
<!-- form -->
Try
$('#contact_name').on('input', function() {
var input = $(this);
var is_name = input.val();
if (!is_name) {
$('#contact_name').parent().removeClass("has-success").addClass('has-error');
} else {
$('#contact_name').parent().removeClass("has-error").addClass('has-success');
}
});
I think "has-error" and "has-success" classes don't apply directly on the input but the div where the inputs are
You have to add these classes. See the highlighted code below:
$(document).ready(function() {
$('#contact_name').on('input', function() {
var is_name = $(this).val();
if (is_name) {
$('#contact_name').removeClass("has-success").addClass('has-error');
// ^^^^^^^^^^^^^^^^^^^^^^^
} else {
$('#contact_name').removeClass("has-error").addClass('has-success');
// ^^^^^^^^^^^^^^^^^^^^^^^^
}
});
});
Related
I have this php file which is fetch data from my database and place it into divs. this div created by while loop I want tow div only to be select then send the content to php file using Ajax.
The code execute with no problem but there is no result!!
Any help advance and I completely lost of mind !!!
while($row=mysqli_fetch_array($result)){
$so=$row[0];
$s=$row[1];
$m=$row[2];
$a=$row[3];
$b=$row[5];
$c=$row[8];
?>
<body>
<div id="all"> //start all
<div class="r"> //start r
<div id="e"><?php echo"{$s}"; ?></div>
<div id="b"><?php echo"{$m}"; ?></div>
<div id="a"><?php echo"{$a}"; ?></div>
<div id="b"><?php echo"{$b}"; ?></div>
</div> //end r
</div> //end all
<?php
} //end while
?>
<div id="show"></div>
script code
$(document).ready(function(){
$(".r").click(function(){
$data = $(this).text();
alert($data); //it work well
$.ajax({
url: "view.php",
type: "post",
data: {
you: $data
},
success:function(response){
$('#show').html(response);
}
});
});
});
view.php
<?php
if(isset($_post['you'])){
printf("ok"); //just to check
}
?>
First of all
IDs on a page should be unique
Now coming to your code, maintain a global variable to have select count and call the below function to allow selection of maximum 2 divs
var selectCount = 0;
$('.r div').click(function() {
if(!$(this).hasClass('active') && selectCount < 2) {
$(this).addClass('active');
selectCount++;
}
else if($(this).hasClass('active')) {
$(this).removeClass('active');
selectCount--;
}
else {
alert("ony 2 allowed");
}
});
To send the data to your call you can
$('button').click(function() {
var result = [];
$('.active').each(function(val){
result.push(val);
});
});
You may change the data format accordingly.
I have a page in php home.php and it has views something like this
home.php
<?php
?>
<div id="showView">
Show User
Show Car
</div>
<div id="userView">
<p>This is view where user profile is shown</p>
</div>
<div id="carView">
<p>This is view where user car is shown</p>
</div>
<script>
$(document).ready(function()
{
$("#user").click(function(e)
{
//This where I am confused
var car = $("#carView").html();
$("#showView").append(car);
});
});
</script>
Now I am confused that how to pick userView and append to showView I tried a bit of coding but it didn't help and it didn't show result. Moreover is there any way that when that userView is appended then its html is shown when I view-source a page?
You have two options:
1) you generate the html on the fly using jquery (Not recommended)
<div id="showView">
Show User
Show Car
<div id="view_content"></div>
</div>
<script>
$(document).ready(function()
{
$('.view_trigger').click(function () {
var viewHTML = '';
if ($(this).attr('id') == 'user') {
viewHTML = '<div id="userView"><p>This is view where user profile is shown</p></div>';
} else if ($(this).attr('id') == 'car') {
viewHTML = '<div id="userView"><p>This is view where user car is shown</p></div>';
}
$("#view_content").html(viewHTML);
});
});
</script>
2) show/hide the container on trigger
<div id="showView">
Show User
Show Car
</div>
<div id="userView" class="view_content" style="display:none">
<p>This is view where user profile is shown</p>
</div>
<div id="carView" class="view_content" style="display:none">
<p>This is view where user car is shown</p>
</div>
<script>
$(document).ready(function()
{
$('.view_trigger').click(function () {
var viewHTML = '';
$('[class=view_content]').hide();
if ($(this).attr('id') == 'user') {
$('#userView').show();
} else if ($(this).attr('id') == 'car') {
$('#carView').show();
}
});
});
</script>
I don't recommend any of these solutions, you should use MVC for a better code.
I am trying to use Backstretch to show photos. The plugin requires this code to correspond with a button to display the photo.
$("#someId").click(function(e) {
e.preventDefault();
$.backstretch('http://dl.dropbox.com/u/515046/www/outside.jpg');
});
I have a dynamic site built with PHP, I can loop through my photos to create the thumbnails and links, but I cant get the values into this code. This jQuery code needs to be looped through with the data from the photo PHP loop.
I tried using a .each() loop to grab the data, but still no luck.
Here is what I have so far
$(".id").each(function(){
var id;
var photo;
$(this).attr('id', function(i, val){
id = '#' + val;
$(".img").each(function(){
$(this).attr('src', function(i, val){
photo = val;
});
});
console.log(id)
console.log(photo)
$(id).click(function(e) {
e.preventDefault();
$.backstretch(photo);
});
});
});
Nothing seems, to work, any help would be appreciated.
HTML
<?php
$category = "urban";
$photos = Photo::find_all_category($category);
?>
<script src="js/plugins/jquery.js"></script>
<script src="js/plugins/jquery.backstretch.js"></script>
<div class="row urban">
<div class="col-lg-2">
<div class="row">
<?php foreach($photos as $photo): ?>
<a class="id" id="<?php echo $photo->id; ?>" src="admin/images/<?php echo $photo->filename; ?>"><img class="img-responsive" src="admin/images/<?php echo $photo->filename; ?>" alt=""></a>
<?php endforeach; ?>
</div>
</div>
<div class="col-lg-10">
<div class="backstretch"></div>
</div>
</div>
I changed the format to
$(".id").each(function(){
var id;
var photo;
id = '#' + (this).getAttribute('id');
console.log(id);
photo = (this).getAttribute('src');
console.log(photo);
$(id).click(function(e) {
e.preventDefault();
$(".backstretch").backstretch(photo);
});
});
And also found I was including jQuery twice. Removed it and it works. Thank you!
You can simply target the classname:
$('.id').click(function(ev){
ev.preventDefault();
$(".backstretch").backstretch($(this).attr('src'));
});
I have managed to load the new page into the div (thanks to everyone for your help) but it looks pretty bad (got menu bar and logo, but I only wanted the content), so instead I need to load only a div from the new page. I tried a new script but got redirected to the new page. Please help.
<script>
jQuery(document).ready(function() {
jQuery('.stil_link_img a').click(function(){
var x = $(this).attr("href") + "#content_eco";
jQuery("#new_page").load(x);
return false;
});
});
</script>
<div id="pachete">
<?php
$result=mysql_query("SELECT* FROM imagini");
while($data=mysql_fetch_row($result)){
if( ($data[3]==1)&&($data[2]==2) ){ ?>
<div class="stil_link_img">
<img src="upload/<?php echo $data[1];?>">
</div>
<?php }
}?>
</div>
<div id="new_page">
//some content which should be replaced with my loaded page
</div>
jQuery(document).ready(function() {
jQuery('.stil_link_img a').click(function(){
var $pageContent = jQuery('<div/>').load($(this).attr("href"));
jQuery("#new_page").html(jQuery("#content_eco",$pageContent).html());
return false;
});
});
I assume #content_eco is the divisions ID in the new page(the url from href attribute).
or you can load just the content from the url and avoid the link postback as
<script>
jQuery(document).ready(function() {
jQuery('.stil_link_img a').click(function(){
var x = $(this).attr("rel") + " #content_eco";
jQuery("#new_page").load(x);
return false;
});
});
</script>
<div id="pachete">
<?php
$result=mysql_query("SELECT* FROM imagini");
while($data=mysql_fetch_row($result)){
if( ($data[3]==1)&&($data[2]==2) ){ ?>
<div class="stil_link_img">
<img src="upload/<?php echo $data[1];?>">
</div>
<?php }
}?>
</div>
<div id="new_page">
//some content which should be replaced with my loaded page
</div>
Hope this helps you.
hi i am building a php mysql database pagination page, so i have a list of records 2 rows long at the bottom of the record i want a div which opens up when the span above it is clicked, how do i set up the jquery to make it so that it takes the id of the <p> and expands it in jquery
<span id="button1">Toggle</span>
<p id="p1">
hello<br/>hello
</p>
<script>
$("#button1").click(function () {
$("#p1").slideToggle("slow");
});
</script>
when i output it in php mysql the button will all have a different id and the p will have different ids as well
//Jquery Code which calls toggle_visibility function
$(".pOne").click(function(){
toggle_visibility('partsIdThree');
})
.toggle( function() {
$(this).children("span").text("[-]");
}, function() {
$(this).children("span").text("[+]");
});
//HTML Code
<div id="parts_toogle_one">
<p class="pOne">Add Records <span>[+]</span></p>
<div id="msg_body_one">
<tr><td></td></tr>
</div>
</div>
// Javascript code
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == "inline") {
e.style.display = 'none';
}
else if(e.style.display == "none") {
e.style.display = "inline";
}
}
Something like this..
You can use a dynamic id retrieving, so you don't have to worry about the number of results..
For example:
<?php $i = 0;?>
<?php foreach($resultset as $result) : ;?>
<span class="activator" id="result<?php echo $i;?>">CLICK HERE</span>
<div id="panel_result<?php echo $i;?>">SLIDER DIV</div>
<!-- Do the rest of you processing of $result here; it just doesn't matter, for here you only need some identification, I used a number for convenience. -->
<?php ++$i;?>
<?php endforeach;?>
Your jquery:
$('.activator').click(function(){
var the_id = $(this).attr('id');
var the_panel = $('#panel_' + the_id);
$(the_panel).slideToggle('slow');
});
So you don't have to write a jQuery command for each line you print in php, use just this snippet and it will work out by itself which panel to slide, according to which span is clicked.