Alaa M. Jaddou Alaa M. Jaddou - 4 months ago 22
Ajax Question

<script> tag is shown in ajax response and executed?

now i got this issue actually i don't know why, this is the first time that i faced this issue.

let me explain it to you


  • i have ajax request.

  • the response of this ajax request will be shown in a div.

  • the response is a page contain html, php, js.

  • the script is running but the script tag is returned as text.



okay let me explain the problem to you.


The response has
<script>
but when i called the ajax request the
<script>
shown in the result as text !!!


let me show u my code

AJAX REQUEST

$.ajax({
url: getBaseUrl() + 'Pages/book_room',
async: false,
data: {offerKey: offerKey, roomType: roomType, hotel: hotel, address: address, stars: stars, checkIn: checkIn, checkOut: checkOut, people: people, image: image, price: price, currency: currency, roomCount: roomCount},
type: 'post',
dataType: 'html',
beforeSend: function() {
$('#' + offerKey).show('slow');

},
success: function(data) {
console.log(data);
$('#' + offerKey).hide('slow', function() {
$.parseHTML(data, document, true);
$(this).html(data);
});
},
complete: function() {
$('#' + offerKey).show('slow');
}
});


THE RESULT
This is my status ???!!! why this happening

UPDATE AJAX TARGET CONTENT

<section id="content" style="background: #fff;">
<div class="container" style="width: 100%;">
<div class="row">
<div id="main" class="col-xs-12 col-sm-12 col-md-12">
<div class="booking-section travelo-box">
<div class="stepwizard col-md-offset-3">
<div class="stepwizard-row setup-panel">
<div class="stepwizard-step">
<a href="#step-1" type="button" class="btn btn-primary btn-circle">1</a>
<p>Personal Information</p>
</div>
<div class="stepwizard-step">
<a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled">2</a>
<p>Payment Option</p>
</div>
<div class="stepwizard-step">
<a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled">3</a>
<p>Confimation</p>
</div>
</div>
</div>
<form id="room_book" class="booking-form" method="POST">
<div class="row setup-content" id="step-1">
<div class="person-information">
<h2>Your Personal Information</h2>
<div class="form-group row">
<div class="col-sm-6 col-md-4">
<label>first name</label>
<?php
$attr = array(
'type' => "text",
'class' => "input-text full-width",
'value' => set_value('first_name'),
'name' => 'first_name',
'id' => 'first_name'
);
echo form_input($attr);
?>
</div>
<div class="col-sm-6 col-md-4">
<label>last name</label>
<?php
$attr = array(
'type' => "text",
'class' => "input-text full-width",
'value' => set_value('last_name'),
'name' => 'last_name',
'id' => 'last_name'
);
echo form_input($attr);
?>
</div>
<div class="col-sm-6 col-md-4">
<label>email address</label>
<?php
$attr = array(
'type' => "email",
'class' => "input-text full-width",
'value' => set_value('email'),
'name' => 'email',
'id' => 'email'
);
echo form_input($attr);
?>

</div>
</div>
<div class="form-group row">
<div class="col-sm-6 col-md-4">
<label>Verify E-mail Address</label>
<?php
$attr = array(
'type' => "email",
'class' => "input-text full-width",
'value' => set_value('confirm_email'),
'name' => 'confirm_email',
'id' => 'confirm_email'
);
echo form_input($attr);
?>
</div>
<div class="col-sm-6 col-md-4">
<label>Nationality</label>
<div class="selector">
<input type="text" class="input-text full-width typeahead" id="autocomplete" placeholder="" />
<input type="hidden" id="locationId" name="locationId" />
</div>
</div>
<div class="col-sm-6 col-md-4">
<label>Phone number</label>
<?php
$attr = array(
'type' => "text",
'class' => "input-text full-width",
'value' => set_value('phone'),
'name' => 'phone',
'id' => 'phone'
);
echo form_input($attr);
?>
</div>
</div>
<div class="form-group row">
<div class="col-sm-6 col-md-4">
<label>Date of Birth</label>
<input type="date" name="date_of_birth" id="date_of_birth" class="input-text full-width" placeholder="yyyy-mm-dd" style="vertical-align: middle;" />
</div>
<div class="col-sm-6 col-md-4">
<label>Prefix</label>
<select name="gender" id="gender" class="input-text full-width">
<option>
Select Prefix
</option>
<option value="Mr">
Mr
</option>
<option value="Ms">
Ms
</option>
<option value="Mrs">
Mrs
</option>
</select>
</div>
<div class="col-sm-6 col-md-4">
<label>Tourest Type</label>
<select name="type" id="type" class="input-text full-width">
<option>
Select Tourest type
</option>
<option value="adult">
Adult
</option>
<option value="child">
Children
</option>
</select>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<?php echo form_checkbox(array('name' => 'offersEmail'), 1, ($this->input->post('offersEmail') ? 1 : 0)); ?>I want to receive <span class="skin-color">Travel Lights</span> promotional offers in the future
</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<?php echo form_checkbox(array('name' => 'agreement'), 1, ($this->input->post('offersEmail') ? 1 : 0)); ?> By continuing, you agree to the <a href="#"><span class="skin-color">Terms and Conditions</span></a>.
</label>
</div>
</div>
</div>
<div style="color: red; padding: 15px;">
<?php echo validation_errors(); ?>
</div>
<hr />
<div class="form-group row">
<button class="btn btn-primary nextBtn pull-right" style="margin-right: 2%;">Next</button>
</div>
</div>
<div class="row setup-content" id="step-2">
<div class="col-xs-12">
<div class="col-md-12">
<h2>Payment Method</h2>
<?php
foreach ($payment->param->paymentMethod as $method) {
?>
<div class="form-group">
<?php echo $method->description; ?>
<label class="control-label title" style="text-transform: none;">
<div style="margin: 0 15px;"><input type="radio" name="paymentMethod" value="<?php echo $method->id; ?>" /> <?php echo $method->name; ?></div>
</label>
</div>
<?php
}
?>
<div class="form-group">
<label class="control-label">Company Address</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Address" />
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-3">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<h3> Step 3</h3>
<button class="btn btn-success btn-lg pull-right" type="submit">Submit</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<script>
$(document).ready(function() {
var locationId;
var locationName;
$('.typeahead').typeahead({
source: function(query, proccess) {
$.ajax({
url: getBaseUrl() + 'Pages/get_countries',
data: {poi: query, order: 'POPULARITY'},
type: 'post',
dataType: 'json',
success: function(data) {
proccess(data);
}
});
},
minLength: 3,
updater: function(item) {
$('#locationId').val(item.id);
return item.name;
}
});
var navListItems = $('div.setup-panel div a'),
allWells = $('.setup-content'),
allNextBtn = $('.nextBtn');
allWells.hide();
navListItems.click(function(e) {
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this);
if (!$item.hasClass('disabled')) {
navListItems.removeClass('btn-primary').addClass('btn-default');
$item.addClass('btn-primary');
allWells.hide();
$target.show();
$target.find('input:eq(0)').focus();
}
});
allNextBtn.click(function() {
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
curInputs = curStep.find("input[type='text'],input[type='url']"),
isValid = true;
$(".form-group").removeClass("has-error");
for (var i = 0; i < curInputs.length; i++) {
if (!curInputs[i].validity.valid) {
isValid = false;
$(curInputs[i]).closest(".form-group").addClass("has-error");
}
}
if (isValid) nextStepWizard.removeAttr('disabled').trigger('click');
});
$('div.setup-panel div a.btn-primary').trigger('click');
});
</script>


UPDATE #2

by the way the wizard's script is in this scrip tag and it works fine.

this is the script tag in inspect element it shows that the text in script tag

Answer

By default, the <script> tag is meant to have display: none using the User Agent Stylesheet:

enter image description here

I strongly believe if you inspect the element, you will find that in the Computed Styles as I shown above, it will be inheriting display styles somehow. That's the reason.

Find something like:

.divClass * {display: block;}

Coz, no one targets <script> tag! :P