How can I clear the options of select box after refresh ... I have two select boxes and both of their values after refresh didn't clear or reset
i am working in code igniter
here is my code.
<?php echo form_dropdown('cat_id', $records2, '#', 'class="cho" id="category"');?>
<script type="text/javascript">//
$(document).ready(function(){
$('#category').change(function(){
$("#items > option").remove(); //it is not working
var category_id = $('#category').val();
$.ajax({
type: "POST",
url: "testController/get_items/"+category_id,
success: function(items)
{
$.each(items,function(item_id,item_name)
{
var opt = $('<option />');
opt.val(item_id);
opt.text(item_name);
$('#items').append(opt);
});
}
});
});
});
// ]]>
try
$("#items").empty();
empty() method will clear all html
API Reference http://api.jquery.com/empty
Instead of
$("#items > option").remove(); //it is not working
try this
$("#items).html("");
Here is simple jsFiddle for you
UPDATE:
You might also consider to build you options markup first and then replace it at once, rather then sequentially append items.
$("#category").change(function(){
var category_id = $("#category").val();
$.ajax({
type: "POST",
url: "testController/get_items/" + category_id,
success: function(items)
{
var options = "";
$.each(items, function(item_id, item_name)
{
options += "<option value=\"" + item_id + "\">" + item_name + "</option>";
});
$("#items").html(options);
}
});
});
$('#items')
.find('option')
.remove()
.end();
IE6
$('#items')
.empty();
There is nothing in the document.ready event handler. Everything is contained within
$('#category').change(function(){ meaning nothing will happen on page refresh.
Related
here is my code for ajax. I am using laravel 5.4 and I don't know the problem why the append doesn't work.
$(document).ready(function(){
$(document).on('change','#product_category',function(){
var cat_id = $(this).val();
$.ajax({
type:'get',
url:'{!!URL::to('findProductName')!!}',
data:{'id':cat_id},
success:function(data){
console.log('success');
console.log(data);
//console.log(data.length);
var op = "";
op+='<option value="0" selected disabled>Choose Product</option>';
for(var i=0; i<data.length; i++){
op+='<option value="'+data[i].id+'">'+data[i].name+'</option>';
}
var div = $(this).parent();
div.find('.choice').html(" ");
div.find('.choice').html(op);
},
error:function(){
}
});
});
});
Mistake in a first look found here
url:"{!!URL::to('findProductName')!!}",
Quotes mistake
To pass variables to a JavaScript script you should assign the value to a global variable before you load the actual ajax script.
Into the blade template:
<script>
var toUrl = "{!! URL::to('findProductName') !!}";
</script>
<script type="text/javascript" src="path/to/ajax/script.js"></script>
then in your script you can do the following:
{
...
url: toUrl,
...
}
or you could use a laravel library to bind JavaScript values to a view like Transform PHP Vars to JavaScript
put
$ajax({
...
async : false
..})
I am posting this questions due to the previous one being so long (It might create confusion if I cut parts up in it). I made the question more simple in this post :).
jQuery code:-
function op_prof(id) {
var attr_u_search = $(".u_search").attr('id');
var dataString = 'u_search=' + attr_u_search;
alert(dataString);
$.ajax({
type: "POST",
url: '/script/profile.php',
data: dataString,
cache: false,
success: function(data) {
$('#ui_profile').show();
$('#ui_profile').html(data);
location.hash = 'profile' + 'id=' + dataString;
$(".searchbox").val('');
$("#usr_suggest").hide();
}
});
};
PHP:-
echo "<tr id='" . $id . "' class='u_search' height='40px' onclick='javascript:op_prof(1)'><td width='40px'><img class='avatar' src='$avater' /></td><td>" . $fname_ . " " . $lname_ . "</td></tr>";
}}
I am having trouble retrieving the ID of each div (each one has a unique ID). It seems that the jQuery captures the ID of the div on top (the first div) instead of capturing the IDs of all the divs.
Screen shots:-
http://prntscr.com/118dhv
http://prntscr.com/118dus
P.S: I am 100% sure that there is an error in the jQuery :-> prntscr.com/118eb5
Try to modify the on-click attribute of tr
From this:
onclick='javascript:op_prof(1)
To this:
onclick='javascript:op_prof(this)'
And the js to this:
function op_prof(obj) {
var attr_u_search = obj.id;
....
Since you're using jQuery already, here's a full jQuery solution:
$("tr.u_search").on("click", function() {
var attr_u_search = $(this).attr('id');
var dataString = 'u_search=' + attr_u_search;
alert(dataString);
$.ajax({
type: "POST",
url: '/script/profile.php',
data: dataString,
cache: false,
success: function(data) {
$('#ui_profile').show();
// $('#ui_profile').html(data);
location.hash = 'profile' + 'id=' + dataString;
$(".searchbox").val('');
$("#usr_suggest").hide();
}
});
};
Is first param of 'ob_prof' always = 1?
javascript:op_prof(1)
The attr() method sets or returns attributes and values of the selected elements.
When this method is used to return the attribute value, it returns the value of the FIRST matched element.
use $.each()
api.jquery.com/jQuery.each/
I'm trying to send $_POST data to another page to add sessions for a simple shopping cart.
I have a multiple forms within a PHP while loop each with multiple checkboxes, everything works apart from the checkboxes.
My question is how do I change this piece of code to change "item_extras" into an array?
if(this.checked) item_extras = $(this).val();
I have tried the following but, this just creates one line with all the values instead of another row within the array. If this is too confusing I could create a sample if it helps.
if(this.checked) item_extras += $(this).val();
$('form[id^="add_item_form"]').on('submit', function(){
//alert("On Click Works");
event.preventDefault();
addItem($(this));
});
function addItem(ele) {
//alert("I'm in the addItem Function");
var item_id = ele.parent().parent().find("input[name=item_id]").val(); // get item id
var item_name = ele.parent().parent().find("input[name=item_name]").val(); // get item name
var item_options = ele.parent().parent().find('#options').val(); // get selected option
var item_extras = "";
$item_extras = ele.parent().parent().find('input[name^="extra"]'); // find all extras
$item_extras.each(function() {
if(this.checked) item_extras = $(this).val(); // how do i make this into an array???
});
alert("BEFORE AJAX");
var dataString = 'item_id=' + item_id + '&item_name=' + item_name + '&item_options=' + item_options + '&item_extras[]=' + item_extras;
alert(dataString);
$.ajax({
type: "POST",
cache: false,
url: "includes/cart.php",
data: dataString,
success: function () {
$.ajax({
url: 'includes/cart.php',
success: function(data) {
$('#cart').html(data);
alert("AJAX SUCCESS");
}
});
}
});
return false;
}
you can use serialize method. Form.serialize()
$( "form" ).on( "submit", function( event ) {
event.preventDefault();
var data = $(this).serialize();
});
I'm looking to auto submit when a specific checkbox is checked.
I need it to pass to ajax.
Here is what I have so far:
$(document).ready(function () {
$("input[name=<?php echo("$newseo"); ?>]").click(function(){
var id=$(this).attr('id');
var favorite=$(this).val();
$.ajax({
type:'POST',
url:'check_favorite.php',
data:'id= ' + id + '&favorite='+favorite
});
}
});
});
But I just can't seem to get it to work,
Any help would be great, Thanks!
Here you go, this should do it. Your AJAX looks fine. I put together a JSFiddle to demonstrate.
$("input[name=TestCheck]:checked").live('click', function(e) {
var id=$(this).attr('id');
var favorite=$(this).val();
alert(id + " - " + favorite);
// Post here ...
$.ajax({
type:'POST',
url:'check_favorite.php',
data: {id: id, favorite: favorite}
});
});
JSFiddle : http://jsfiddle.net/4GQ6K/1/
I don't really like using obtrusive JavaScript and inputting PHP into JavaScript like that but there is no reason it shouldn't work.
$('#my_checkbox').change(function(){
if($(this).is(':checked'))
{
$('#my_form').submit();
}
});
Use your server side code[php] to set a id or a class to your specific checkbox. Then bind a click event to the given class name, e.g.
php code sets a class named .sCheckBx.
then on document.ready bind your event :
$(document).ready(function () {
$(".sCheckBx").click(function(){
var id=$(this).attr('id');
var favorite=$(this).val();
$.ajax({
type:'POST',
url:'check_favorite.php',
data:'id= ' + id + '&favorite='+favorite
});
}
});
});
Try this
$(document).ready(function () {
$("checkboxId").click(function(){
var $this = $(this);
if($this.is(":checked")){
var id=$this.attr('id');
var favorite=$this.val();
$.ajax({
type:'POST',
url:'check_favorite.php',
data:'id= ' + id + '&favorite='+favorite
});
}
}
});
});
i have these two jquery scripts on my html page, one of them loads more results(like pagination), and the other one replies to users messages, just like twitter!
the replies works(inserts username into textbox), when the page is on default, but when i load more results, the loaded results wnt insert the username into the textbox!! these are the two scripts,
the replies jquery:
function insertParamIntoField(anchor, param, field) {
var query = anchor.search.substring(1, anchor.search.length).split('&');
for(var i = 0, kv; i < query.length; i++) {
kv = query[i].split('=', 2);
if (kv[0] == param) {
field.val(kv[1]);
return;
}
}
}
$(function () {
$("a.reply").click(function (e) {
insertParamIntoField(this,"status_id",$("#status_id"));
insertParamIntoField(this,"reply_name",$("#reply_name"));
insertParamIntoField(this, "replyto", $("#inputField"));
$("#inputField").focus()
$("#inputField").val($("#inputField").val() + ' ');
e.preventDefault();
return false; // prevent default action
});
});
the loadmore jquery script:
$(function() {
//More Button
$('.more').live("click",function()
{
var ID = $(this).attr("id");
if(ID)
{
$("#more"+ID).html('<img src="moreajax.gif" />');
$.ajax({
type: "POST",
url: "ajax_more.php",
data: "lastmsg="+ ID,
cache: false,
success: function(html){
$("ul.statuses").append(html);
$("#more" + ID).remove();
}
});
}
else
{
$(".morebox").html('The End');
}
return false;
});
});
EDIT: when i load more posts, and i click reply the page is refershed, so that ends up with loaded data being hidden again!!
If the reply button is being replaced by the ajax, this might be a workaround.
$(function () {
$("a.reply").live(click, function (e) {
insertParamIntoField(this,"status_id",$("#status_id"));
insertParamIntoField(this,"reply_name",$("#reply_name"));
insertParamIntoField(this, "replyto", $("#inputField"));
$("#inputField").val($("#inputField").val() + ' ').focus();
e.preventDefault();
});
});
Also... If the status_id, reply_name , replyto info is contained within your reply button, make sure these data exists for each reply button after the more button is clicked.