We Keep Coding

Firebug behavior when selecting an item from dropdown-list

I have a dropdownlist which when user selects an item from it, it renders the partial with relevant data. But if user changes the selection of ddl then the previously rendered content should be replaced with the current content.
Following is the code
Script
<script>
var prev;
$(document).on('focus', '.class03', function () {
prev = $(this).val();
}).on('change', '.class03', function () {
if (prev != "") {
$('.cmpCls').last().remove();
alert(prev);
$.ajax({
url: '#Url.Action("ComponentDts", "InquiryOrder")', // dont hard code your url's
type: "GET",
data: { DesignCdId: $(this).val() }, // pass the selected value
success: function (data) {
$('#cmpDts').append(data);
}
});
}
else {
$.ajax({
url: '#Url.Action("ComponentDts", "InquiryOrder")', // dont hard code your url's
type: "GET",
data: { DesignCdId: $(this).val() }, // pass the selected value
success: function (data) {
$('#cmpDts').append(data);
}
});
}
});
</script>
Div to append rendered Partial View
<div id="cmpDts">
</div>
Here what confuses me is when i use firebug, the script works fine replacing the previously rendered content in 'cmpDts' div when user changes the selection of dropdownlist.
But when i run the application without firebug and when user changes the selection of ddl, instead of replacing the previous content in div, it keeps on adding to the div without removing previous content.
I think without firebug, everytime it comes to else part no matter prev has a value or not. I could recognize it beacause alert not get fired without firebug here. Im confused with this behavior. All help appreciated. Thanks!
Edit: How i got that worked(I know this might not be the correct approach but with the restricted time i had to stick with this)
<script>
var prev;
$(document).on('focus', '.class03', function () {
prev = $(this).val();
}).on('change', '.class03', function () {
if (prev != "") {
//$('.cmpCls').last().remove();
alert("If");
$.ajax({
url: '#Url.Action("ComponentDts", "InquiryOrder")', // dont hard code your url's
type: "GET",
data: { DesignCdId: $(this).val() }, // pass the selected value
success: function (data) {
$('.cmpCls').last().replaceWith(data);
}
});
}
else {
alert("Else");
$.ajax({
url: '#Url.Action("ComponentDts", "InquiryOrder")', // dont hard code your url's
type: "GET",
data: { DesignCdId: $(this).val() }, // pass the selected value
success: function (data) {
$(".class03 option[value='']").remove() ;
$('#cmpDts').append(data);
}
});
}
});
</script>

You first of all need to wait for your document to be ready by using:
$(document).ready(function(){
});
Now, you want to check if something in .class03 changed.
$(document).ready(function(){
var prev;
$(".class03").focus(function(){ prev = $(this).val(); });
$(".class03").change(function(){
if (prev !== "") { $('.cmpCls').last().remove(); }
alert(prev);
$.ajax({
url: '#Url.Action("ComponentDts", "InquiryOrder")', // dont hard code your url's
type: "GET",
data: { DesignCdId: $(this).val() }, // pass the selected value
success: function (data) {
$('#cmpDts').append(data);
}
});
});
});
Try this.
Edit: removed double code

Jquery ajax button click event firing twice?

I have a Employee page which shows list of employees with an edit option. On clicking the edit button jquery-ajax is used to fetch the data from the server.
The problem is when I click the edit button the event is firing twice.
I am using a seperate js file and is referring the file to the main page.The script was working fine until i moved it to the seperate js file.
The Jquery script is
//ajaxGet on edit button click
$(document).on('click', '.editRole', ajaxGet);
var ajaxGet = function (e) {
var spinner = $(this).parent('div').find('.spinner');
var href = $("#editMenuSettings").data("url");
var menuRoleId = $(this).data('id');
spinner.toggle(true);
var options = {
type: "GET",
url: href,
data: { menuRoleId: menuRoleId }
};
$.ajax(options).success(function (data) {
spinner.toggle(false);
$(".modal-body").html(data);
$(".modal").modal({
backdrop: 'static'
});
});
$.ajax(options).error(function (data) {
spinner.toggle(false);
toastr.error("Oops..Some thing gone wrong");
});
return false;
};

You call $.ajax twice.
At lines
$.ajax(options).success(function(data)...
$.ajax(options).error(function(data)...
you actually make two different AJAX calls - one with success callback only, another one with error callback.
In your case, your call should look like this:
var options = {
type: "GET",
url: href,
data: { menuRoleId: menuRoleId }
};
$.ajax(options)
.success(function (data) {
spinner.toggle(false);
$(".modal-body").html(data);
$(".modal").modal({
backdrop: 'static'
});
})
.error(function (data) {
spinner.toggle(false);
toastr.error("Oops..Some thing gone wrong");
});
return false;
It will set both callbacks to the single AJAX call and execute this one.

Get content of div from ajaxForm response

I have a search form that submits with ajaxForm, and I want to get the html inside of a specific div, and it tried:
$(function search() {
$("#socialSearchUsers").validate({ // initialize the plugin
// any other options,
onkeyup: false,
rules: {
query: {
required: true
}
}
});
$('form').ajaxForm({
beforeSend: function() {
return $("#socialSearchUsers").valid();
},
success : function(result) {
var page = $(result);
var statusText = page.find('#status').innerHTML;
console.log(statusText);
$("#results").html(statusText);
}
});
});
but that (in the console) tells me "undefined" (no quotes).
I'm new to JS and JQuery so if there's an easy way to do it I don't know.

.innerHTML is a POJS property, not jQuery.
Try :
var statusText = page.find('#status').html();

Refresh a particular div when I click on that div.Without reloading the whole page.I specifically want it using onclick function

$(document).ready(function () {
var j = jQuery.noConflict();
j(document).ready(function () {
j(".refresh").everyTime(2000, function (i) {
j.ajax({
url: "refresh.php",
cache: true,
success: function (html) {
j(".refresh").html(html);
}
})
})
});
j('.refresh').css({
color: ""
});
});
<?php
echo time();
?>
It works for refreshing page after particular time interval .I want this to be working after I click on particular div.

You can place your code in a click handler. Like this:
$(document).ready(function () {
var j = jQuery.noConflict();
j(".refresh").everyTime(2000, refreshDiv)
j('#myDiv').click(refreshDiv);
j('.refresh').css({
color: ""
});
function refreshDiv() {
j.ajax({
url: "refresh.php",
cache: true,
success: function (html) {
j(".refresh").html(html);
}
});
}
});
Note that I extracted the logic in to its own function so it can be called from different parts of your code. I also removed the pointless duplicate DOMReady handler.

This is just a simple one
But you need to modify it
$(document).ready(function(){
$('.refresh').on('click', function(){
$.ajax({
url: "refresh.php",
cache: true,
success: function (html) {
j(".refresh").html(html);
}
});
});
});

Updating drop down from json message, code not working

my json response is
["Day", "Week"]
and the jquery which is supposed to run is
$("#id_granularity").click(function(event)
{
event.preventDefault();
var $form1=$('#dashboardForm')
var $success2 = function(data)
{
$("id_granularity").empty();
$.each(data,function(i,value)
{
alert("hello");
$("id_granularity").append($('<option>').text(value).attr('value',value));
});
}
$.ajaxSetup({
crossDomain: false, // obviates need for sameOrigin test
beforeSend: function(xhr,settings) {
xhr.setRequestHeader('X-CSRFToken',csrftoken);
}
});
var dposting = $.post("/grain", $form1.serialize(), $success2, "json");
});
the event occurs but the dropdown is not updating or new items are not getting appended to
id_granularity

Change all instances of $("id_granularity") to $("#id_granularity") and see how that goes