I used ui-tabs ,this is the code iam used:
<script type="text/javascript">
$(function () {
$('#tabs').tabs({ event: '' });
});
function validateContact() {
var fname = $('#first_name1').val();
if (fname == '') {
alert("Enter Name");
} else {
$('#tabs').tabs({ event: 'click' });
doitcontact();
}
}
function doitcontact() {
var cnt = $("#frmdocontact").serialize();
$.ajax({
type: "POST",
url: "doitcontact.php",
data: cnt,
success: function (msg) {
var spt = msg.split('#$#$');
//alert(spt);
$('#hid_uid').val(spt[0]);
$('#custom').val(spt[0]);
$('#hid_add_vehicle').val(spt[0]);
$('#hid_saleid').val(spt[1]);
var valreturn = $("#return").val();
if (valreturn) {
valreturn = valreturn + "?cntdoit=" + spt[0];
$("#return").val(valreturn);
}
//alert(msg);
//console.log(contactSent);
var pkg = $('input:radio[name=pkg]:checked').val();
var $tabs = $('#tabs').tabs();
var selected = $tabs.tabs('option', 'selected');
$tabs.tabs('select', selected + 1);
//window.location="thankyou.php"
}
});
}
</script>
<ul>
<li id="tabVInfo">Contact Information</li>
<li id="tabVCond">Vehicle Information</li>
<li id="tabVPhoto">Additional Vehicle Information</li>
<li id="tabVCheck">Check Out</li>
</ul>
<div id="tabs-2">
<form id="frmdocontact" name="frmdocontact" method="post">
<input id="first_name1" maxlength="40" name="first_name" size="20" type="text" />
<input type="button" id="sub" name="sub" value="Next >>" class="next-product" onclick="validateContact();" />
</form>
</div>
<div id="tabs-">hhhhhhhhh</div>
<div id="tabs-4">kkkkkkkk</div>
<div id="tabs-5">llllllllll</div>
I want to remove the clicked event when the page is loaded.That is working correctly.
Then i have to be able to click on tabs if already filled out data. so if i filled out page 1 and 2 and am on 3 then they should be able to click on the 1 or 2 tab and it should have the already entered data in it.
Here page 1 and 2 means divs.In my code when i load the page the tabs are not clickable.Then i enter datas into page 1 and click on nex button then it goes to 2nd page and all tabs are now clickable.
But i actually need to page 1 tabs pnly shoud be clickable.
How can i do this?
Can anyone have solve it?
if there is any solution for that?.............
Give a solution ASAP...........
Just remove the {event: ''} inside your tabs calling to enable all clicks. Then you change the HREF of the tab you want to disable. In this example I have disabled the check out tab.
$("#tabs").tabs();
$("#tabVCheck > a").attr("href", "#");
you can test it here:
http://jsfiddle.net/nKsZF/28/
Related
Below is the script works fine with hover but need it to be either a toggle or a click function if anyone has any ideas on how to achieve this.
it collects data from different php files depending on the button that is hoverd over thats fine but when working on the page it pops up all the time kind of annoying
<script type="text/javascript">
$(document).ready(function(){
$(".container").hide();
$(['btn1', 'btn2', 'btn3']).each(function(){
var btn = this;
var con = $("#"+btn).children('.container');
$("#"+btn).hover(
function(){
$(".hover").mouseout();
$(this).addClass('hover');
var cache = $(con).children('p');
//check to see if content was loaded previously
if(cache.size()){
con.show();
}else{
$(con).show();
$(con).html('<img src="imgs/loader.gif" alt="Loading..." />');
$.ajax({
url: 'data/'+btn+'.php',
type: 'get',
success: function(data){
$(con).html(data);
}
});
}
},
//mouseout
function(){
if($.browser.msie){
$(con).hide();
}else{
$(con).fadeOut(250);
}
$(this).removeClass('hover');
}
);
});
});
</script>
<div id="btn1" class="wrapper">
<div class="button">
<p><i class="fa fa-users" aria-hidden="true"></i></p>
</div>
<div class="content">
</div>
</div>
<div id="btn2" class="wrapper">
<div class="button">
<p><i class="fa fa-comments" aria-hidden="true"></i></p>
</div>
<div class="content">
</div>
</div>
Thanks guys i figured out how to do this and also make the coding less.
so what it does is you create the dropdown button with the btn1 id
and the next button with id of btn2.
the parsing php files called btn1.php you code what you need to display the data in the content div of the buttons
Aaaargh sorry seems like only the first button works shows the conent div and closes when clicked but subsequent new buttons show the content div Ajax requests are all fine
but dont close when clicked again
<script>
$(".wrapper").click( function()
{
var btn = $(this).attr('id');
var conte = $('.content').css('display');
var con = $(this).children('.content');
if (conte == 'block') {
$(con).css('display','none');
} else if (conte == 'none') {
$(con).css('display','block');
$(con).html('<img src="imgs/loader.gif" alt="Loading..." />');
$.ajax({
url: 'configuration/'+btn+'.php',
type: 'get',
success: function(data){
$(con).html(data);
}
});
}
});
</script>
here's my HTML:
<body>
<div class="container">
<img src="2.png" />
<div id="colorChange"></div>
</div>
<div class="colorChoice">
<form id="colorChoiceForm">
<ul id="colorListParent">
<li class="noButton">
<input type="radio" name="colorGroup" value="aaa12" id="aaa12" />
<label style="background-color:#d21212" class="colorPick" for="aaa12"></label>
</li>
<li class="noButton">
<input type="radio" name="colorGroup" value="daaa" id="daaa"/>
<label style="background-color:#202020" class="colorPick" for="daaa"></label>
</li>
</ul>
</form>
</div>>
</body>
and JS:
function load() {
document.getElementById("colorListParent").addEventListener("click", function(e){
var bgrColor = (e.target.style.backgroundColor);
console.log(bgrColor);
console.log(typeof bgrColor);
document.getElementById("colorChange").style.backgroundColor = bgrColor;
});
}
window.onload = load;
Until I binded labels with buttons with for/id script worked - bby that I mean background color of #colorChange changed to color of clicked label.
Now var bgrColor returns two strings - first one of them is color I need, but the second one is empty and color of #colorChange doesn't change.
Where's problem?
Once you start using label[for], you'll have to approach it in a different way because your "click" event will be fired twice - once for the label and once for the radio button (which gets selected automatically. Here is a working fiddle and below is the changed JS code.
function load() {
document.getElementById("colorListParent").addEventListener("click", function(e){
//alert(e.target.id);
if(e.target.id) {
var selector = 'label[for=' + e.target.id + ']';
var label = document.querySelector(selector);
var bgrColor = label.style.backgroundColor;
//alert(bgrColor);
//alert(typeof bgrColor);
document.getElementById("colorChange").style.backgroundColor = bgrColor;
}
});
}
window.onload = load;
when you are clicking the label, the 'input' DOM element is clicked as well, so you basically have 2 'click' events.
try adding something like that:
if(bgrColor && bgrColor.length>0){
document.getElementById("colorChange").style.backgroundColor = bgrColor;
}
I use jquery mobile build a alarm project, i created two page in my index.html, when i click Add Alarm button, the dialog page show up, then i can set the alarm date and time, I want to use setInterval to trigger alarm when i click save button.
But in found that, the function in setInterval doesn't work. How could this happen?
Below is my html file:
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Share Alarm</h1>
Add Alarm
</div>
<ul data-role="listview">
...
</ul>
</div>
<div data-role="page" id="addNewAlarm">
<div data-role="header">
<h1>New Alarm</h1>
</div>
<div data-role="content">
<form action="" method="post" data-ajax="false" id="setAlarm">
<div data-role="fieldcontain">
<input id="alarmTitle" type="text" placeholder="title" data-inline="true"/>
<input id="alarmDate" type="date" data-role="datebox" name="alarmdate"
data-options='{"mode":"calbox","useFocus": true, "useNewStyle":true}' class="ui-icon-datebox"
readonly/>
<input id="alarmTime" type="datetime" data-inline="true" data-role="datebox"
data-options='{"mode":"timeflipbox","useFocus": true, "useNewStyle":true}'
class="ui-icon-datebox"/>
</div>
<input type="submit" value="Save" data-inline="true" data-icon="check" id="saveAlarm"/>
</form>
</div>
<div data-role="footer"></div>
</div>
and this is my js file:
$(document).ready(function () {
$("#saveAlarm").click(function () {
var deStr = $("#alarmDate").datebox('getTheDate').toLocaleDateString();
var dtStr = $("#alarmTime").datebox('getTheDate').toTimeString();
setTimer($("#alarmTitle").val(),deStr,dtStr);
setInterval(function(){alert(1111);},1000);
alert(123);
});
});
function setTimer(title,dateStr,timeStr) {
var timer = setInterval(function(){
var now=new Date();
console.log(now.toTimeString());
if(now.toLocaleDateString() == dateStr && now.toTimeString() == timeStr){
alert("Alarm "+title+"has gone off !");
// clearInterval(timer);
}
},1000);
return timer;
}
Both two setInterval function didn't work. What's wrong with my code?
I finally figure it out, Same like #Khanh TO commented, i used below js code instead of my original one, and it works well now.
var timer=[],timerId,deStr,dtStr;
$(document).on("pagehide", "#addNewAlarm", function () {
$("#saveAlarm").click(function () {
deStr = $("#alarmDate").datebox('getTheDate').toLocaleDateString();
dtStr = $("#alarmTime").datebox('getTheDate').toTimeString().substring(0, 5);
if ($.inArray(timerId,timer) == -1) {
setTimer($("#alarmTitle").val(),deStr,dtStr);
timer.push(timerId);
}
});
});
function setTimer(title, dateStr, timeStr) {
var timer = setInterval(function () {
var now = new Date();
console.log(now.toTimeString());
if (now.toLocaleDateString() == dateStr && now.toTimeString().substring(0, 5) == timeStr) {
alert("Alarm " + title + "has gone off !");
clearInterval(timer);
}
}, 1000);
return timer;
}
jQuery Mobile automatically enhances pages by registering its functions to handle the jQuery ready. If you want to include custom JavaScript
in a document, you have to take care not to have your code executed before jQuery Mobile has finished
processing the document. This means you have to wait for a different event, called pageinit
$(document).on("pageinit", function() {
//Your code.
});
Or you could try delegated event:
$(document).on("click","#saveAlarm",function () {
var deStr = $("#alarmDate").datebox('getTheDate').toLocaleDateString();
var dtStr = $("#alarmTime").datebox('getTheDate').toTimeString();
setTimer($("#alarmTitle").val(),deStr,dtStr);
setInterval(function(){alert(1111);},1000);
alert(123);
});
I have a ASP.NET MVC webpage that submits a form with ajax like this :
function ValidateFormAndAjaxSubmit(formId, callingElement) {
if (IsNotDblClick(callingElement.id)) {
var _form = $("#" + formId);
var validator = _form.validate();
var anyError = false;
anyError = !_form.valid();
if (anyError) {
window.latestClick = '';
return false; // exit if any error found
}
$.post(_form.attr("action"), _form.serialize(), function (data) {
if (data.success && data.redirectUrl.length > 0) {
window.location.href = data.redirectUrl;
}
else {
var isValid = validateResponse(_form, data);
window.latestClick = '';
}
})
}
}
All control in the form is generated with helpers like Html.TextBoxFor and so on and this works great.
The problem is that a jquery plugin(Select2) will turn a regular textbox into a list like this :
<div class="floatLeft">
<label class="controlTitleContainer" for="Url">Taggar</label>
<br style="clear:both;">
<div class="select2-container select2-container-multi bigdrop" id="s2id_txtTagBox" style="width: 408px"> <ul class="select2-choices" style=""> <li class="select2-search-choice"> <div>Film </div> </li><li class="select2-search-choice"> <div>Hund </div> </li><li class="select2-search-field"> <input type="text" autocomplete="off" class="select2-input valid" tabindex="0" style="width: 10px;"> </li></ul></div><input style="width: 408px; display: none;" class="bigdrop" id="txtTagBox" name="Tags" type="text" value="">
</div>
You can here see that the textbox is set to display none while the added tags is shown like a ul list. In this case I have added Film and Hund to the list.
I need these values to be sent to the service(with the above ajax call), the question is how?
From what I can tell from the documentation, select2 is designed work with select lists, not textboxes. Try generating a select list instead of a textbox.
Look at the source for "Multi Valued Select Boxes" in the examples, the underlying markup is a select box, but the plugin generates a div to make it look like a textbox.
I have the following html
<div id="personalText" >
<div class="display">
edit
<p id="descText">{{profile.desc}}</p>
</div>
<div class="edit" style="display:none;">
<textarea cols='40' rows='9' id="desc_text" style="border:none; display:block;">{{profile.desc}}</textarea>
<input type="submit" value="Update"/>
</div>
</div>
and this is piece of js I have
$("#editButton").click(function() {
$(".display, .edit").toggle();
var desc_text = $("#desc_text").text();
return false;
});
$("input[type='submit']").on("click", function() {
var dec_text = $('#desc_text').val();
$.ajax({
type: "POST",
url:"/users/update_desc/",
data: {
'val': dec_text,
},
}).success(function(){
$(".display, .edit").toggle();
$("#descText").html(dec_text);
});
return false;
});
The problem is that the $("#editButton").click(function() is fired twice if the js snippet below it is present, however if I comment out the $("input[type='submit']").on("click", function() then it is working fine.
Also the textarea should show the text inside it, but it is does not display anything. Although the text is present there but it does not show it.