This is the script of my code.The Script is working fine but the problem arises in html. First of all check out this script
<script type="text/javascript">
$(document).ready(function()
{
$(".form-control").change(function()
{
var id=$(this).val();
var dataString = 'id='+ id;
$.ajax
({
type: "POST",
url: "php/get_child.php",
data: dataString,
cache: false,
success: function(html)
{
$("#statee").html(html);
}
});
});
});
</script>
this is the code which does not work
<label for="exampleInputEmail1">Child Category :</label> <select name="state" **id="statee"**>
<option selected="selected">--Select Child Category--</option>
</select>
whereas it works
<label for="exampleInputEmail1">Child Category :</label> <select name="state" **class="statee"**>
<option selected="selected">--Select Child Category--</option>
</select>
I want to run it using id not class method.Please help me in doing that
Why id not working?
Id is an unique .It's only select idname of the first element .Multiple same id is there in your html.kindly check sameid(check id=statee only once there in your html) name already present or not in your html elements.If is present already change the id name with different one .
whereas it works?
class select the all element with contains same classname
class is better one for multiple element.but if you need only id use like this
$("[id='statee']").html(html);
Related
I want to show the models by changing the Drop Down value....I know how to get the value of drop down with change function but my problem is that i want to send that value in route to filter the models.....Please tell me how can i send the changed value id with route from blade..
This is my Drop Down
<select class="form-control" id="category" placeholder="Select category">
<option>All</option>
#foreach($categories as $category)
<option value="{{route('contributors.index')}}?category={{ $category->id }}">{{$category->name}}</option>
#endforeach
</select>
Here i my Jquery Change Function
$('#category').change(function(){
alert($(this).val());
})
Explanation :
Please check the below picture....I want to show the models(in the same view)which are related to that category selected in the drop down.
Add this to redirect you to the specific route. For you, it refreshes the page with the selected id in URL. So, models will filter for the given category_id.
$('#category').change(function(){
window.location = "domain.com/route/" + $('option:selected', this).val();
})
Of course, you should use your own URL instead of the URL in the example.
You can use ajax call to append and send category value to your route
$( "#category" ).change(function() {
var id=$(this).val();
$.ajax({
type: 'GET',
url: your url goes here,
success: function (data) {
//here yuo can append to model div
},
error: function (data) {
console.log(data);
}
});
});
the above code is sample for ajax request
I'm trying to add a new feature to this pagination/filtering script but so far, without succes. I want that, when you change the page, the filter you picked from the top right corner select (that with "Ordonare dupa...) to remain picked instead of switching back to the first option.
This is my website - http://www.wheelsmarket.ro/cautare/jante/1
To paginate/filter i used this function:
$(document).ready(function()
{
$('.sortare').on('change', function(){
$.ajax({
url: '/filtrare-jante.php',
type: 'POST',
data: {'selected' : $(this).val(), 'pagina_id' : <?php echo $_GET['pagina'];?>},
success: function(data){
console.log(data); // do something with what is returned
$('#myTest').html(data);
$('#queryInitial').html('null');
}
});
});
All the querys are made inside a #myTest div, and the myTest div gets changed without reloading when you change that select. The problem is that the select box is out of #myTest div, so i doubt that i can make use of that function i have.
ex:
<select class="sortare select" >
<option value="1">cele mai noi</option>
<option value="2">cele mai ieftine</option>
<option value="3">cele mai scumpe</option>
</select>
<div id="myTest">
code
</div>
If i understood correctly you need something like :
1) Add id to your options:
<select class="sortare select" >
<option id="sel1" value="1">cele mai noi</option>
<option id="sel2" value="2">cele mai ieftine</option>
<option id="sel3" value="3">cele mai scumpe</option>
</select>
<div id="myTest">
code
</div>
AND change tha attr() to selected in jquery :
$(document).ready(function()
{
$('.sortare').on('change', function(){
selValue = $(this).val(); //---> Store this value in a variable.
$.ajax({
url: '/filtrare-jante.php',
type: 'POST',
data: {'selected' : $(this).val(), 'pagina_id' : <?php echo $_GET['pagina'];?>},
success: function(data){
console.log(data); // do something with what is returned
$('#myTest').html(data);
$('#queryInitial').html('null');
$('#sel'+selValue).attr("selected","selected"); //---> Use the variable we created to determine which option should be set to selected dynamically
}
});
});
I am attempting to populate a jquery form with data from an XML where the XML has an id that will populate a dropdown in the form and upon selection of an id other form fields will be populated. BTW I will not be using PHP
My XML
<XMLReview>
<plan>
<planNumber>773</planNumber>
<Area>Upper Missouri</Area>
<ID>MISSOURI-NUT</ID>
<Name>Missouri River</Name>
<code>10030101</code>
<County>Broadwater</County>
<Station_ID>M09MISSR05</Station_ID>
</plan>
<plan>
<planNumber>774</planNumber>
<Area>Columbia</Area>
<ID>FLAT-STILL-TPA-2013</ID>
<Name>Sheppard Creek</Name>
<Description>- 3A</Description>
<code>17010210</code>
<County>Flathead</County>
<Station_ID>C09SHEPC04</Station_ID>
</plan>
</XMLReview>
The HTML
<form>
<input type="button" id="btnxml" value="XML" onclick="getXML()" />
ID <input type="text" name="ID" id="ID">
planNumber<input type="text" name="Name" id="planNumber">
area<input type="text" name="Area" id="Area">
Name: <input type="text" name="Name" id="Name">
Description: <input type="text" name="Description" id="Description">
Station ID <input type="text" name="Station_ID" id="Station_ID">
<label class="Code-label" for="code">HUC</label>
<select class="select_code" id="code" name="code" data-iconpos="left" data-icon="grid">
<option></option>
<option> 10010001</option>
<option> 10010002</option>
<option> 10020001</option>
</select>
<label class="county-label" for="County">County</label>
<select class="select_county" id="County" name="County" data-iconpos="left" data-icon="grid">
<option></option>
<option> Beaverhead </option>
<option> Big Horn </option>
<option> Blaine </option>
</select>
</form>
The script
<script>
function getXML()
{
$.get("XMLReview.xml", function(data) {
$.ajax({
type: "GET",
url: "XMLReview.xml",
dataType: "xml",
success: function (xml) {
var select = $('#ID');
$(xml).find('plan').each(function () {
var ID = $(this).find('ID').text();
select.append("<option>" + ID + "</option>");
$("#ID").change(function () {
var selectedIndex = $('#ID option').index($('#ID option:selected'));
var newOpt = $(xml).find("values").eq(selectedIndex).find('value').each(function () {
var value = $(this).text();
});
});
}
});
alert(data);});
}
</script>
Unfortunataly this is not working and I don't know why. Can anyone help me please
One or two things:
You are specifying the onclick event inline:
<input type="button" id="btnxml" value="XML" onclick="getXML()" />
Why not keep everything in one place -- since you already are using quite a bit of jQuery. Just add it to the javascript block like this:
<input type="button" id="btnxml" value="XML" />
and
$('#btnxml').click(function() {
getXML();
});
Without checking your javascript/ajax code, this construction is wrong:
function getXML(){
$.get("XMLReview.xml", function(data) { <<======= REMOVE
$.ajax({
type: "GET",
url: "XMLReview.xml",
dataType: "xml",
success: function (xml) {
var select = $('#ID');
$(xml).find('plan').each(function () {
var ID = $(this).find('ID').text();
select.append("<option>" + ID + "</option>");
$("#ID").change(function () {
var selectedIndex = $('#ID option').index($('#ID option:selected'));
var newOpt = $(xml).find("values").eq(selectedIndex).find('value').each(function () {
var value = $(this).text();
}); //END $(xml).find.eq.find.each
}); //END #ID.change
}); //END $(xml).find.each
alert(data);
} //END AJAX.success fn
}); //END $.ajax
}); //END $.get <<=================================== REMOVE
}
It should look like this:
function getXML(){
$.ajax({
type: "GET",
url: "XMLReview.xml",
dataType: "xml",
success: function (xml) {
var select = $('#ID');
$(xml).find('plan').each(function () {
var ID = $(this).find('ID').text();
select.append("<option>" + ID + "</option>");
$("#ID").change(function () {
var selectedIndex = $('#ID option').index($('#ID option:selected'));
var newOpt = $(xml).find("values").eq(selectedIndex).find('value').each(function () {
var value = $(this).text();
}); //END $(xml).find.eq.find.each
}); //END #ID.change
}); //END $(xml).find.each
alert(data);
} //END AJAX.success fn
}); //END $.ajax
}
The extra $.get() wrapper is unnecessary.
Note that $.ajax() and $.get() and $.post() do the same thing. You are using the more structured $.ajax() construction, which is (IMHO) easier to keep things straight.
$.get() simply hard-codes the type="GET" and $.post() hard-codes the type="POST"
Also, I haven't done much with the XML dataType, but I strongly suspect that xml -- in the success function of your AJAX code block, in this context:
success: function (xml) {
//post ajax code here, for eg.
alert(xml);
}
Is a variable that will contain whatever has been ECHOed/printed/etc from the server side script? I don't believe it's an XML object...
Ok there are kind of a lot of things going on here so I figured a fresh implementation would be easier to understand than a series of corrections (I'll try and note places where your understanding of JavaScript might need some work) First a demo. Now the JavaScript:
$('#btnxml').on('click', function() {
var select = $('#ID'),
xml = $($.parseXML($('#XMLData').text())),
plans = xml.find('plan');
plans.each(function () {
var ID = $(this).find('ID').text();
select.append("<option>" + ID + "</option>");
});
$("#ID").change(function () {
var selectedIndex = $('#ID option').index($('#ID option:selected')),
plan = $(plans[selectedIndex]);
$('#planNumber').val(plan.find('planNumber').text());
$('#Area').val(plan.find('Area').text());
$('#Name').val(plan.find('Name').text());
$('#Description').val(plan.find('Description').text());
$('#Station_ID').val(plan.find('Station_ID').text());
$('#code').val(plan.find('code').text());
$('#County').val(plan.find('County').text());
}).trigger('change');
});
And then the HTML
<script type='text/xml' id='XMLData'>
<XMLReview>
<plan>
<planNumber>773</planNumber>
<Area>Upper Missouri</Area>
<ID>MISSOURI-NUT</ID>
<Name>Missouri River</Name>
<code>10030101</code>
<County>Broadwater</County>
<Station_ID>M09MISSR05</Station_ID>
</plan>
<plan>
<planNumber>774</planNumber>
<Area>Columbia</Area>
<ID>FLAT-STILL-TPA-2013</ID>
<Name>Sheppard Creek</Name>
<Description>- 3A</Description>
<code>17010210</code>
<County>Flathead</County>
<Station_ID>C09SHEPC04</Station_ID>
</plan>
</XMLReview>
</script>
<form>
<input type="button" id="btnxml" value="XML" /><br/>
ID <select type="text" name="ID" id="ID"></select><br/>
planNumber<input type="text" name="Name" id="planNumber"><br/>
area<input type="text" name="Area" id="Area"><br/>
Name: <input type="text" name="Name" id="Name"><br/>
Description: <input type="text" name="Description" id="Description"><br/>
Station ID <input type="text" name="Station_ID" id="Station_ID"><br/>
<label class="Code-label" for="code">HUC</label>
<select class="select_code" id="code" name="code" data-iconpos="left" data-icon="grid">
<option></option>
<option>10010001</option>
<option>10010002</option>
<option>10020001</option>
<option>10030101</option>
<option>17010210</option>
</select>
<br/>
<label class="county-label" for="County">County</label>
<select class="select_county" id="County" name="County" data-iconpos="left" data-icon="grid">
<option></option>
<option>Beaverhead</option>
<option>Big Horn</option>
<option>Blaine</option>
</select>
</form>
First, I made these changes to make this easier to demonstrate in JSFiddle, but they don't necessarily match what your final code will be:
I faked the AJAX request (the other answer here gives you a clear explanation of how to properly use jQuery's excellent AJAX helper methods). When rolling this answer into yours you can just assume that all of this is wrapped in a $.get() that fetches your XML remotely.
I also bound the click handled in JavaScript to $('#btnxml') (this is cleaner, but also because JSFiddle doesn't like onclick attributes that point to named functions), this is not strictly wrong it's just cleaner.
Now for the substantive changes:
You are really trying to do two things, populate your $('#ID') selector (which was originally a <input type='text'> which is incorrect, in this code I updated to to a <select>, and then after it's populated you are trying to bind a change event handler. You had these steps inside each other, and I separated them back out. Also programmaticly changing a <select> doesn't trigger a change event automatically, so I appended a .trigger('change') at the end.
It also appears that you are attempting to take the child nodes of the selected plan and update the corresponding input with the same name. You could use the .childNodes property but this will include TextNodes for all of the white-space between XML nodes, and rather than trying to filter them out I thought it would be cleaner to just map them individually. This may not work for you if your HTML and XML are constantly being updated but the next point I'm going to make possibly would prevent a totally automatic approach anyways.
Selecting an option based on a value presents some challenges. jQuery is very smart. If you have a <select> element with a set of options that don't have value attributes and you try and set that <select> element's .val() by a string of one of those <option>s inside that element it will do the right thing. However if there are no elements that match that value then it will silently pass over it. Your XML has code and County values that do not appear in your HTML. I added the missing code values to show you that it is working, but I didn't add them to the County <select>. If you know all of your possible codes and county's and you can update your HTML then this won't be a problem, if instead you want new values to be appended while old values are just selected, then your code will get a little trickier.
At present I have a small web-form that loads AJAXed data really nicely from a drop down menu:
<select name="showcode" id="showcode">
<option value="1"> First Name</option>
<option value="2"> Last Name</option>
</select>
What I would like to do is create the action from a text link such as:
First Name
Last Name
I don't know how to change the .change(function() { JS to correctly perform an action onclick event to make this happen. Below is the JS part. Any thoughts / help would be greatly appreciated.
$(document).ready(function(){
$("#showcode").change(function() {
var usr = $("#showcode").val();
$("#getassociatedprojects").html('Retrieving..');
$.ajax
({
type: "POST",
url: "/client-stories/data.php",
data: "showcode="+ usr,
success: function(msg)
{
$("#getassociatedprojects").ajaxComplete(function(event, request, settings)
{ $(this).html(msg); });
}
Worked it out.
Assigned a rel and class to the <a href>
First Name
Then changed the Javascript call in to:
$('a.topic').click(function() {
var usr = $(this).attr('rel');
Voila. It worked. :)
Hi i am using jquery to pull data from database n if the field has some value, i am calling clone function to create a dropdown list and using that value to set the selected value for dropdownbox. Like in code below database returns score so i am trying to set selected value of dropdown to score. ANDCriteria2 is the dropdown created using clone. Even if i try to print ANDCriteria's selected value which by default should be total_balance, it show empty alertbox (alert($('#ANDCriteria2').val()) as if the dropdown doesnt even exist
HTML
<div id="ListOne">
<div id="crit">
<div id="innerDiv2">
<select name="ANDCriteria2">
<option value="total_balance">Total Balance</option>
<option value="collector_code">Collector Code</option>
<option value="score">Score</option>
<option value="standard_desc">SDC</option>
<option value="acct_age">Account Age</option>
<option value="attempts_total">Total Attempts</option>
<option value="phone_age">Phone Age</option>
</select>
</div>
</div>
</div>
Jquery ready function
(document).ready(function(){
$('#lst').change(function(){
$.ajax({
type: "GET",
url: "getter.php",
data: "list=" + $(this).val(),
success: function(data){
var items = JSON.parse(data)
var andc2 = items[5];
if(andc2 === 'score ') {
clone ();
alert("BEFORE");
//$('#ANDCriteria2 option').eq(2).attr('selected', 'selected');
//alert( $('.innerDiv2 ANDCriteria2').text());
$('#ANDCriteria2 > .innerDiv2 >.crit option[value=score]').attr('selected','selected');
alert("AFTER");
I think you mean $("[name='ANDCriteria']") and not $("#ANDCriteria"). # is for ID based selection.
Culprit:
<select name="ANDCriteria2">
And you're using:
$('#ANDCriteria2 > .innerDiv2 >.crit option[value=score]')