I'm not a javascript expert or even an amateur. I've found some script that I'm playing around with and was wondering how I can create a second variable within the code.
<script type="text/javascript">
$(document).ready(function(){
$("select#type").attr("disabled","disabled");
$("select#category").change(function(){
$("select#type").attr("disabled","disabled");
$("select#type").html("<option>wait...</option>");
var id = $("select#category option:selected").attr('value');
$.post("select_type.php", {id:id}, function(data){
$("select#type").removeAttr("disabled");
$("select#type").html(data);
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("select#model").attr("disabled","disabled");
$("select#type").change(function(){
$("select#model").attr("disabled","disabled");
$("select#model").html("<option>wait...</option>");
var id = $("select#type option:selected").attr('value');
$.post("select_model.php", {id:id}, function(data){
$("select#model").removeAttr("disabled");
$("select#model").html(data);
});
});
});
</script>
In the second piece of code, I would like to get the category id and create another post variable called $_POST[cat_id]. How can I do this again referring to select_type.php in the same piece of javacode?
This is for a 3 piece chained dropdown where..
drop #1 produces drop #2. Drop #1 & #2 together produce drop #3.
All i need to do know is how to add the second variable grabbing it from the first drop down.
Any help is appreciated.
EDIT: I tried to add something like this in, but it doesn't work. The 2nd variable needs to come from the initial first select in the dropdown like the select_type.php file or if somehow the initial value can be stored and carried over to help populate the third select.:
<script type="text/javascript">
$(document).ready(function(){
$("select#model").attr("disabled","disabled");
$("select#type").change(function(){
$("select#model").attr("disabled","disabled");
$("select#model").html("<option>wait...</option>");
var carrier = $("select#type option:selected").attr('value');
$.post("select_model.php", {carrier:carrier}, function(data){
$("select#model").removeAttr("disabled");
$("select#model").html(data);
});
var countryid = $("select#category option:selected").attr('value');
$.post("select_type.php", {countryid:countryid}, function(data){
$("select#type").removeAttr("disabled");
$("select#type").html(data);
});
});
});
</script>
Any help?
This is how you can do it.
var id = $("select#type option:selected").attr('value');
var categoryID = 34;
$.post("select_model.php", {id:id, cat_id:categoryID}, function(data){
$("select#model").removeAttr("disabled");
$("select#model").html(data);
});
And for multiple dropdown please see this : How to handle multiple select dropdown - JQuery. It is using static content, but I hope you can modify it adding required ajax requests in between.
EDIT ---
I misunderstood your request. You will need to set an event handler on the first dropbox. You will need to do something more like this:
$.post("select_model.php", {carrier:carrier}, function(data){
$("select#model").removeAttr("disabled").html(data);
});
$("select#category").change(function(){
var countryid = $("select#category option:selected").attr('value');
$.post("select_type.php", {countryid:countryid}, function(data){
$("select#type").removeAttr("disabled").html(data);
});
});
Related
I want to pass values of multiple checkboxes to mysql using array via ajax(Jquery).
Any ideas?
I wrote two pices of code , maybe some one help me to combine them?
$(document).ready(function(){
var selected = [];
$('#checkboxes input:checked').each(function() {
selected.push($(this).attr('name'));
}).get();
$("#ajaxDiv").html(selected);
});
AND
<script>
$(document).ready(function () {
$('.item').change(function(){
if($(this).is(':checked')){
var name = $(this).val();
$.post('load.php', {name:name}, function(data){
$('#name-data').html(data);
});
}
});
});
</script>
2nd code: in "load.php" you can access the sent values by using $_POST['name'], etc and put them in the database with a simple mysqli-query. dont Forget to check the values, before you put them into the database.
How to print the multiple input boxes using jquery
I am using the following code
<script type="text/javascript">
$(document).ready(function(){
$("#taxId").change(function(){
var tax_id=$("#taxId").val();
$.ajax({
type:"post",
url:"<?php echo base_url();?>index.php/pranasInventory/get_tax_detail",
data:{tax_id:tax_id},
success:function(data)
{
var json_obj = $.parseJSON(data);//parse JSON
var len=json_obj.length;
for (var i=0;i<len;i++)
{
var output=json_obj[i].tax_detail+"<input id='taxcal' name='taxcal' placeholder='0.00'>";
$('#taxDetail').html(output);
console.log(output);
}
}
});
});
});
</script>
It print only one input tag.
my console message like this
Service tax # 14%<input id='taxcal' name='taxcal' placeholder='0.00'>
swachh bharat cess # 0.5%<input id='taxcal' name='taxcal'placeholder='0.00'>
I want print two input box.
please help me
The html function replaces the whole content.
You might replace
var len=json_obj.length;
for (var i=0;i<len;i++) {
var output=json_obj[i].tax_detail+"<input id='taxcal' name='taxcal' placeholder='0.00'>";
$('#taxDetail').html(output);
console.log(output);
}
with
$('#taxDetail').append(json_obj.map(function(obj){
return $("<input placeholder='0.00'>");
});
but you need to decide how to handle the ids of the added inputs as you can't obviously use the same for all.
.html replaces the whole content of the div. You must use JQuery append or prepend methods.
I am working with weather api, my intention is to display the json data into simple html view....
The problem is that (perhaps) the above script not working at all, even alert, if i am doing it wrong please someone guide....
Script and html
<div id ="fj"></div>
$(document).ready(function() {
var teams;
$.getJSON("http://api.openweathermap.org/data/2.5/forecast/daily?lat=33.5689&lon=72.6378&cnt=10", function(dataDD) {
//do some thing with json or assign global variable to incoming json.
var tasks = $.parseJSON(dataDD.city);
alert(tasks);
//alert('empLoggedId');
$.each(tasks, function(key, value) {
$("#fj").append(data.weather.description);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="fj"></div>
Any kind of hep or reference will be appreciated
Thanks for your time
Here you go, http://jsfiddle.net/9c2tb8xk/
I am not sure what you are trying to list but I think this is what you want.
$(document).ready(function() {
var teams;
$.getJSON("http://api.openweathermap.org/data/2.5/forecast/daily?lat=33.5689&lon=72.6378&cnt=10", function(dataDD) {
//$.getJson parses for you, dont try to parse it again.
var tasks = dataDD.list //tasks is list property of dataDD
$.each(tasks, function(key, value) { //for each value in list will be in value
$("#fj").append(value.weather[0].description); //I used the value as a specific item from list.
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id ="fj"></div>
in this code i am trying to get the alert value to the element.
brief:
my ajax code checks the database values and gets the new values from database and
displays the fetched values in alert. but i am not able to put that alert values into
element...
How can i do this?
Code:
<script>
$(document).ready(function(){
$("#refresh").click(function(){
var fileId=id;
var rowNum = $(this).parent().parent().index();;
$.ajax({
type:"post",
url:"checkStatusAndNumRecs",
data:{fileId:fileId},
success:function(data)
{
setTimeout(alert(data), 2000);
var allTds = $("#rtable tr:eq('"+rowNum+"')").find('td');
$(allTds)[4].html(data[0]);
$(allTds)[3].html(data[1]);
document.getElementById("#div1").innerHTML=data;
},
error:function(data)
{
document.getElementById("#div1").innerHTML="It was a failure !!!";
}
});
});
});
</script>
HTML code:
<td><div id="div1"><s:property value="%{#m.status}" /></div></td>
In alert(data) i am getting the value.
but when i put same value like this
document.getElementById("#div1").innerHTML=data;
it is not applying the value to element
you don't need # using javascript's getElementById
try this
document.getElementById("div1").innerHTML=data; //notice no `#` in front of div1
or
using jquery that should be
$('#div1').html(data);
try
document.getElementById("div1").innerHTML=data[0];
document.getElementById("div2").innerHTML=data[1];
or
$('#div1').html(data[0]);
$('#div2').html(data[1]);
Pass the actual data inside the object to the HTML element, not the object itself.
I'm trying to use CKeditor as part of a CMS but I'm not "that" good with JavaScript and there documentation does not help much.
rather confusing could some one show me how I would change the link plugin dialog so that it shows a drop down of values and builds a URL from them, but I don't under stand how there dialog system works I have narrowed it down, i know that I will need to use the _sources/plugins/link/dialogs/link.js but as to how I am to a lost when working with this I just can't understand it.
Can some one show me the code i would need to add a Dropdown (select) to the dialog that has the options that then writes the value into the url Field E.G
My Server System has the URL /content/getLinks/ and this will return the CMS Pages like so,
[
{"page_name":"Contact Us","url":"Contact_Us","page_id":"1"},
{"page_name":"Welcome to Doxie Promotions","url":"Welcome_to_Doxie_Promotions","page_id":"2"},
{"page_name":"Bands","url":"Bands","page_id":"3"},
{"page_name":"Upcoming Events","url":"Upcoming_Events","page_id":"4"},
{"page_name":"About","url":"About","page_id":"7"},
{"page_name":"Lost Efftect","url":"Lost_Efftect","page_id":"10"}
]
Now from this data i want to build a select box like this
<select>
<option value="Contact_Us:1">Contact Us</option>
<option value="Welcome_to_Doxie_Promotions:1">Welcome to Doxie Promotions</option>
<option value="Bands:1">Bands</option>
<option value="Upcoming_Events:1">Upcoming Events</option>
<option value="About:1">About</option>
<option value="Lost_Efftect:1">Lost Efftect</option>
</select>
Then when one is selected I want the URL field to be changed E.G if the first was option selected the url would be
/content/load/pid/1/url/Contact_Us
I'm aware that i will need to copy the sources version of the plugin dialog over the standard one that has been min'ed
Update what I have tried so far
using _sources/plugins/link/dialogs/link.js and overwriting the plugins/link/dialogs/link.js
I have built this code
into the file at line 429
,
{
type : 'select',
id : 'cms_links',
label : 'CMS Page',
items:[],
onLoad : function(){
(function($){
$.ajax({
url: "/content/getLinks/",
dataType: 'json',
data: "",
success: function(data){
$.each(data, function(key, val){
$("#cms_links").append(
"<option value='"+val.url+":"+val.page_id+"'>"+val.page_name+"</option>"
);
});
}
});
})(jQuery);
}
},
but there is not even a select box drawn for the code that i have added so i'm still at a loss
You can try to use this plugin: http://cksource.com/forums/viewtopic.php?f=18&t=24282
To do this you have to have the de-minimized version of the code this is in the _sources at path _sources/plugins/link/dialogs/link.js copy this over top of the minimized code at plugins/link/dialogs/link.js i added the code below around line 429
,
{
type : 'select',
id : 'cms_links',
label : 'CMS Page',
class : 'cms_links',
items:[],
onLoad : function(){
(function($){
var cms_pageSelectElement;
var protocolSelectElement;
var urlSelectElement;
$.ajax({
url: "/content/getLinks/",
dataType: 'json',
success: function(data){
$("label").each(function(){
var value = $(this).html();
if(value == "CMS Page"){
cms_pageSelectElement = $(".cke_dialog_ui_input_select", $(this).parent());
console.log(cms_pageSelectElement);
}
if(value == "Protocol"){
protocolSelectElement = $(".cke_dialog_ui_input_select", $(this).parent());
console.log(protocolSelectElement);
}
if(value == "URL"){
urlSelectElement = $(".cke_dialog_ui_input_text", $(this).parent());
console.log(urlSelectElement);
}
});
$(cms_pageSelectElement).append("<option selected='selected'><none CMS link></option>");
for(var key in data){
var val = data[key];
$(cms_pageSelectElement).append(
"<option value='"+val.url+":"+val.page_id+"'>"+val.page_name+"</option>"
);
}
$(cms_pageSelectElement).change(function(){
var val = $(this).val();
var parts = val.split(":");
var url = "content/load/pid/"+parts[1]+"/url/"+parts[0];
$(urlSelectElement).val(url);
});
}
});
})(jQuery);
}
},
you have to exploit the system slightly to update the other elements when using jQuery as there are no values you can set that are then set on to the HTML elements so you have to hack around by selecting the label then getting the input from the parent of the label
I can give you this to start of: http://jsfiddle.net/VGWPL/