How to check dynamically with radio box is selected in the div - php

I need a dynamic function for checking whether a radio box is selected in the div or not.
Actually I want to show an error message every time an user, without selecting the radio button, presses the next button.
I am working on this page. The ILERI means NEXT.
These are the divs. There are 9 div on the page cited above.
<div id="div2" class="targetDiv">
<a id="back" class="ileri-geri" target="1" >GERİ</a> <h1>Cep Çesitleri</h1>
<a class="ileri-geri" target="3">İLERİ</a>
<div class="urunler">
<ul class="urun">
<li><img src="imagesBOX/items/cepsayisi/0.jpg"></li>
<li><p>Cepsiz</p><input type="radio" name="cep_cesitleri" value="0" /></li>
<li></li>
</ul>
<ul class="urun">
<li><img src="imagesBOX/items/cepsayisi/1.jpg"></li>
<li><p>Tek Cepli</p><input type="radio" name="cep_cesitleri" value="1" /></li>
<li></li>
</ul>
<ul class="urun">
<li><img src="imagesBOX/items/cepsayisi/2.jpg"></li>
<li><p>Çift Cepli</p><input type="radio" name="cep_cesitleri" value="2" /></li>
<li></li>
</ul>
<h1>Cep Sayisi</h1><br/>
<?php foreach($Secondresult As $jcRow): ?>
<ul class="urun">
<li><img src="imagesBOX/items/cep_cesitleri/<?php echo $jcRow->image ?>" /></li>
<li><p><?php echo $jcRow->title ?></p><input type="radio" name="cep_cesitleri" value="<?php echo $jcRow->id ?>" /></li>
<li></li>
</ul>
<?php endforeach; ?>
</div>
</div>
<!----2nd page--->
this is javascript which hides all the div and show the div only based on target attribute of tag .
<script type="text/javascript">
$(document).ready(function(){
$('.targetDiv').hide();
$('#divfirst').show();
$(".ileri-geri").click(function(event){
$('.targetDiv').hide();
$('#div'+$(this).attr('target')).fadeIn('slow');
//alert("Redirecting you to jQuery.com!");
});
</script>
Now I want that, If user click on ILERI button without selecting the radio option, then the error mesg will appear, but the function should dynamically show that it handles all the 9 div on this page.

You can check if at least one item was checked with this:
$(".urun input:checked").length() > 0

$(".ileri-geri").click(function(event){
//you have to detect the visable .targetDiv first
if($('.targetDiv:visible input:checked').length() > 0) {
$('.targetDiv').hide();
$('#div'+$(this).attr('target')).fadeIn('slow');
}else{
alert("Error");
}
});

Related

Add eventlistner dynamically using Jquery Ajax with dynamic page of laravel

I have divided my page in two parts. At left I am echoing All results with link and at right I want to display the result by clicking any link any time using Jquery Ajax.
My Blade code is ...
<div id="left" >
<ul>
#foreach($url_data as $url)
<input type="hidden" name="url_hits_id" value="{{url('dashboard'.'/'.$url->id)}}">
<li>
<a class="show_hits">
<p>{{$url->url}} </p>
<p> {{'http//ucut.herokuapps.com/'.$url->key}}</p><br><hr>
</a>
</li>
#endforeach
</ul>
<div id ="right" style="float:left">
</div>
My Jquery code is ....
$(document).ready(function(){
var url = $('input[name=url_hits_id]').val();
$('.show_hits').click(function(){
$.get(url,function(response){
$('#right').html(response);
});
});
});
I want to display the result via ajax. I have one problem with my selector. It is only showing the result of the first <li> element, not all....I also want that at clicking anytime at any <li> tag I want the result of every tag. I have checked the all page individually (without Ajax). All are working fine.
Change your blade like this:
#foreach($url_data as $url)
<input type="hidden" value="{{url('dashboard'.'/'.$url->id)}}">
<li>
<a class="show_hits" onclick="submit({{url('dashboard'.'/'.$url->id)}});">
<p>{{$url->url}} </p>
<p> {{'http//ucut.herokuapps.com/'.$url->key}}</p><br><hr>
</a>
</li>
#endforeach
<div id ="right" style="float:left"></div>
Then in your Js:
$(document).ready(function(){
function submit(url){
$.get(url,function(response){
$('#right').html(response);
});
}
});
I didn't test it but I think it should work.
Let me know if it works :)

How to pass tab id to form action

I have to pass the id of selected tab when another action occurs
<ul class="nav nav-tabs" id="myTab">
<li <?php if($all_index== 1){?> class="active" <?}?> >All</li>
<li <?php if($select_index== 1){?> class="active" <?}?>>Selected</li>
<li <?php if($reject_index== 1){?> class="active" <?}?> >Rejected</li>
</ul>
I have a dropdown to filter the tab data..First tab is always active.
If i want to filter the second tab,then i click the dropdown the action occur..but the tab selected is first one..I want the Second one
If you are looking to capture the value on form submit, create a hidden field in your form. So every time on click, capture the id of the tab and store in hidden field.
<input type="hidden" id-"hidden" name="tab-selected" />
In script
$(document).on("click","#myTab a",function() {
var sel = $(this).attr("href");
$("#hidden").val(sel);
});
so on form post, you will get the selected tab's value.
Here is the fiddle demo
In View
<ul class="nav nav-tabs" id="myTab">
<li <?php if($tab_index== 1){?> class="active" <?}?> >All</li>
<li <?php if($tab_index== 2){?> class="active" <?}?>>Selected</li>
<li <?php if($tab_index== 3){?> class="active" <?}?> >Rejected</li>
</ul>
in Controller
public function FunctionName($value)
{
# code...
// pass which id should be active alone with data
}

Hide a <li tab if a condition is met [duplicate]

This question already has answers here:
Hiding a Div using php
(6 answers)
Closed 1 year ago.
I have a foreach look that checks if user has a picture or not. If the user doesn't have the picture I want to hide a <li> tab that shows the picture.
Inside my else how do I say, for this user hide tab 2?
I tried using echo 'id="tabHeader_2" style:"visibility:hidden"; but that doesn't work. I need a reference to that tab2, don't I?
<div id="picture<?php echo $i ?>" style="display: none;">
<?php
$picture = $user->pic;
if(isset($picture))
{
// show picture.
}
else
{
// hide tab2
}
?>
</div>
Then the list of tabs:
<div class="profiles">
<div id="tabContainer">
<div class="tabs">
<ul>
<li id="tabHeader_1"> Profile </li>
<li id="tabHeader_2"> Picture </li>
</ul>
</div>
<div id="tabsContent">
<div class="tabpage" id="tabpage_1"></div>
<div class="tabpage" id="tabpage_2"></div>
</div>
<script src="<?php echo Yii::app()->theme->baseUrl; ?>/js/tabs.js"></script>
</div>
</div>
Picture of what the page looks like:
I am not 100% sure about your code, but you are using isset() which would not be correct, because you set the variable right behind that check so it will be set 100% of the time. You will want to check empty() or is_file() perhaps, depends on what is in that variable.
<!-- This display: none seems strange if you are going to show the wrapped elements -->
<div id="picture<?php echo $i ?>" style="display: none;">
<?php
$picture = $user->pic;
if(!empty($picture)) {
// show picture.
}
else {
// hide tab2
}
?>
</div>
If you put the real code, it would be easier to see how you are laying out your elements.
Do Like This :-
<div class="tabs">
<ul>
<?php
$i = 1;
foreach($yourarray as $key => $value){
if(isset($value) && $value != '')
?>
<li id="tabProfileHeader<?php echo $i;?>"> Profile </li>
<li id="tabPictureHeader<?php echo $i;?>"> Picture </li>
<?php
$i++;
}
?>
</ul>
</div>

contents of side menu items not showing on click (only the last child content is showing)

Everything is working fine,But the thing is when i click on each menu items, the page just shows the contents of last child.it shows just the value for last Category-> $Category='j_w'.
<ul id="menuV2" class="indicator-market">
<li>Clothing & Accessories</li>
<li>Electronics</li>
<li><a href=#<?php $Category='j_w'; ?>" class="action"data-target="tab" >Jewelries & Watches</a></li>
</ul>
<script>
$('.action').click(function () {
$('#menuV2 a:first').tab('show');
})
</script>
The value pass through the cat.php and it retrieve pictures from database.
<ul id="tiles">
<li><img src="cat.php?Category=<?php echo $Category; ?>" width="190" height="158"><h5>Title1</h5><p>This is the caption</p></li>
</ul>

List of submits in jQuery Mobile menu

I'm using a form with multiple submits to detect which button is clicked, but the list does not appear properly in a jQuery Mobile menu. I want it to appear nicely like in the JQM docs (click the "Menu" button), but it instead appears like in this picture. (In case it isn't obvious, the black boxes were me editing the names out.) What do I need to do to get it to collapse the submit buttons into a nice list like in the docs?
Navigate to different section
<div data-role="popup" id="navmenu">
<form name="navmenuform" action="X.php" method="post">
<ul data-role="listview" data-inset="true">
<li data-role="divider">Navigate to:</li>
<?php foreach ($array as $category) { ?>
<li><input type="submit" name="nav<?php echo $category[0]; ?>" value="Section <?php echo $category[0] . ": " . $category[1]; ?>"></li>
<?php } ?>
</ul>
</form>
</div>
The short answer is don't put submit buttons (at least visible) in listview items.
The problem is that buttons and lisview item's content area have their styling padding, margin, border, etc. Instead of fighting with styling you can just leverage what jQM gives you.
IMHO the simplest way to achieve what you want, if you can live with GET instead of POST, is to ditch the form and populate list items with anchors that href to appropriate urls with parameters and use rel="external" like this:
<div data-role="popup" id="navmenu" style="min-width:210px;">
<ul data-role="listview" data-inset="true">
<li data-role="divider">Navigate to:</li>
<li><a rel="external" href="X.php?nav1=Section 1:1">Section 1:1</a></li>
<li><a rel="external" href="X.php?nav2=Section 1:2">Section 1:2</a></li>
<li><a rel="external" href="X.php?nav3=Section 1:3">Section 1:3</a></li>
<li><a rel="external" href="X.php?nav4=Section 1:4">Section 1:4</a></li>
</ul>
</div>
If you want to be able to POST your form you can utilize a hidden input and a bit of JS code.
Given that you'll produce the following markup:
<div data-role="popup" id="navmenu" style="min-width:210px;">
<form name="navmenuform" action="X.php" method="post" data-ajax="false">
<ul data-role="listview" data-inset="true">
<li data-role="divider">Navigate to:</li>
<li>Section 1:1</li>
<li>Section 1:2</li>
<li>Section 1:3</li>
<li>Section 1:4</li>
</ul>
<input id="param" type="hidden" name="" value="">
</form>
</div>
Don't forget to put data-ajax="false" on your form tag, otherwise jQM by default will try to submit the form via ajax.
You then use click event on a list item, change name and value in your hidden input and submit the form:
$(document).on("pageinit", "#page1", function(){
$("#navmenu ul li a").click(function(e){
//Prevent default behavior since we need to submit the form instead of following the link
e.preventDefault();
//Change name and value attributes in out hidden input
$("#param").attr("name", $(this).attr("href")).val($(this).text());
//Submit the form
$("form[name=navmenuform]").submit();
});
});
Here is jsFiddle

Categories