Trying to add custom jquery code to the home page text area for bootstrap accordions

For general questions and discussions specific to the AbleCommerce GOLD ASP.Net shopping cart software.
Post Reply
rich
Ensign (ENS)
Ensign (ENS)
Posts: 8
Joined: Thu Jun 25, 2015 9:46 am

Trying to add custom jquery code to the home page text area for bootstrap accordions

Post by rich » Fri Sep 18, 2020 7:56 am

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

User avatar
Naveed
Rear Admiral (RADM)
Rear Admiral (RADM)
Posts: 611
Joined: Thu Apr 03, 2008 4:48 am

Re: Trying to add custom jquery code to the home page text area for bootstrap accordions

Post by Naveed » Fri Sep 18, 2020 8:28 am

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.

Code: Select all

protected void Page_Load(object sender, EventArgs e)
{
	if (!Page.ClientScript.IsClientScriptBlockRegistered("CUSTOM_JS_SCRIPT"))
	{
		string scriptText = "<script src='" + ResolveUrl("~/scripts/custom/") + "customscript.js' language='javascript'/>";
		ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "CUSTOM_JS_SCRIPT", scriptText, false);
	}
}

rich
Ensign (ENS)
Ensign (ENS)
Posts: 8
Joined: Thu Jun 25, 2015 9:46 am

Re: Trying to add custom jquery code to the home page text area for bootstrap accordions

Post by rich » Thu Sep 24, 2020 3:50 pm

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

rich
Ensign (ENS)
Ensign (ENS)
Posts: 8
Joined: Thu Jun 25, 2015 9:46 am

Re: Trying to add custom jquery code to the home page text area for bootstrap accordions

Post by rich » Thu Sep 24, 2020 3:59 pm

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)));
}
}
}
}
}

Post Reply