Here is my problem:
I have a script my nimbit store gave to me, I installed it on my store.html and it's working, my problem is when store.html is loaded through ajax the script - it is not showing.
Help please! Go easy on me I am not a professional developer or programmer!
Thanks a lot in advance.
This is the script my nimbit store gave to me:
<script src="http://www.nimbitmusic.com/tags/javascript/artists/theit_boy.1/store/"></script>
I have installed it on my store.html
[1]: http://theitboymusic.com/store.html and it works, but if i loaded through the store button on my [index.html][1] is disappearing.
Thanks in advance
<!-- ############ ajax content (This content will be loaded by ajax) ############ -->
<div id="ajax-content" class="page-container">
<!-- ############ container ############ -->
<div class="container clearfix">
<!-- ############ content header ############ -->
<header class="content-header">
<h1 class="content-title">STORE</h1>
<span class="sub-heading">Purchase The IT_Boy Music</span>
<hr class="content-line">
</header>
<!-- /content header -->
<script src="http://www.nimbitmusic.com/tags/javascript/artists/theit_boy.1/store/"></script>
my custom.js code:
// Custom pages
// create a new instance of the plugin
var custom_page = new $.PageLoader($('.page-by-ajax'), {
container_class : 'custom-container',
top_offset : -settings.nav_height,
deeplinking : true,
debug : false,
load_from_hash : true,
load_start : function(){
// I get fired when the ajax is starting load content
// Show preloader
NProgress.start();
},
load_end : function(e){
// I get fired when the ajax is ending load content
// Init scripts
scripts(e);
// Hide preloader
NProgress.done();
},
close : function(){
// Scroll to portfolio filter
$.scrollTo('#custom-page', 400,{offset: {top:-settings.nav_height, left:0}});
}
});
})();
});
and in my index.html
<li>
<a href="store.html" class="page-by-ajax" data-ajax-options='{"target" :"#custom-page"}'>STORE</a
</li>
Your "Content-Type" of "Response Header" is "text/plain", but it should be "text/html"
Related
So i'm building an integrated chat app in CRM. Whenever the logged in user click on a contact it displays the chat history between both users using Ajax calls, and this is where troubles begin.
So here's my Ajax Call code:
function GetChatHistory(receiver_id){
$.ajax({
dataType : "json",
url: '/chat/get_chat_history_by_user',
data:{receiver_id:receiver_id},
success:function(data)
{
$('#chathistory').html(data);
ScrollDown();
},
error: function (jqXHR, status, err) {
// alert('Local error callback');
alert("error fetching")
}
});
}
this is my controller
public function get_chat_history_by_user(){
//get the receiver id
$receiver_id = $this->input->get('receiver_id');
//get the sender id
$Logged_sender_id = $this->session->userdata['user_id'];
$history = $this->chat_model->GetReciverChatHistory($receiver_id);
foreach($history as $chat):
$message_id = $chat['id'];
$sender_id = $chat['sender_id'];
$userName = $this->UserModel->GetName($chat['sender_id']);
$userPic = $this->UserModel->PictureUrlById($chat['sender_id']);
$messagebody = $chat['message'];
$messagedatetime = date('d M H:i A',strtotime($chat['message_date_time']));
?>
<?php if($Logged_sender_id!=$sender_id){?>
<!-- Message. Default to the left -->
<div class="direct-chat-msg">
<div class="direct-chat-info clearfix">
<span ><?=$userName;?></span>
<span ><?=$messagedatetime;?></span>
</div>
<!-- /.direct-chat-info -->
<div class="direct-chat-text">
<?=$messageBody;?>
</div>
<!-- /.direct-chat-text -->
</div>
<!-- /.direct-chat-msg -->
<?php }else{?>
<!-- Message to the right -->
<div class="direct-chat-msg right">
<div class="direct-chat-info clearfix">
<span ><?=$userName;?></span>
<span ><?=$messagedatetime;?></span>
</div>
<!-- /.direct-chat-info -->
<div class="direct-chat-text">
<?=$messageBody;?>
</div>
<!-- /.direct-chat-text -->
</div>
<!-- /.direct-chat-msg -->
<?php }?>
<?php
endforeach;
}
the simple version of the view and the div i want to insert data in it :
<div id="chathistory"></div>
Please note that the models are written correctly(i did test them), and the call is written correctly because whenever i remove the foreach loop and add this to my controller :
echo json_encode($history);
and then console log the data in my ajax call i get the full chat history without a problem. so my guess is that there's something wrong with foreach loop and the html rendering !
ALSO : i did review some simple web app chat on github and they did write the controller with the same manner and it work perfectly fine for them. So what do you think is the problem please?
dataType : "json"
tells jQuery to expect JSON in the response, but you are returning HTML from the controller. So it will likely throw an error when it tries to parse your HTML as JSON. Either remove that line, or specify
dataType: "html"
instead
Details:
Hi experts. I want to change an existing HTML theme using only javascript, and I have problem in changing HTML element's href using javascript. But it seems I can't even get the elements by ClassName because the console.log value of javascript code below shows 0 length. Please help how should I fix the code.
(Note that I can't edit the existing HTML code, only can write custom code of javascript). Best regards
My javascript is as below:
var x8 = document.getElementsByClassName("slrofrpg-srvcs-backbtn");
console.log("length=",x8.length); --1st console
if (x8.length > 0){
console.log("ENTERED. length=", x8.length); --2nd console
x8[0].href = "javascript:history.back()";
}
My HTML is as below (some part of it):
<div class="slrofrpg-service-btn">
<a class="slrofrpg-srvcs-backbtn" href="javascript:void(0);">Back
</a>
<!-- react-text: 219 -->
<!-- /react-text -->
<a class="slrofrpg-srvcs-offerbtn" href="javascript:void(0);">Send now
</a>
</div>
1st console log result:
length=0
2nd console log result: No result
The code is working fine here. Your script is running before the the loading of html.You can
Move your <script> tag at end of the <body>
Or use the window.onload event
window.onload = function(){
var x8 = document.getElementsByClassName("slrofrpg-srvcs-backbtn");
console.log("length=",x8.length);
if (x8.length > 0){
console.log("ENTERED. length=", x8.length);
x8[0].href = "javascript:history.back()";
}
}
<div class="slrofrpg-service-btn">
<a class="slrofrpg-srvcs-backbtn" href="javascript:void(0);">Back
</a>
<!-- react-text: 219 -->
<!-- /react-text -->
<a class="slrofrpg-srvcs-offerbtn" href="javascript:void(0);">Send now
</a>
</div>
It seems you are running the javascript before the dom is loaded. Add javascript or add the external js file near the closing end of body tag
<body>
// html code
<script>
//js code here
</script>
</body>
var x8 = document.getElementsByClassName("slrofrpg-srvcs-backbtn");
console.log("length=", x8.length);
if (x8.length > 0) {
console.log("ENTERED. length=", x8.length);
x8[0].href = "javascript:history.back()";
}
<div class="slrofrpg-service-btn">
<a class="slrofrpg-srvcs-backbtn" href="javascript:void(0);">Back
</a>
<!-- react-text: 219 -->
<!-- /react-text -->
<a class="slrofrpg-srvcs-offerbtn" href="javascript:void(0);">Send now
</a>
</div>
I have a template but this js template has error IDK what happens. I want to make this hide and show function sidebar with another js .
<div class="mdc-list-group sidebar">// this start sidebar
<nav class="mdc-list mdc-drawer-menu ">
<div class="mdc-list-item mdc-drawer-item">
<a class="mdc-drawer-link" href="<?php echo base_url(); ?>dinas">
<header class="mdc-toolbar mdc-elevation--z4 mdc-toolbar--fixed">
<div class="mdc-toolbar__row">
<section class="mdc-toolbar__section mdc-toolbar__section--align-start">
menu//this is for button to click show and hide
<span class="mdc-toolbar__input">
</span>
</section>
I add this code in my last script under </html>
<script>
function hideSidebar() {
$(".sidebar").hide();
}
hideSidebar();
</script>
but its still not work , whats wrong about this ? thanks you very much
You might be executing the Javascript part before the page has loaded, or before the DOM element you are trying to hide has already appeared.
function hideSidebar() {
$(".sidebar").hide();
}
$(document).ready(function(){
hideSidebar(); // only execute this after the page has loaded
});
I have my header.php containing a button which triggers the sidebar menu to appear. Button and sidebar are visible only for logged in users. At the end of this block there is a little piece of code that adds the class "active" to my sidebar for making it visible. It's something like:
<div id="header">
<!-- if is_user_logged_in -->
<a id="menu-toggle" href="#" type="button">
<i class="sprite-t-toggle-side"></i>
</a>
<!-- sidebar menu-->
<div id="sidebar-wrapper"><!-- menu content --></div>
<script>
var $menu = $("#sidebar-wrapper");
$("#menu-toggle").on("click", function(e) {
e.preventDefault(),
$menu.toggleClass("active");
});
</script>
</div>
Now, I make my users login via AJAX and once they're logged I just refresh my header block for displaying button and sidebar. I use this line of code to do so in my AJAX success:
success: function(data){
if (data.loggedin == true){
$("#header").load(location.href + " #header");
}
}
Until here everything is fine, users are logged and button is displayed but when I click on it nothing happens. Sidebar won't appear and If I look at the code my little function, at the end of header, is missing. Otherwise, If I reload the whole page it works.
What's happening? What am I doing wrong?
Why reload the entire header. Why not just grab the logged in part of it
I think problem is that you are reloading the entire #header you need to just reload part of it.
$("#header").load(location.href + " #header"); <- this will replace all html in
the #header
<div id="header">
<div id="loadajax"></div> <!-- Put loaded ajax in here --->
<!-- if is_user_logged_in -->
<a id="menu-toggle" href="#" type="button">
<i class="sprite-t-toggle-side"></i>
</a>
<!-- sidebar menu-->
<div id="sidebar-wrapper"><!-- menu content --></div>
<script>
function runMenu() {
var $menu = $("#sidebar-wrapper");
$("#menu-toggle").on("click", function(e) {
e.preventDefault(),
$menu.toggleClass("active");
});
}
runMenu();
</script>
</div>
success: function(data){
if (data.loggedin == true){
$("#loadajax").load(location.href + " #header");
runMenu();
}
}
I'm going nuts and I can't figure out what is causing this error.
My Javascript:
<script>
$(document).ready(function() {
var jqxhr = $.getJSON("rest/scriptruns/VeloxMorgana", function() {
//VeloxMorgana.setData('[{"period":"2014-07-15","VeloxMorgana":1},{"period":"2014-07-16","VeloxMorgana":47}]');
});
jqxhr.complete(function() {
if ($('#VeloxMorgana').length) {
var week_data = jqxhr;
var VeloxMorgana = Morris.Line({
element : 'VeloxMorgana',
data : week_data,
xkey : 'period',
ykeys : ['VeloxMorgana'],
labels : ['VeloxMorgana'],
events : ['2014-07-10', '2014-07-17']
});
}
});
});
</script>
My HTML
<!-- Widget ID (each widget will need unique ID)-->
<div class="jarviswidget" id="wid-id-7" data-widget-editbutton="false">
<!-- widget options:
usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">
data-widget-colorbutton="false"
data-widget-editbutton="false"
data-widget-togglebutton="false"
data-widget-deletebutton="false"
data-widget-fullscreenbutton="false"
data-widget-custombutton="false"
data-widget-collapsed="true"
data-widget-sortable="false"
-->
<header>
<span class="widget-icon"> <i class="fa fa-bar-chart-o"></i> </span>
<h2>Time Graph</h2>
</header>
<!-- widget div-->
<div>
<!-- widget edit box -->
<div class="jarviswidget-editbox">
<!-- This area used as dropdown edit box -->
</div>
<!-- end widget edit box -->
<!-- widget content -->
<div class="widget-body no-padding">
<div id="VeloxMorgana" class="chart no-padding"></div>
</div>
<!-- end widget content -->
</div>
<!-- end widget div -->
</div>
<!-- end widget -->
It loaded when I statically set the data, but when I use JSON it just freaks.
Here is the JSON it loads in when I call it using the ajax json feature and the load data (i've tried just putting it straight into the data from finishing the json request, same result).
[
{
"period":"2014-07-15",
"VeloxMorgana":1
},
{
"period":"2014-07-16",
"VeloxMorgana":47
}
]
The jqxhr is just the promise object for your XHR request, it doesn't actually contain the data that was received.
Since you don't really deal with failure at all, I could recommend just using the success callback straight away:
$.getJSON("rest/scriptruns/VeloxMorgana", function(data) {
if ($('#VeloxMorgana').length) {
Morris.Line({
element : 'VeloxMorgana',
data : data,
xkey : 'period',
ykeys : ['VeloxMorgana'],
labels : ['VeloxMorgana'],
events : ['2014-07-10', '2014-07-17']
});
}
});
Also, the documentation states:
The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callback methods introduced in jQuery 1.5 are deprecated as of jQuery 1.8.