AbleCommerce Shopping Cart Software

Working on the home page of an Able Commerce site and trying to incorporate some jquery javascript to allow certain divs to open/close on the home page. Below is the code that does not seem to fire even though i have created a custom script and added calls to it in base.master.

$(document).ready(function(){
$('.collapse.in').each(function(){
$(this).parent().find(".glyphicon").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
});

$('.collapse').on('shown.bs.collapse', function(){
$(this).parent().find(".glyphicon-chevron-down").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".glyphicon-chevron-up").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
});
});

Here is the base.master
using System.Web.UI;

public partial class Base : System.Web.UI.MasterPage
{
protected void Page_Init(object sender, EventArgs e)
{
if (ScriptsPh != null)
{
// insert necessary javascripts
string scriptTag = "<script src=\"{0}\" type=\"text/javascript\"></script>";
string jquery = Page.ResolveUrl("~/Scripts/jquery-1.10.2.min.js");
string jqueryUI = Page.ResolveUrl("~/Scripts/jquery-ui.min.js");
string equalHeightsUrl = Page.ResolveUrl("~/Scripts/jquery.equalheights.js");
ScriptsPh.Controls.Add(new LiteralControl(string.Format(scriptTag, jquery)));
ScriptsPh.Controls.Add(new LiteralControl(string.Format(scriptTag, jqueryUI)));
ScriptsPh.Controls.Add(new LiteralControl(string.Format(scriptTag, equalHeightsUrl)));

if (AbleCommerce.Code.PageHelper.IsResponsiveTheme(this.Page))
{
string footable = Page.ResolveUrl("~/Scripts/footable.js");
string bootstrap = Page.ResolveUrl("~/Scripts/bootstrap.min.js");
string collapsible = Page.ResolveUrl("~/Scripts/A3/A3Collapsibles.js");
ScriptsPh.Controls.Add(new LiteralControl(string.Format(scriptTag, footable)));
ScriptsPh.Controls.Add(new LiteralControl(string.Format(scriptTag, bootstrap)));
ScriptsPh.Controls.Add(new LiteralControl(string.Format(scriptTag, collapsible)));
}
}
}
}
What is the best way to add this type of behavior to the home page?
Thanks in advance for the help.
Rich

Hi,

If you want to add script for all pages, then update the "base.master.cs" file. For this save the javascript code in some custom js file, and add the path of the js file. Same way other js files are being included.

However if you only want to use it for home page or a specific page, you have to add the javascript using code behind, and have to use the "ScriptManager.RegisterStartupScript()" function.

Hi, Just rereading this and i did exactly what you had suggested to do if i want to use in all pages. The two chunks of code are the first which is the custom.js A3Collapsibles.js
$(document).ready(function(){
$('.collapse.in').each(function(){
$(this).parent().find(".glyphicon").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
});

$('.collapse').on('shown.bs.collapse', function(){
$(this).parent().find(".glyphicon-chevron-down").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".glyphicon-chevron-up").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
});
});

And then the other section labeled base.master is the update to base.master.cs to add the link to the custom js following the model for the others.
AM i missing something?
Thanks for the help,
Rich

OK, I moved the A3Collapsible string definition to the top and then added the ScriptsPh.Controls.Add(new LiteralControl(string.Format(scriptTag, collapsible))); to the first if statement also and it appears to function now but not displaying the glyphicon. Any idea why that would not display?

Here is the modified base.master.cs
namespace AbleCommerce.Layouts.Fixed
{
using System;
using System.Web.UI;

public partial class Base : System.Web.UI.MasterPage
{
protected void Page_Init(object sender, EventArgs e)
{
if (ScriptsPh != null)
{
// insert necessary javascripts
string scriptTag = "<script src=\"{0}\" type=\"text/javascript\"></script>";
//string jquery = Page.ResolveUrl("~/Scripts/jquery-1.10.2.min.js");
string jquery = Page.ResolveUrl("~/Scripts/jquery-3.4.1.min.js");
string jqueryUI = Page.ResolveUrl("~/Scripts/jquery-ui.min.js");
string equalHeightsUrl = Page.ResolveUrl("~/Scripts/jquery.equalheights.js");
string collapsible = Page.ResolveUrl("~/Scripts/A3/A3Collapsibles.js");
ScriptsPh.Controls.Add(new LiteralControl(string.Format(scriptTag, jquery)));
ScriptsPh.Controls.Add(new LiteralControl(string.Format(scriptTag, jqueryUI)));
ScriptsPh.Controls.Add(new LiteralControl(string.Format(scriptTag, equalHeightsUrl)));
ScriptsPh.Controls.Add(new LiteralControl(string.Format(scriptTag, collapsible)));

if (AbleCommerce.Code.PageHelper.IsResponsiveTheme(this.Page))
{
string footable = Page.ResolveUrl("~/Scripts/footable.js");
string bootstrap = Page.ResolveUrl("~/Scripts/bootstrap.min.js");
//string collapsible = Page.ResolveUrl("~/Scripts/A3/A3Collapsibles.js");
ScriptsPh.Controls.Add(new LiteralControl(string.Format(scriptTag, footable)));
ScriptsPh.Controls.Add(new LiteralControl(string.Format(scriptTag, bootstrap)));
ScriptsPh.Controls.Add(new LiteralControl(string.Format(scriptTag, collapsible)));
}
}
}
}
}