How to dynamically hide/show buttons on a dialog using jQuery

One of my dialogs has the following code:

<div data-role="dialog" id="msg-popup">
  <div data-role="header">
      <h1>Notification</h1>
  </div>

  <div data-role="content" id> 
    <b id="notif-subject"></b>  
    <a href="#notif-details1" id:"show-notif" data-role="button">Show notification</a>
    <a href="#" data-rel="back" data-role="button">Cancel</a>
  </div> 
</div>

I am looking for a way to toggle the visibility of the show-notif button dynamically using jquery. Can anyone guide me on how to achieve this?

I attempted the following:

$("#show-notif").hide(); 

Unfortunately, this approach did not yield the desired result. Does anyone have any other suggestions?

Answer №1

It appears that there is a minor syntax error:

<a href="#notif-details1" id:"show-notif" data-role="button">Show notification</a>

The correct code should be (replaced : with =):

<a href="#notif-details1" id="show-notif" data-role="button">Show notification</a>

These functions are expected to work properly:

$('#show-notif').hide();
$('#show-notif').show();

Answer №2

Make this modification in your HTML code:

<a href="#notif-details1" id:"show-notif" data-role="button">Show notification</a>

Replace it with:

<a href="#notif-details1" id="show-notif" data-role="button">Show notification</a>

Ensure you include the correct ID:

id="show-notif"

You can view a demo on JSFiddle here: http://jsfiddle.net/MfQeF/

Answer №3

The statement "id:"show-notif"" is incorrect.

It should be written as id="show-notif".

For finding syntax errors, consider using Firefox or Chrome with tools like html validator or web developer plugins.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to locate an input element with multiple classes using Jquery?

In order to find an input element that is inside of the conjunction of the classes "form-group" and "text-center", you can use the following selector: $(".form-group.text-center input") <div class="form-group text-center"> <label class="lab ...

Wrapping a series of grids within a parent container to manage height effectively with grid960

Testing on the following browsers: Internet Explorer, Chrome, Firefox; Check out this example of an ideal layout in a PDF: Here is the link to the direct page: While Grid systems work well for width layout, I struggle with setting height constants. In ...

use triple quotes for python variable declaration

I am looking to extract information from an HTML file that contains elements with the class name "link". My challenge is to read each line into a variable and then parse it, all while using triple quotation marks. How can I create a string variable that ad ...

Tips for adjusting breakpoints in the SCSS of Vuetify version 2?

I am currently using scss files and I want to adjust the breakpoints within the css code in vuetify version 2. Unfortunately, I have not been able to locate any information regarding this in the vuetify upgrade guide. In the previous version 1.5, I utili ...

What is the best way to retrieve the selected userID in a Kendo grid when a row

Hi! I need assistance with obtaining the selected row ID. I've managed to retrieve my Ajax response, but I'm wondering if there's a way to display the selected row's ID. After using the new onchange function, I created a selected ID, b ...

Integrating Excel into a webpage - is it possible?

Currently facing an issue on my website. I'm trying to open a 'file://' URL directly with the <a href=""> element in a browser, but it's prohibited. I'm searching for a plugin or similar solution that can enable me to execut ...

Mastering the Sequence of JS Functions (or How Promises Still Confuse Me)

Let me explain my objective in simple terms: I have a set of functions that must be executed in a specific order, and each function has its own sub-order. This is how my code looks currently: async function LastModuleFunction() { await FirstModuleFun ...

Include the selected class in the relative URL

I am attempting to apply a highlight class to my selected category: My code looks like this : <div id="category"> <ul> <a href="category.php?c=electronic"> <li>Electronic</li> </a> ...

Eliminating fillers dashes from a text

Imagine having a string filled with soft hyphens like the one below: T-h-i-s- -i-s- -a- -t-e-s-t-.- The goal is to eliminate these soft hyphens and get back the clean string: This is a test. Attempting this task in JavaScript, here's how far I&apo ...

The addClass, removeClass, and css functions in jQuery are malfunctioning

I stumbled upon this website and I am looking to switch the font color from black to white. I attempted various methods but unfortunately, none of them seemed to work: Implementing jQuery's addClass function (to add a class to the SPAN tag) Uti ...

Set a class for the element created with document.createElement('img') method

Is there a way to apply the .rotatable class to the image below without using ('src', 'rotate.png')? $(document.createElement('img')).attr('src', 'rotate.png') css: .rotatable { cursor: move; bac ...

FlexiGrid issue: WebMethod failing to execute

I'm encountering an issue with FlexiGrid in my project. The problem lies in the WebMethod not firing properly, specifically during a Json/Ajax call. Despite setting a debug point at the WebMethod and confirming the correct URL through Firebug, it stil ...

Optimizing CSS for smartphones and tablets

Using the standard CSS for writing content will ensure compatibility with all mobile devices. In my current project, I have developed a mobile application and utilized the following CSS code to display some data: <div style="float: left; width: 90%; ma ...

What is the method for updating the value of the Sass variable in Angular 4?

Within the file app.component.scss, there is a variable named $color that has been set to 'red'. What steps can be taken within the file app.component.ts in order to access this variable and change its value to 'green'? ...

Tips for refreshing an angularjs $scope using $.get jquery

Attempting to implement the code below using $scope: var scopes = "https://www.googleapis.com/auth/contacts.readonly"; setTimeout(authorize(), 20); function authorize() { gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, h ...

Update a specific webpage using jquery

The thought has been lingering in my mind - is it possible to refresh or reload a specific page even when you are not currently on that page? Let's consider a scenario. Imagine I am currently on the page: www.example.com/trythis.php Now, what if I ...

Encountering an issue of receiving undefined while attempting to retrieve the attribute of a

At first, there was just a single upload button for a photo The setup looked like this, with the script tailored specifically for that ID <div class="field"> <label>Photos</label> <div class="field_info" da ...

accommodating multiple background images in CSS

I am currently working on a WordPress website using the Twenty Twelve theme. On one of the pages, I am trying to incorporate three background images - one at the top, the next one right below the top image, and the third one at the very bottom... Is there ...

Dealing with Inline Styling Woes

Trying to style a row of buttons on the left, a center-aligned navigation list, and another row of buttons on the right. The navigation buttons are grouped to account for layout changes. How can I horizontally center the navigation within the parent elemen ...

Can you explain the meaning of this PHP syntax and why is this variable showing NaN?

Looking for question marks on Google can be quite challenging. Can someone explain this process step by step? $page = isset($_POST['page'])?$_POST['page']:"0"; I believe it means to check if $_POST['page'] is set, use that ...